How to Set up a React project

To Build a react project is a thing and to set it up is another thing.

As a beginner in front-end dev, the first thing i learned is today is how to set up a react project in my visual code.

I just started learning react today and i’m so exited to publish my first story about it.

To set up a react project there is a pre defined command line to do it without needing to write any code wish is extremely painful for me now as a beginner in react.

After installing Node and NPM, open a command line tool and navigate to the specific folder where you want to create your react project.

Then execute the following command:

npx create-react-app <project-name>

Example:

npx create-react-app react-beginner-project

Then navigate to your new folder ex: react-beginner-project.

you will see this file structure:

This is the explination of the most important folders and files:

README.md : The .md extension indicates this file is a markdown file. Markdown is a small and fast markup language with plean text formatting syntax. Many project use it to give instructions and useful info about the project.

node_modules/: All the node packages that have been installed using the command is stored there. many of these packages are already installed with npm via command line, so this folder is untouchable (very recommended).

package.json: This file show you project configuration and a list of node packages dependencies.

package-lock.json: This file stores instructions for npm on how to destroy all node packages versions.

.gitignore: This file is used to list all the files and folders that we wish to not add to git repository.

public/: This is the public folder that holds all development files, such as the index file index.html that is displayed on the localhost:3000 when the app is in development or on a domain that is hosted elsewhere. The default setup handles relating this index.html with all the JavaScript from src/.

when you open the app folder using an IDE or Visual Code you will notice that everything you need is located in the src/ folder. The main focus lies on the src/App.js which is responsible for executing react components. It will be used to implement your application.

To run the app on the local host in http://localhost:3000

use -> npm start

To run the tests

use -> npm test

To build the application for production

use -> npm run build

Happy Coding !!!

How to Set up a React project was originally published in Javarevisited on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More