Your Very First React App!

Right, so you're done reading about context and background, and you've installed NodeJS and NPM. The next step is to learn how to create your first instance of a React app. Time for some bad news: you see, creating a React app actually requires you to set up specialised build tools like Babel and Webpack - they act like compilers for your browswer, because React uses a syntax that is not native to the browser.

Haha, there's also good news: there is an easy way to create React app directories with all the necessary dependencies installed and have Babel and Webpack work under the hood. This tool that we're going to be using is called Create-React-App (CRA). Yes, very unoriginal, I know.

So what this CRA does is that it creates the necessary files and folders to have the React app work within your browser without having to bother too much about the required dependencies.

Heh, So I Don't Need to Know About Babel & Webpack?

Actually, you should acquaint yourself with what they do minimally. Sooner or later, if you're serious about React, you're going to need to customise certain things yourself using these two tools. And actually, there are three such tools that you should at least know about, which are all running under the hood with CRA:

• Babel: I like to think of Babel as a compiler of sorts. It makes your React code backwards-compatible with older browsers. React uses this syntax known as JSX, which is not quite a part of any JS Ecmascript versions.
• Webpack: It's a library that acts as a module bundler. So it takes all the codes that your app needs, and it just consolidates everything for you.
• ESLint: Essentially, this is a JS linter (something that analyses source code for errors) that warns you of vulnerabilities and errors.

In exchange for this "zero-configuration" set-up, CRA is very anal, and is thus referred to as an "opinionated" starter kit for React beginners. But hey, consistency is always good, so let's run with it.

Creating Your App Directory

Go to your terminal and type in the following commands. This essentially creates a React app directory in a folder called "my-first-react" (or you can call it whatever you want, really), and then has you navigating to that very folder:

npx create-react-app my-first-react
$ cd my-first-react

Once in your app folder, you should familiarise yourself with your app folder structure:

my-first-react Folder structure

.my-first-react/
|--.node_modules

|--.public
| |--index.html

|--.src
| |--App.css
| |--App.js
| |--App.test.js
| |--index.css
| |--index.js

|--package.json
|--package-lock.json
|--README.md

App Folders

Let's go through the folders and files one by one to see what they are all about:

• node_modules: this folder contains all the node packages that you have, or will, install for your app. It's good practice to never manually adjust this folder, and deal with it only through the terminal.
• public: this folder contains what we call "development" files. The most important one you'll need to deal with is the index.html file, which is the final front-facing html file that contains your final app render.
• src: this is your source folder which contains all the React components that make up your app. So all the JS code you'll be writing goes in here - let's highlight a few important files here:
  • The App.js file is what we call the "app container", the JS code that holds all other components for rendering - think of it as the top-most parent component of your app. The App.css file styles the App.js component.
  • The index.js file is the "first point of entry" to your React app. If you delete this file, your app doesn't render. You'll see later that it identifies an element in your index.html file with the class of "root", so that it can render your app in that element. The index.css file styles the index.html file.
• package files: package.json describes all the node package dependencies your app has in a JS object; so you don't need to share all the files in the node_modules folder if you want to share your project, you just need to share your package.json file. The package-lock.json file however, indicates to NPM how to break down all node package versions.

Hey, So Where's My React App?

Right, we're getting there. So back to your terminal, type in the following command:

npm start

This should bring up http://localhost:3000, a server running on your local computer, and render your very first React app in your default browser. The React logo should be spinning, and what you're seeing is actually the index.html file being loaded, and then having the contented rendered via the index.js file. The app container (App.js) though, is the one that contains your app, so thereafter, we'll edit it to adjust the output.

Find more ReactJS stories on my blog. Have a suggestion? Contact me at [email protected].