Learning React may be a top priority for many front-end developers this year. In this article, I want to give beginners a comprehensive overview of how to learn React without being distracted by other technology stacks.

Want to the simple | | fast | | ease 】 the way to learn the React?

There is no shortcut to learning, you have to be patient, learning new knowledge is a challenge, for me, I am a developer, there is always a new knowledge point to learn. If you want to learn React well, you need to spend a lot of time on it. You need to learn React step by step and don’t let yourself be distracted by other technology stacks.

I heard that React had a steep learning curve before LEARNING React, but based on my own experience, I feel that if you learn React step by step and don’t get distracted by other technology stacks in the process, learning React will not have a steep learning curve.

I’ve picked a few of them and briefly explained why it’s not a good idea to combine them with React when learning React:

Learn TypeScript while learning React?

Not recommended! Before converting JavaScript to TypeScript, I recommend learning React. If you write TypeScript and React together, not only will normal JavaScript code be written in TypeScript, but your React components will also be written in TypeScript. If you haven’t learned to write React code yourself from scratch, you’ll be a mess. Also, most of the React tutorials and classes out there aren’t written in TypeScript, so it makes learning React more complicated, not easier.

Learn Redux as well as React?

Not recommended! Redux is a popular JavaScript state management library. I recommend getting to know React and its built-in state management before getting into complex external state management libraries for large and complex applications. React already provides aN API for handling application state. Some React applications don’t even need Redux or any other state management libraries. Before introducing another technology stack, learn how to handle states in React.

Learn React prerequisites

Because React is a JS library, there is no way around learning JavaScript. You can’t learn React without JavaScript or without knowing JavaScript in the first place. React uses a lot of JavaScript knowledge.

React or JavaScript first?

You should have at least a basic knowledge of JavaScript ES5 and some understanding of HTML and CSS. React also makes use of JavaScript ES6 (ES7, ES8, ES9), which is why it’s important to be at least familiar with JavaScript ES6 before learning React. The React project uses a lot of JavaScript. You can learn a lot of JavaScript knowledge while learning React. Keep yourself excited and don’t stay on the basics of JavaScript for too long. If you don’t apply them to real projects, you don’t see them working. Start building the React project and be curious! When learning React, switch back and forth between JavaScript and React.

Why React?

Why did you learn React? There are a lot of JavaScript libraries in the Web front-end space, and beginners don’t usually ask themselves why they need them; they probably just know that companies and jobs need them. However, sometimes we can ask the question: Why do I need these libraries?

What problem does it solve for me? This question is hard to answer, but here’s a good way to answer it: Implement the same application with plain JavaScript and React, so React will show you what it solves for you. Use the same technique when deciding whether to learn React or another solution (such as Vue or Angular). Build a basic application using your chosen solution and use your development experience to determine which solution works best for you

Learn React step by step

Now that we know why we need to learn React and the prerequisites for learning React, let’s look at how to learn React from scratch. I’m a firm believer in starting with the React documentation, which follows the latest version of React and shows you what React is all about

Follow the React documentation

As a beginner to Web development, looking through the library’s documentation, especially if you have to read a lot of English, can be intimidating. But I firmly believe that it’s the best way to learn something new. On your way to becoming a developer, you’ll get used to learning about libraries or frameworks through their official documentation, so why not get used to it now? Read the official document. It has at least the following benefits:

  • There is a complete tutorial
  • You can see the suggestions from the core contributors
  • The latest knowledge points and the latest version
  • Complete API references

Every time I choose a new technology, I don’t check any courses or books, but go straight to the technology’s documentation to see if it has a beginner’s tutorial, which usually does, and its beginner’s tutorial is my entry point to the new technology. Beginners use documentation correctly, which will make them more effective in learning new techniques.

Learn React in practice

After you’ve learned the React Beginner tutorial from the React documentation and learned the basics of React from scratch, you can build your own project to continue learning. It’s not always easy to come up with a project, but there are a lot of inspirations. For example, some people learn React by making games. There are a lot of games out there that use React. Then compare your solution to other solutions, you’ll learn from your mistakes, and you’ll be able to evaluate your source code against others’ implementations.

Learning React by Doing is probably one of the most common pieces of advice you’ll hear from other developers, and this advice applies to almost everything in life. As a React developer, every task can present you with new challenges. Now there are a lot of the React video courses, books and tutorials, some people easily cramming the consumption of these materials, so do it yourself to do something, you might be a problem in practice difficult, then become despair, you have to take time to think about this question, finally solve the problem, harvest the fruits of it.

Learn React every day

Code every day. You can take the 100-day Code Challenge and clock in every day to make it a habit. Stick with it for a while and you’ll eventually become a professional React developer. Learning is a marathon, not a sprint.

To export

Get feedback from other React developers by showing off their work. If your React project hits a milestone, show it to others and ask for their feedback. Here are some well-known platforms where React works can be shared:

  1. Reddit
  2. reactiflux
  3. spectrum

Not only will you get feedback from people, but you’ll also be able to join discussions to learn more about React. Explaining something to someone is a great way to learn something new. You may be one step ahead of other React beginners and help them solve their problems. Check out the React Beginner Thread on reddi T’s React Subreddit, where you can help other React developers solve their problems.

Install the React environment for beginners

How do I start actually writing a React project? If you don’t have any editors/terminals or ides installed yet and just want to see how React feels in your code environment, you can use an online code editor called CodeSandbox to play around with React and see if you like it. However, if you want to develop the React application on your local machine, you first need to do some installation work, which can be broken down into the following steps:

Install Node and NPM

Node.js allows you to run JavaScript outside of the browser, while NPM allows you to install libraries like React in your projects. You’ll need both tools for almost any modern JavaScript project.

Use an IDE

Here I recommend Visual Studio Code, which is a popular lightweight IDE and you may install plug-ins to extend its functionality.

Create a project using create-react-app

Create-react-app is a solution for creating react projects. The Create-React-app allows you to learn react from a zero-configuration React starter project. You can just focus on learning React. And all the tools around it are handled by create-React-app.

Learn more about React

After you’ve learned React componentization, Props/State, and JSX syntax, you can dive into advanced React concepts and patterns, such as:

  1. React Hooks
  2. High order component
  3. Render Props
  4. React Context

With these advanced React facts in hand, you should be able to easily develop larger React applications.

Find more learning resources

After you’ve browsed the React documentation, learned the basics and some advanced concepts and patterns, and built the React application yourself, be sure to check out other React resources. Note that I didn’t mention checking out other React materials until later in this article, but I’d like to point out that learning by doing is key here, either by developing your own React application or by writing your own summary of the learning process. React Types of learning materials include video courses, books, blogs, and interactive tutorials. However, not every type of learning material is right for you, so find out which teaching style works best for you.

React Learning Roadmap

After you’ve learned React and become familiar with its basic and advanced implementation details, there are a number of ways you can learn to improve your React skills. Here are some tips:

  1. React + React Router: Use routes to develop React single-page applications
  2. React + Firebase: Connect the React application to the database and implement user authentication/authorization
  3. React + GraphQL: Connect the React application to the Node.js backend application via a GraphQL interface
  4. React + Redux: Use predictable state management in React applications