React (Scrimba)
(current version 16.8.1)

Alternative (official) tutorial: https://reactjs.org/tutorial/tutorial.html


React Cheatsheet: https://devhints.io/react

Installation using node npm


This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow:
  1. Make sure you have a recent version of Node.js installed.
  1. Follow the installation instructions for Create React App to make a new project.
npx create-react-app my-app
  1. Delete all files in the src/ folder of the new project
  • Note:
  • Don’t delete the entire src folder, just the original source files inside it. We’ll replace the default source files with examples for this project in the next step.
cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..
  1. Add a file named index.css in the src/ folder with this CSS code.
  1. Add a file named index.js in the src/ folder with this JS code.
  1. Add these three lines to the top of index.js in the src/ folder:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
Now if you run npm start in the project folder and open http://localhost:3000 in the browser, you should see an empty tic-tac-toe field.

Should look like this…

React DOM and JSX

We learn how to spin up the most basic React app possible using ReactDOM and touch on some key points about JSX

index.html
(this is the same throughout all example as id=root is used)
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>