[React_Redux] React?

React is a JavaScript library that is created by Facebook in 2011.

 

1. What?

React is a library originally in order to create a component in web applications (React DOM). It has expanded to other systems such as mobile apps (React Native) or virtual reality (React VR).

 

2. Features

Working with React means you are creating an web application through components. Each page does not contain everything in a single file anymore. Many components are combined together. This approach might be confusing you at first. But in the end, you will create a new page with existing components, which work consistently across the many pages.

Before React, two-way binding was very popular (ex. Angular), which magically syncs the data state and UI. React adopts the one-way binding, which requires the explicit change handler to set the new state. However, this additional overhead has some benefits too. Two-way binding seems good but it make really hard to debug when the things do not work correctly. Also one-way binding makes you to have more control of how the state flows.

React is JavaScript-centric. Rather than inventing new conventions, it integrates HTML and JavaScript in a rather natural way. In the following example, the submit is just a JavaScript function.

<button onClick={submit}>submit</button>

 

3. Why?

React is a very lightweight and non-opinionated library that is very flexible. There are many React renderers that can be used in many echo systems (react-dom, react-native, etc.).

Unlike Angular or Ember, which has the unique extension to HTML (such as ngFor), React just uses JavaScript. This simplicity of React is a good thing. There is a less learning curve for developers.

There are other reasons why we might want to use React; for example, its community support and popularity. But the most important factor is its performance to update the DOM. React minimizes DOM changes with virtual DOM.

 

4. Related Libraries

React is usually used with other libraries. The choice can be overwhelming but there are popular options.

  • Type Enforcement: PropTypes, TypeScript
  • State Management: Redux, Flux

 

5. All but Goodies?

React is simple and straightforward so it is easy to learn. But don’t be fooled. Note that React is a library specifically designed to create components rather than a full framework (Angular). React needs other libraries to create the whole solution. You need Redux for data, React-Router for Routing, etc …

In my experience, React is a great tool to create reusable components but interacting with Redux is not as simple as you might guess. There require quite a lot of plumbing code you will tackle. However, with careful design and coding, you can create consistent component web applications with React and Redux, which work like a magic.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s