Basic react.js setup guide and workflow - Level 1
This guide is part of a long series that am helping my brother to learn react.js and improve myself at the same time.
4 min read
There are a lot of reference guides that are well documented than mine. The reason behind publishing the guide is, am using this guide as a primary reference point for my future react projects. Before this, I use to keep it as a raw list with some side notes written by hand in a 180-page notebook bought from my nearby store. But is not understandable in any way to my brother when I teach him react.js. and I decide to make one of such useful guides which will also be helpful for my brother in a more useful and meaningful way that any other brother in the world can read and follow.
Disclaimer: I will constantly update this guide when needed. This guide is a blend of best practices and standards that I recommend following.
Things to know and do before creating a React.js project?
- NPM - The official Node.js Package Manager.
- NPX - A Node.js command-line tool that enables npm to execute command-line Node.js tools without having them be installed globally.
- create-react-app - An NPM package, which is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. also, the easiest way to integrate React into an existing website.
What are the basic setup needs to include other than react project?
- VS Code - A code editor which is fast, powerful, scalable, and popular.
- GIT - Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.
- A Github Account - A social platform for developers, It offers the distributed version control and source code management functionality of Git, plus its own features.
How to Verify my requirement is satisfied or not?
It looks simple, but I encourage everyone to repeat these steps in every project that you create. which I believe is a good practice. The steps may change with the nature of a project, but the key is "Keep your workflow consistent and up to date".
Now am excluding the installation section from here for a while, because he needs to learn how to solve his own problem without my help. so I say the link for every requirement is mentioned in this guide, go and install it by searching on google or watch some youtube videos and see how to install or set up those things.
Check GIT version
Check VS Code editor version
Create a GitHub account
Checking Nodejs version
Checking NPM Version
Install create-react-app NPM package globally
npm install -g create-react-app
Create the first project using create-react-app
Here am showing two methods that are helpful in long-term
React Project in an empty directory
npx create-react-app mainproject
React Project in a non-empty directory
My plan: Make a sub project and name it as
mainprojectdirectory. also using an alternative command which is worth learning.
Why: Maybe in the future, I can use my second project called "subproject" for experimental purposes. That check some features of react or other technologies without touching my mainproject and run the subproject in a different port so I can view both "mainproject" and "subproject" in to save a lot of time in future.
- My current directory position is X:/studies/react
- Am not setting up multiple ports right now and will set up whenever I need my subproject.
- Can exclude this step. but is good to understand it in the beginning when scaling + learning in mind
- In production, mostly you don't need a react project inside a react project, you can exclude the directory and files inside by using a
.gitignorefile. ( In the
.gitignorefile just add a new line
/subproject, that's it ).
cd mainproject mkdir subproject cd subproject npx create-react-app .
cd mainproject npx create-react-app subproject
Result: subproject created using create-react-app package.
Run the mainproject and see what create-react-app provided as a starting point
In order to run the mainproject in our development environment, create-react-app provides the
start command and run it inside our
mainproject directory using our terminal.
npm run start
inside mainproject directory
Now you can view your result by goto localhost:3000 in your browser