Learning React with 30 days Guide
Basic Guide to get started and build a decent grip over React in 30 days.
If you have prior knowledge of JavaScript, HTML and CSS then with the help of this guide you would be able to upskill yourself and make your life as a web developer easier.
Now if you are someone who hasn't learned JavaScript much then it could be a little tough if you start with React as some topics would involve a lot of fundamental JavaScript concepts like variables, functions, objects, arrays, and DOM manipulation etc. You could however give it a try and learn about React and JavaScript simultaneously on the go.
However, if you are someone who hasn't learnt even the basics or trying to jump straight to React skipping JavaScript, then this guide might not be ideal for you.
Now, a mandatory mention of React and its powers
React, a JavaScript library developed by Facebook has revolutionized web development by providing a powerful and efficient way to build interactive user interfaces.
If you are reading this guide then obviously you are interested in learning React but still, let me brag a bit about it to give more context
With React you can break large chunks of code into simple components which will allow you to build web pages easily.
React supports a lot of tools that will further make your life easy and help you build more complex websites or applications.
React also has great community support, a lot of folks are using it leading to regular updates and more cool tools to use. This point could seem a bit irrelevant at first but once you start using technology you will encounter a lot of problems and sometimes you would want to expand and do more things using it and that's where having a great community would help.
Okay now let's jump to the fun part:
The guide is divided into 30 days, todos specifying what topics you should be focusing on. And with each tick, you would see yourself grow as a React Developer.
Day 1: Introduction to React
What is React and Why use it?
Knowing JSX and Babel
Setting up the development environment (Node.js, npm, Create React App)
Day 2-3: JSX and Components
Understanding JSX syntax
Creating functional components
Building a simple React component
Day 4: Minor Assignment
Now at this point, assuming you have built webpages earlier, try and make a simple webpage using React Components. Break down the code into components like Header, Footer and Main displaying some content.
- Example- ToDo List, Notes List, or a simple page containing multiple components
Day 5: Props and State
Using props to pass data to components
Managing state within components
Building a component that uses props and state
Day 6: Handling Events
Handling user events in React
Adding event handlers to components
Building an interactive component with event handling
Day 7: Lists and Keys
Rendering lists of data with map()
Understanding the concept of keys
Building a component that displays a list of items
Day 8: Minor Assignment-2
At this point, you should be able to understand mapping and build an interactive component. You should try to take your prev. assignment and try mapping different components.
- Some Examples can be of all the tasks in your to-do list or large no of notes etc.
Day 9-10: Styling in React
Different approaches to styling React components
Using CSS modules or styled-components
Styling a React component with your preferred method
Day 11: Conditional Rendering
Learn about conditional rendering in React using ternary and And operator
Building a component with conditional display of content or rendering a component only if a condition is true
Day 12-13: React Hooks
Understanding React hooks (useState, useEffect, etc.)
Converting class components to functional components with hooks
Refactoring a project to use hooks
Day 14: Forms and Controlled Components
Handling forms in React using controlled components
Validating and submitting forms
Creating a form with controlled components and react hooks
Day 15: Revision
Try revision all the previous topics and make sure that at this point you have learnt the below topics:-
Functional and Class Components in React
React Hooks and different use cases
Handling forms and controlled components
Day 16-17: Minor Assignment-3
Try to apply the knowledge that you have gained now and use React hooks and controlled components in the assignment.
- Example: Try creating a form to add a new todo or notes in your list
Till this point, you have covered basic topics, now time for some more functionalities-
Day 18-19: React Router
Introduction to React Router
Setting up routing in a React application
Creating multiple pages and navigating between them
Day 20: API Integration with Axios
Making HTTP requests with Axios
Fetching data from an API in a React application
Building a component that fetches data from an API and displays it
Day 21: Context API
Introduction to Context API for state management
Creating and using context in a React application
Building a component that consumes data from a context provider
Day 22-23: State Management with Redux (Optional)
Understand the concept of state management and the need for Redux.
Set up Redux in a React application to manage global state.
Build a simple application that uses Redux to handle state and data flow.
Day 24-25: Assignment-4
You should be able to understand react-router and state management by now. Now try using them and complete the to-do list or note-taking app you were working on. You can use react-router to set up different routes for login or different categories. You can also utilize react hooks to keep track of completed tasks in your todos.
Day 26-30: Major Assignment
Now that you have grasped decent knowledge of components, react-router and state management. I would recommend you work on a project with APIs. Fetch useful data from the APIs and render them using React. You can use any free APIs out there to build something out of it.
Build a weather app using openweather API
IMDB clone or movie listing app using OMDB or TMDB API
Recipe Finder app using TheMealDB API or Foodish API etc.
Note: Deploying a React App
You can deploy the app using platforms like Netlify, Vercel, or GitHub Pages. Deploying React App using Vercel can be done with the ease of a click.
After completing these steps, you will be able to gain a decent knowledge of React. Now after completing these basic or intermediate topics, there are a couple of other things that you can learn:
Testing in React
Introduction to testing React components
Writing unit tests using Jest and React Testing Library
Creating test cases for your components
Advanced Component Patterns
Learning about higher-order components (HOCs)
Understanding render props
Exploring other advanced component patterns in React
React Performance Optimization
Identifying and optimizing performance bottlenecks
Lazy loading components with React.lazy()
Using memoization and useMemo hook for optimization
Forms with Formik
Introduction to Formik for handling forms in React
Building a form using Formik for form management and validation
React Animations and styling
Adding animations to React components
Using CSS transitions and animations
Implementing animation libraries like React Spring or Framer Motion
Learning about material UI or styled-components
That's it for now. React is not just confined to these topics but completing these topics will lead to a strong foundation and later you can expand and learn more by engaging with the community.
Thanks for reading the blog. Please share your honest opinions or feedback so that I can improve. I will be writing a couple of other blogs regarding different tools in React and a couple more focusing on React Projects. So stay tuned for that. You can follow me on Social Media or subscribe to the Newsletter for further updates.