How To Create and Set Up a React Project with Create React App in Windows?

Here’s my first Medium Post😀Hope it will be useful!!!

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. Many day-to-day applications like Facebook, Whatsapp Web, Netflix and many are created with react. It’s used to build a single page application which avoids reload of the whole page, and it renders the particular part where changes are required. Now let’s look into the software requirements of react.

Pre-Requirements

1. VS code editor for editing the code. There are other more code editors like sublime, notepad++ and etc., Visual Studio(VS) code editor is very user friendly and comes with built it terminal too. Follow the link to download Visual Studio Code.
2. Node.js which is an open-source JavaScript runtime environment that runs on the V8 engine. Preferably download the Latest stable version of Node.js. Follow the link to download Node.js.

Installing Node.js will include npm with it. Npm is node package manager for Node JavaScript platform. It’s used for installing the dependencies and managing it. Npm also includes a tool called npx, which will run executable packages.

Once the requirements are done, let’s start creating a React Project in the system.

1.Creating a new Project with create-react-app

By using the create-react-app we can create a new react project. Npx is a npm package runner (x probably stands for eXecute). The typical use is to download and run a package temporarily or for trials. create-react-app is an npm package that is expected to be run only once in a project’s lifecycle. Hence, it is preferred to use npx to install and run it in a single step. Npx is a CLI tool that makes it simple to install and manage dependencies from the npm registry. It is a package executer, and it is used to execute javascript packages directly, without installing them.

Execute the following command in the command prompt and relax for few minutes.

npx create-react-app my-app

Syntax for creating the app: npx create-react-app app-name

Limitations: Your app name must not contain capital letters in it.

If you are running into an issue with create-react-app that you are behind the latest release, it’s recommended to uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-appto ensure that npx always uses the latest version or clear the cache using npx clear-npx-cache

Once your app is successfully created you can see this happy hacking message in your terminal window.

Now navigate into your project folder in command prompt by using the following command.

cd my-app

And then open the project folder in visual studio code. This will be the project structure.

Project Structure

1. node_modules collection of dependencies/third party packages that are installed in the app using the npm install command.
2. Public folder contains static files such as index. html, javascript library files, images, and other assets, etc.
3. src folder is the sole core of application. It contains the javascript, css files that are needed to be processed by webpack.
4. package.json, it is a meta data about the application which has the list of dependencies and it’s versions that are used in the current project.
5. package-lock.json, it has the exact version number including the patch and minor versions. This file keeps track of the the exact version of each installed package which means that future installs will be able to build an identical dependency tree.

Other way for creating the app would be using the create-react-app using npm. By installing the package globally and running it.

npm i create-react-app -g
create-react-app my-app

2.Running the React Project

Once you successfully created the application and navigated inside the project folder, you are ready to run your application. By using the following command in your terminal you can see the result in your browser in port 3000.

npm start

It automatically opens your browser in few seconds in http:localhost:3000.If it does not opens automatically, hit that port on your browser.

If you want your application to run in a specified port number you can modify the start script in your package.json file as “set PORT=<portnumber> && react-scripts start”.

That’s it done with creating a react project using create-react-app!

Summary

Node.js is the prerequisite for creating the react app and VS code is for writing your code. npx create-react-app my-app for creating the app and npm start for starting the development server and running your app.

Feel free to comment your opinion