12 common questions when you start ReactJS

In this article, I will explain in detail what is the first few questions and concepts you will face when you are starting the ReactJS.

A few months ago, I decided to start on React Native and planned to build a prototype for a client. I went through the documentation, and I decided to have a quick look at reactjs.

At first glance, React sounds like an interesting and enjoyable syntax to write with. However, after some trying, there are some significant questions I faced, which I am sharing with you here. I found some of the answers as I checked many references and video conferences.

1. Why not move to ReactJS

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

It depends on your team and product criteria.

When you have a short project time frame. ReactJS is not the most straightforward framework to learn, as it comes with other libraries. Each of them has its own learning curve. So if you have the plan to finish the project in a few weeks and your team has no idea about reactjs, then this is not a good option for you.
When there is no business value are things that lots of people skip, a business value. What does React bring to your team? How it increase your product value? Ask these basic questions before you choose React for rewriting your app or start your new project with it. 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 exactly the same situation when AngularJS was released. Everyone gets crazy about that and wants to start a project with it, in an Angular way, even with jQuery in an 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 React an option.
You don’t have the capacity to dig into the library if you are facing issues. React is 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 in the long run and for commercial apps, you need to have the proper expertise to fix your problems. 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?

“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.

Flux is architecture and a concept, and it’s not a framework or library—we are using Redux for Flux architecture. I will explain what Redux is and the Redux application model later.

3. Code hierarchy in react component

This is one of the first few things you will get confused about. How to break a large component into smaller components? How to separate and manage application components? Here is your answer.

If you come from a design background, this will be a familiar subject. Just the way you break your component into smaller items in Photoshop and put them into the folder as a component.

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

There is a 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 first because for your first app, you can use them vice versa. Here is the simple explanation of when to use each:

Props: Use props to pass data and events from the 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 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?

Babel is a library that compiles your ES6 source code to normal JS code. When you are starting react, usually most tutorials are with ES6. Not all browsers support ES6, that is why you cannot run ES6 syntax on older browsers.

7. What is redux?

Redux is helping you to manage your application state. If you never face an issue using 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 something more sophisticated like Redux. Check out this git tutorial to understand redux and how it utilizes Flux architecture.

8. Do 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's browser; instead, it compiles your JS code into native code for both Android and iOS. Sounds interesting? Absolutely! In react native, we use almost the same concepts as React web applications, but not for everything. React native has its own controls that you need to use instead of HTML controls.

One more thing here is also important to mention, React native is not mature enough. So you might need to have a great understanding of that before you start 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 a React application. But it’s better if you use JSX syntax as it’s faster, has more built-in functions, and has lots of other benefits. You are most probably not finding too many examples of react applications with normal JS syntax. That’s why you'd better use ES6 and adopt it in your workflow from the start.

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.

Chrome extensions and Firefox extensions are available to make your life easier. For redux, there is Redux devtools, A 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 useobject.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 straightforward approach. However, when you need to do this frequently, this might make your code less readable. In ES6, instead, we use “…”. It looks weird at 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 the most important pieces of information that lots of React devs don’t read through carefully. ReactJS license. It's true that ReactJS is open source, but it comes with a BSD license, and more importantly, it is protected by a patent. What does it mean for you as a company?

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

Generally, when software does not come with an Apache or MIT license, you should get worried.

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 helps defensively. If they wanted it for defense, they’d write it differently to cover defensive situations.

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

Danial Kalbasi