React is an Arsenal in the tools of the modern day front end developer , you cannot work effectively without it How should you approach learning it ?
Before taking on React , ensure you know the following Javascript concepts very well :
- Functions
- Objects
- Array and its method
- Array and Object Destructuring
- Pure and Higher Order Functions
- Asynchronous Programming
- DOM
- Event Handlers
- Fetch API
- File API
- Client Side Data Storage e.g Local Storage You should also be familiar with Responsive Design. If you are good with the above listed concepts then use this approach as a guide to learning react :
The official documentation has rich information on how to get started and why you should not use examples you assume to be cool
- Start with understanding JSX and How React handles rendering
- Practice JSX and Rendering
- Jump on how to create react elements and components
- Learn Conditional Rendering
- Work with List
- Try to understand props injection and how it affects code reuse . Ask yourself : "How will I fix this ? " Don't bother about the answer to your question yet , react will answer you.
- Learn how to compose element
- Read State Management
- Create forms
- Work on Creating the Temperature Converter Example
- Read Thinking in React
- Now , try to properly understand State Managenemt with emphasis on Component State and App State e.g User Locale
- Build the following :
- Card Component
- Dropdown
- Mobile Navigation
- Collapsible
- Todo List
- Modal Component
- Tabs
- Slideshow
- Learn React Hooks : useState , useEffect , useRef , useContext , useReducer If you complete the examples above , you can go ahead to build the following :
- A blog
- An ecommerce with search and Shopping Cart
- An App with Login and Logout Authentication