React create-react-app
How to create a new React project with Create React App in 3 Steps
Step 1. How to Install Create React App
To use building a new React App, first, you need to open our terminal or command line on our computer.
To create a new React project, we can use the tool npx(Node Package Execute), provided you have an npm(Node Package Manager) version of at least 5.2.
Note: You can check what npm(Node Package Manager) version you have by running in your terminal npm -v
npx(Node Package Execute) gives us the ability to we can use the create-react-app package without(NPM-Node Package Manager) having to first install it on our computer, which is easy and very convenient.
Using npx(Node Package Execute) also ensures that we are using the latest new version of Create React Application to create our React project:
npx create-react-app my-react-app
Once we run this command, a folder name was “my-react-app” will be created where we specified on our computer and all of the packages(npm) it requires will be automatically installed.
Note: Creating a new React project with create-react-app will usually take 2 or 3 minutes time, and sometimes more than 3 minutes.
Create React Application also gives us some templates to use for specific types of React projects.
For example, if you wanted to create a React project that we can use the tool TypeScript, and we could use a template for that instead of having to install TypeScript manually.
To create a React application that will be using TypeScript, we can use the Create React App TypeScript template:
npx create-react-app my-react-app –template typescript
Step 2. Reviewing the Project Structure
Once your React application files have been created and our dependencies have been installed. our React project structure should look like this:
my-react-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public └── src
What is each of these files and folders for?
- README.md is a markdown file that provides a lot of useful suggestions and links that we can use for us while learning to use Create React application.
- node_modules(npm-(Node Package Manager) ) is a folder that includes all of the dependency-related code that Create React application was installed. You can never need to go into this folder.
- package.json that manages your React project dependencies and what is included in our node_modules(npm) folder for our project, plus the scripts we need to run our app.
- .gitignore is a file that is helpful to exclude files and folders from being tracked by Git. You don’t want to insert large folders such as the node_modules(npm) folder.
- The public is a folder that you can use to store our static assets, such as images, svgs, videos, and fonts for our React app.
- src is a folder that contains our overall source code. It is where all of your React-related code will live and is what you will primarily work in to create your app.
Step 3. How to Run your React Project
Once you have to open your react application(project) into your code editor, you can open up your terminal (in VSCode, go to View > Terminal).
npm start
