This README provides two options for setting up and creating a React application:
-
Using Vite (Recommended): This method leverages Vite, a fast build tool, to create a React project quickly.
-
Manual Installation with
react-scripts: This method involves creating a React project manually usingreact-scripts, which is the default tool for bootstrapping React applications.
Before you begin, make sure you have the following prerequisites installed on your system:
-
Node.js: Vite requires Node.js version 12 or higher. You can download and install Node.js from nodejs.org.
-
npm or Yarn: npm (Node Package Manager) is included with Node.js, while Yarn is an alternative package manager. You can choose either one.
Now that Vite is installed globally, you can create a new React application using Vite. Open your terminal (Command Prompt in Windows or Bash in Linux) and run the following command:
Windows (Command Prompt):
npm create vite@latestLinux (Bash):
npm create vite@latestThis command initializes a new Vite project named and asks a series of question to setup the project.
Navigate to the newly created project directory using the following command:
cd <your-app-name/>In your project directory, install the project dependencies by running:
npm installYou can start the development server by running the following command:
npm run dev
This will start the Vite development server. The server will automatically reload the application when you make changes to your code.
When you are ready to build your React application for production, run the following command:
npm run buildThis command will generate an optimized production build of your application in the dist directory.
Open your terminal (Command Prompt in Windows or Bash in Linux) and create a new directory for your React project. You can name it whatever you like:
mkdir my-react-app
cd my-react-appInside your project directory, initialize a new Node.js project by running:
Windows (Command Prompt):
npm init -yLinux (Bash):
npm init -yThis command creates a package.json file with default settings.
Next, install React and react-scripts as project dependencies by running the following command:
Windows (Command Prompt):
npm install react react-dom react-scriptsLinux (Bash):
npm install react react-dom react-scriptsNow that you have React and react-scripts installed, create a basic React application. You can create a new JavaScript file, e.g., src/index.js, inside your project directory and add the following code:
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
createRoot(document.getElementById('root')).render(<App />)Create a React component in a separate file, e.g., src/App.js, with the following code:
import React from 'react'
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
)
}
export default AppCreate an HTML file, e.g., public/index.html, and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>This HTML file sets up a root <div> where your React app will be rendered.
In your package.json file, add the following scripts to the "scripts" section:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}These scripts allow you to start, build, test, and eject your React application using react-scripts.
You can start the development server provided by react-scripts by running the following command:
Windows (Command Prompt):
npm startLinux (Bash):
npm startThis will start the development server, and your React application will be available at http://localhost:3000. The server will automatically reload the application when you make changes to your code.
Here's the file structure for a manually created React project using react-scripts:
my-react-app/
├── node_modules/
├── public/
│ ├── index.html
│ ├── favicon.ico
├── src/
│ ├── App.js
│ ├── index.js
├── package.json
├── package-lock.json (or yarn.lock if you use Yarn)
└── README.md
-
node_modules/: This directory contains the installed npm packages and their dependencies. -
public/: This directory contains public assets like HTML files and images.-
index.html: The HTML file where your React application is mounted. It includes a<div id="root"></div>element for rendering your app. -
favicon.ico: The favicon for your application (the small icon that appears in the browser tab).
-
-
src/: This directory contains your application's source code.-
App.js: The main React component of your application. -
index.js: The entry point of your application where the React app is rendered.
-
-
package.json: The configuration file for your Node.js project. It includes dependencies, scripts, and other project metadata. -
package-lock.json(oryarn.lock): These files lock the versions of your project's dependencies to ensure consistency across different environments. -
README.md: This README file contains project documentation and setup instructions.
React components and additional files can be added to the src/ directory as our project grows.
Happy coding!