Stories

12 Common Questions When You Start ReactJS

Google+ Pinterest LinkedIn Tumblr

In this article, I will explain in a detail what is the first few questions and concepts you will face when you are starting the ReactJS. These are the things I faced personally, so this will really depend on what languages you used to write your apps.

A few months ago I decide to start on React Native and plan to build a prototype for a client. I went through the documentation and I decide to go have a quick look on reactjs.

In the first look, react sounds interesting and enjoyable syntax to write with. However, after some trying, there are some major questions I faced which I sharing with you here. I find some of the answers as I checked lots of references and video conferences.

1. Why not moving to ReactJS

Here is the first questioned that I asked myself. Why should I leave MVC frameworks like Angular and continue with a new framework like react? This is a one question that I’ve seen lots of developers asking in the forums and believe me it goes into the real MLB fighting. Some people trying to compare reactjs with Angular or Ember frameworks and reach to a result or sometimes they go through the benefits of each. Either way, you will see the both opinions. But here is my opinion.

It depends on your team and product criteria.

  • When you have short project time frame. ReactJS is not the most straightforward framework to learn as it comes with other libraries. Each of them has their own learning curve. So if you have the plan to finish the project in few weeks and your team have no idea about reactjs, then this is not a good option for you.
  • When there is no business value. Here are things lots of people skip it, a business value. What react brings for your team? How it increase your product value? Ask these basic questions before you choosing react for rewriting your app or start your new project with that. I see the hype is super high in the JS community for react, and I’ve seen developers choose a framework because it just sounds trendier. This was the exactly same situation when AngularJS was released. Everyone get crazy about that and want to start a project with it, everything angular way, even JQuery in Angular way! Business value can translate as happier customers, faster application, more stable application, easier development, reusability, the number of platforms it supports and community support. If you can solve your problem with current technologies, you really should not make the react as an option.
  • You don’t have the capacity to dig into the library if you are facing issues. React still under active development especially react native. It’s probably easy to build a simple app with that and get support from the community, but for a long run and commercial apps, you need to have the proper expertise to fix your problems.

 

2. What is flux and the difference from MVC Architecture?

When you developing with Reactjs, you are not only using reactjs as view library but instead, you using the whole flux ecosystem“Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.”

Flux is architecture and a concept, it’s not framework either library. We using Redux for Flux architecture. I explain later what is Redux and what is the Redux application model.

3. Code hierarchy in react component

This is one of the first few things you will getting confuse about that. How separate and manage application components? How break large comp to smaller comps? Here is your answer.

If you are coming from a design background, this will be a familiar subject for you. Just the way you break your component into smaller items in photoshop and put them into the folder as a component, after that, you gather few components and make a page.

It’s always a good idea you follow the same concept in your react component implementation. You can simply follow the PSD which you getting from your designers (we assume your designer follow this comp rule). Let’s show an example:

thinking-in-react-components

There is great article to learn about this concept more in “Thinking in React“.

4. What are props and state

The idea behind the props and states is simple enough to grasp. This looks weird at the first because for your first app you can use them vice versa. Here is the simple explanation when to use each:

  • Props: Use props to pass data and events from parent component to your child component.
  • State: To store the current page data. Your state data is passing from parent to child components by props.

State and props using side-by-side when you design your components. Using one doesn’t mean to drop another one.

5. What is super(props)

This is when you want to access to this.props in constructore. Here is a good answer from Ben Alpert: If you want to use this.props in the constructor, you need to pass props to super. Otherwise, it doesn’t matter because React sets .props on the instance from the outside immediately after calling the constructor.

6. What is babel library?

When you are start react, usually most tutorials are with ES6. The ES6 is not supported by all browsers that’s why you cannot run ES6 syntax on older browsers. Babel is a library that compiles your ES6 source code to normal JS code. That’s it!

7. What is redux?

Redux is helping you to manage your application state. If you never face an issue to use redux, you might not need it. As we discussed earlier, React has its own mechanism to handle the state of your apps, but for a larger application, you need to something more sophisticated like Redux. Check out this git tutorial to understand about redux and how it utilize the Flux architecture.

8. Is react native and reactjs follow the same concepts

Almost. React native is a library for developing native mobile applications by ReactJS. React native is not running on your phone browser, instead, it compiles your js code into native code for both android and iOS. Sounds interesting? Absolutely! In react native we using almost same concepts as react web application but not for everything. React native have its own controls that you need to use instead of HTML controls.

One more thing here is also important to mention is, React native is not matured enough. So you might need to have a great understanding of that before you starting your next mobile app with it.

9. Do we have to use JSX/ES6 to write react application

No, you don’t. You can simply use normal JS syntax to write react application. But its better if you using JSX syntax as it’s faster, more built-in functions and lots of other benefits. You are most probably not finding too many examples of react application with normal JS syntax. That’s why you better using the ES6 and adopt it in your workflow from the first.

10. how to debug react & redux application

There are official tools to debug the react and redux applications, React Developer and Redux Developer. React Developer Tools is a system that allows you to inspect a React Renderer, including the Component hierarchy, props, state, and more.

There are a Chrome extension and Firefox extension available to make your life easier. For redux there is Redux devtoolsA live-editing time travel environment for Redux

687474703a2f2f692e696d6775722e636f6d2f4a34476557304d2e676966

There is a chrome extension you can use it too.

11. What is object spread or … ?

Sometimes you need to get a copy from your object, to update the values or create new values, in either way you use Object.assign() .

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

This is a simple approach, however, when you need to do this frequently, this might make your code less readable. In ES6, instead, we using “…”. It looks weird at a first glance, but it just makes our code much more readable. Here is the same code with object spread.

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return { ...state, visibilityFilter: action.filter }
    default:
      return state
  }
}

 

12. License terms, don’t get sued!  

Here is one of a most piece of information which lots of react devs don’t read through that carefully. ReactJS license. Its true reactjs is open source, but it comes with BSD license and more importantly it protects by a patent. What does it mean for you as a company?

If you are a software company and you have patents then keep in mind that by using React you are giving Facebook a free license to your entire patent portfolio.

Generally, when a software not comes with Apache or MIT license you should get worried. Because they want to protect their software.

Danny Bee pointed out here: What Facebook has done is entirely one-sided. It benefits Facebook only, and even then, it generally only helps them in situations where they want to sue people. None of this really helps defensively. If they wanted it for defense, they’d write it differently to cover defensive situations.

If you plan to use the react as part of your development or use it entirely for your project, try to discuss with your lawyer first. It will not a good idea to face with facebook lawyers later.

Your email address will not be published. Required fields are marked *