React Roadmap

Main concepts

1. Overview

Before jumping into the details, why not try to take a bird's eye view on how all the pieces and tools interact with each other?

2. Installation

create-react-app is an official React tool that lets you easily create your project and focus on the code straight away, without having to configure build tools.

Assuming you already have Node.js installed, run:

npm install -global create-react-app 

Now, to create a new React app:

npx create-react-app project_name

# And you should see:

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[#####--------------------------------------------------------------------------------------------------------] 59/1389

This will install and configure for you:

  • A lightweight development server
  • Webpack
  • Babel
  • Dependencies

3. Essential tools

Simple React Snippets

Simple React Snippets - Visual Studio Marketplace

Debugging: React Devtool

4. Components, State and Props

Setting attributes

class MyComponent extends Component {
    state = {
        imageUrl: 'https://example/image.jpg'
        imageAlt: 'An example image'

    render() {
        return (
            <img src={this.state.imageUrl} alt={this.state.imageAlt}>

5. Writing HTML with JSX

6. Working with Forms