Create a New React App - npx create-react-app
Last Updated :
09 Dec, 2024
To create a new React app, you can easily use the npx create-react-app command. This command is a fast and simplest way to set up a React project with a pre-configured build setup, so you don’t have to worry about configuring Webpack, Babel, or other development tools.
- Zero Configuration: Automatically sets up a React environment.
- Fast Setup: Instantly create a new React project.
- Pre-configured Development Environment: Includes Webpack, Babel, and more.
- Automatic Dependency Installation: Installs React, ReactDOM, and necessary packages.
Steps to Create a React App Using npx create-react-app
Step 1: Install Node.js and NPM
The first step is to install Node.js in your system to create a React application.
Step 2: Initialize the React App Using create-react-app
If you have installed an npm version greater than or equal to 5.6, you can use the following npx command to create a new React app:
npx create-react-app app_name
If you are using npm version 5.1 or less, you cannot use the npx command, you need to install the create-react-app globally by using the command
npm install -g create-react-app
create-react-app app_name
Step 3: Switch to the project directory
Once the project is created switch to the project directory using the following command:
cd app_name
Step 4: Start the development server
To run the app, use the following command. This command will locally run your app.
npm start
React Project Structure
The project structure of your React application will look something like this
- src: This folder contain all the necessary source code of the project.
- public: This folder stores the HTML files and the assests.
- node_modules: Dependencies of the project.
- package.json: Used dependencies and scripts information.
- README.md: Any additional information for documentation.
npx create-react-app my_appDependencies in the package.json file
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Now Let's modify our react application by making some changes in App.js file
JavaScript
// Filename - App.js
import React from 'react';
function App() {
const headingStyle = {
color: 'green',
textAlign: 'center'
};
return <h1 style={headingStyle}>Welcome To GeeksforGeeks!</h1>;
}
export default App;
Output
Create a New React App - npx create-react-app
Similar Reads
Migrating from Create React App to NextJS: A Practical Guide Migrating from Create React App (CRA) to Next.js involves transitioning from a client-side rendered React application to a framework that offers server-side rendering, static site generation, and built-in routing capabilities. This guide provides a step-by-step approach to help you effectively migra
4 min read
How to Create a New Next JS 13+ App? Creating a new Next.js 13+ application is a straightforward process that sets up a modern React-based framework with built-in features like server-side rendering, static site generation, and API routes. Next JS streamlines and automates the setup of essential React tooling, handling tasks such as bu
2 min read
How to specify a port to run a create-react-app based project ? Usually the react app server runs on the port 3000. But there may be some situations, where user needs to specify a port to run the react app. So, users need to change the default port of the application and sepcify a custom port to run the application. PrerequisitesReact JSNode.js & NPMTable of
3 min read
Create a Portfolio App using React-Native In this article, we are going to Create a portfolio app using React Native. The portfolio app is a simple application that is a collection of a person's qualifications, achievements, work samples, and other relevant materials. It is used to demonstrate one's abilities and suitability for a particula
5 min read
How to create a form in React? React uses forms to allow users to interact with the web page. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute and that even
5 min read