Setup React
By Justin
Watch this series to build a React.js project from scratch.
Below is a reference to setup a React.js project on your local machine. We'll be updating it from time to time so please let us know in the comments if you have anything we should add. For more React.js projects, posts, courses and more, check out this link.
1. Install Node.js
Download & Install Node.js from the source. I recommend downloading the LTS unless you have a strong reason not to. At the time of this writing, it's version 14.16.20,
After you run the standard installation your command line (Terminal or PowerShell) will have the following commands:
- npm
- npx
Open (or restart) Terminal/PowerShell and run:
console
node --version
npm --version
npx --version
node is the command for using the node runtime or executing a file like node project.js
npm is the node package manager. This makes it easy to install dependancies for any of your node-based projects. (Remember Node.js is a JavaScript runtime so Node.js is JavaScript).
npx is a tool for running Node packages. Personally, I use npm (& yarn) far more than npx even when building React.js projects.
2. Recommended. Install Yarn
Yarn is a popular dependency manager for creating Node.js (JavaScript) packages.
npm install --global yarn
3. Choose Project Parent Location
I create a Dev folder in my Users' root folder. It goes something like:
$ mkdir ~/Dev
$ cd ~/Dev
I like using this folder for my projects on my local system but you can choose where you'd like. Next, decide your project's name. For this, I'll call my project try-reactjs and it's final home will be ~/Dev/try-reactjs
4. Optional. Use npx to create a React.js Project.
This an official way to bootstrap a new react application with some boilerplate code. Personally, I prefer using Parcel.js as discussed in section 5 below.
npx create-react-app try-reactjs
This will take a few minutes the first time you run it.
Review the project
cd try-reactjs
ls -a
You should see:
. .git README.md package.json src
.. .gitignore node_modules public yarn.lock
package.json- npm run start / npm start -> Development build/watch
- npm run build / npm build -> Production build
- npm install -> Install dependencies in package.json
If yarn is installed, you can use:
- yarn start -> Development build/watch
- yarn build -> Production Build
- yarn install -> Install dependencies in package.json
Troubleshooting installs. Every once and a while your installs will fail. When this happens, it's often great to just delete the node_modules directory and run yarn install/npm install again. This may save you some headache in the future. Lookout for .cache folders as well.
5. Recommended. Use Parcel.js to create a React.js project.
1. Install Parcel.js
Following the docs go ahead and:
yarn global add parcel-bundler
If using npm, run: npm install -g parcel-bundler
2. Navigate to project dir:
cd ~/Dev/
mkdir try-reactjs
cd try-reactjs
this assumes you did not use npx above
3. Initialize Project
yarn init -y
You can also use npm init
4. Create index.html
html
<!DOCTYPE html>
<html>
<body>
<div id='app'></div>
<script src="./index.js"></script>
</body>
</html>
Note index.js in this html file as our entrypoint for our project.
5. Create index.js
javascript
import React from 'react';
import ReactDOM from 'react-dom';
const appDivEl = document.getElementById('app')
const App = props => {
return <h1>Hello World</h1>
}
ReactDOM.render(<App />, appDivEl)
6. Run parcel watch
parcel watch index.html
This will install any dependancies your index.js file has and that includes any javascript modules you import. Cool huh?
As you can see, Parcel.js is a minimal version of a React.js app with incredible flexibility to add packages at will. parcel watch will automatically install packages for you.
6. Adding a Linter
A linter analyze our code and offers improvements, bug checks, and often reformats it for us.
- VSCode Official Linter
- SublimeText SublimeLinter