Lesson 1 - Setup

Since you've already got the prerequisites setup, you can now start creating a new project that we'll use to build our React application.

Initialize a project

First, create a new folder where you want the project to live. In my case, I created it on my machine at ~/dev/react-workshop.

In a terminal, change into that directory:

cd ~/dev/react-workshop

Now there, we'll setup a blank project using npm:

npm init -y

We now have the required package.json file.

There is a folder we want to store our code in, let's create it now;

mkdir -p lib

Create a new file at lib/index.html, and set its contents to be:

lib/index.html

<!doctype html>
<div id="app">Loading...</div>
<script src="app.js"></script>

(this is a very barebones, fully valid HTML5 file)

You'll see it's referencing a script file, so let's create that one at lib/app.js, and give it the contents:

lib/app.js

document.querySelector('#app').innerHTML = 'Hello World'

Open the lib/index.html in your browser. If everything works as expected, you should see "Hello World" printed.

git init
git add .
git commit -m "Initial Commit"

A basic project is now setup. The folder structure should look like:

.
├── lib
│   └── index.html
└── package.json