Prerequisites

There are a couple of things that you must have before starting with React:
 Basic understanding of HTML
 Basic understanding of CSS
 Basic understanding of JavaScript
 Basic understanding of the DOM
 Understanding of some ECMAScript6+ syntax and features
Also, it is beneficial (but absolutely not necessary) to have some prior knowledge
and experience with some other front-end framework (Angular, Vue…)
The core ECMAScript6+ features that are often used in React:
 Declaring variables with “let” and “const”
 Arrow Functions
 Exports and Imports
 The Spread and Rest operators
 Destructuring

Code editor

You can use your preferred code editor (Visual Studio Code, Atom, Sublime Text,
Vim…).
Personally, I use Visual Studio Code, which is a free, lightweight, open source code
editor by Microsoft. It is easy to use and personalize to your needs, and there are
literally thousands of different add-ons built for it that can help you a lot with
your coding process. You can download visual studio code from here:
https://code.visualstudio.com/Download
Some useful Visual Studio Code extensions:
 Sublime Babel – syntax highlight coloring
  XO – code linter for XO (or you can use any other linter like ESLint)
 Bracket Pair Colorizer 2 – colorizes matching brackets
 GitLens – enhances Git capabilities in Visual Studio Code
 LiveShare – enables real-time collaboration of teams on the same code
 ES7 React/Redux/GraphQL/React-Native snippets – generates code
snippets for React/Redux/GraphQL/ReactNative

NodeJS and NPM

There are a couple of things that you need to install in order to be able to create
React project and start working on it
 NodeJS: https://nodejs.org/en/ - JavaScript runtime
 npm: installed when you install NodeJS – node package manager, used for
installing node packages to your project (like React, Redux…)

Create React App

Create React App is an easy way to start with React. It creates React app with the
most basic structure and the least amount of needed files. To create React app,
open your console, navigate to the folder where you want your project to be
created and run the following command:
npx create-react-app name-of-your-app

Tutorials and Documentation

The best way to start learning React is the one that fits you. Some prefer to read
documentation and blog posts, some prefer to watch video tutorials, others like
to get their hands dirty and play around with code. That’s why I’ll include different
kinds of tutorials, blogs and documentation that I have used when I started with
React, some of which are free and some are paid, but feel free to use something
else if that fits you better.

React (written resources):

 https://www.taniarascia.com/getting-started-with-react/ - an amazing
blogpost by Tania Rascia, aimed at people with no previous experience in
React. It explains the most basic concepts of React and has great examples
for it. Great starting point if you learn by reading.
 https://reactjs.org/docs/getting-started.html - The official documentation
for React. It’s pretty comprehensive, and has most of the relevant data you
will ever need.
 https://reactjs.org/tutorial/tutorial.html - If you prefer to learn by doing,
this is the place to start. It is a tutorial on how to build simple tic-tac-toe
game using React.
 https://reactfordesigners.com/ - If you come with a designer background
and not much experience in programming, the best place to start is React
For Designers. It is a collection of resources with the goal to help designers
get the hang our of React.
 https://reactjs.org/docs/thinking-in-react.html - I would recommend
everyone read this short guide, be it beginner or already with some
experience in React. It helps a lot going forward if you start thinking the
React way.
 https://reactjs.org/community/courses.html - List of free and paid
community favorite React courses.
 https://reactjs.org/blog/all.html - The official React blog, where you can
find all the news and features introduced in React.
 https://medium.com/@dan_abramov – Dan Abramov is the creator of
Redux, and part of the team working on React, so if you want to learn more
about how and why some things in React are built and work the way they
do, you can read his blog posts on Medium.
 https://overreacted.io/ - The personal blog from Dan Abramov, where he
writes his newest blog posts.
 https://interworks.com.mk/get-hooked-on-react-hooks/ - Blog post about
React Hooks and their impact on the React ecosystem.
React (video resources):
 https://www.youtube.com/watch?v=pgAvVxowaYU – Free React crash
course by Maximilian Schwarzmüller.
 https://www.udemy.com/course/react-the-complete-guide-incl-redux/ -
The full React course by Maximilian Schwarzmüller, spanning over 40 hours
of video and explaining everything you need to know about React, Redux,
React Router, NextJS, Webpack, Redux Saga and lot more. My personal
favorite course, I would recommend this to everyone, regardless if they are
just starting out with React or want to improve their knowledge and learn
advanced concepts.
 https://www.youtube.com/watch?v=Ke90Tje7VS0 – Free React crash
course by Mosh Hamedani.
 https://www.youtube.com/watch?v=sBws8MSXN7A – Free React crash
course by Traversy Media.
 https://www.youtube.com/watch?v=DLX62G4lc44 – Free React full course
by freeCodeCamp.org.
 https://www.youtube.com/channel/UCz5vTaEhvh7dOHEyd1efcaQ/playlists
- Videos from React Conference.

Resources about other technologies often used with React

(Redux, React Router, NextJS, Webpack, Redux Thunk, Redux
Observable, Redux Saga…):
 https://redux.js.org/introduction/getting-started - Redux documentation.
 https://reacttraining.com/react-router/web/guides/quick-start - React
Router documentation.
 https://nextjs.org/docs - NextJS documentation.
 https://webpack.js.org/concepts/ - Webpack documentation.
 https://github.com/reduxjs/redux-thunk – Redux Thunk Github repository +
documentation.
 https://redux-observable.js.org/ - Redux Observable documentation.
 https://redux-saga.js.org/ - Redux Saga documentation.