By Yeo Yong Kiat in ReactJS
Today, we're going to be creating our very first React app. And boy, is it going to be a lame app. What did you expect, we're beginners, right? Zero to hero, here we go!
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.
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:
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.
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
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
Let's go through the folders and files one by one to see what they are all about:
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.
In the next post, we'll look into what the index files are.
Find more ReactJS stories on my blog. Have a suggestion? Contact me at [email protected].