Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
440 Views
To Continue Learning Please Login