Learning React with 30 days Guide

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.