Thinking in React.js

React community has provided a direction on how to think in React way and build big , fast and scalable applications. React has reached multiple platforms and widely used a popular JavaScript UI interface library.

Step 1 − Creating a simple mock service

If we need to make a server call and fetch data. We can create a mock service to start with and build a component to fetch and display data.

Here we can include the processing of json in component and evaluating the expected result.

Step 2 − Break the functionality into smaller components

The first Thing React suggest is to create the smaller understandable design of boxes . These boxes will represent the association between the different components and passing of data flow.

Making of components should be based on principle of single responsibility. That means a single component should handle a single task.

Creating a component hierarchy will make developers task easier.

Step 3 − If possible start by making a simple static version

With the use of mock service and smaller components we can create a static version and build the app thereon.

Creating a static version should not use state modifications. It should play with passage of props and rendering Ui only. Keeping one way data flow in React makes it simple and modular

To make it more clear the difference and use case of props and state should be understood very well.

Step 4 − Identifying the Minimal representation of UI state

For making app interactive the state should be able to triggered from the relevant component.

Identifying the required mutable state is necessary to build the correct app.

Step 5 − Identify where the state should live −

State can be shared between the multiple child components. Lifting the state up can be used to make communication between the multiple components. Using state management libraries like Redux solves the lot of issues arising from state.

React strongly recommends the one way down flow of data to components.

Step 6 − Add two way data flow if required −

The controlled component in form handling are the example of two way data binding.