- Trending Categories
- Data Structure
- Operating System
- MS Excel
- C Programming
- 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
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.
- Related Articles
- SVG morphing in React JS
- Adding Lottie animation in React JS
- SVG drawing in React JS frontend
- Creating a Particle Animation in React JS
- Creating a Customizable Modal in React JS
- Creating animated loading skeletons in React JS
- Drawing arrows between DOM elements in React JS using react-archer
- Creating an Airbnb Rheostat Slider in React JS
- Creating a Rich Text Editor in React JS
- Device Detection and Responsive Design in React JS
- Using pointer light for better lighting in React JS with React-Three-Fiber
- SVG zoom-in and zoom-out in React JS
- How to make a resizable element in React JS
- Making a timer in React JS using reactspring animation
- Creating an Excel-like data grid in React JS
- Drag and Drop a File feature in React JS