By Vishal Basumatary in javascript — Mar 24, 2023

react new project

How to Create a New React Project

If you are new to React, creating a new project can seem intimidating. However, it is actually quite simple with the help of tools like create-react-app.

Using create-react-app

The easiest way to create a new React project is by using create-react-app. This is a command-line tool that sets up a new React project with all the necessary dependencies and configuration.

First, make sure you have Node.js installed on your computer. You can download it from the official website: https://nodejs.org/
Open your terminal or command prompt and type the following command to install create-react-app globally:

$ npm install -g create-react-app

Once create-react-app is installed, you can use it to create a new project by typing the following command:

$ create-react-app my-app

This will create a new folder called my-app in your current directory, which contains all the files and folders for your new React project.

Customizing Your Project

After creating your new React project, you can customize it to fit your specific needs. Here are some common customizations:

Changing the Page Title

To change the title of your web page, simply edit the title tag in the public/index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My App Title</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Adding CSS

To add CSS to your React project, create a new CSS file in the src folder and import it into your component:


/* src/App.css */
body {
  background-color: #f0f0f0;
}


import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <p>Hello, world!</p>
    </div>
  );
}

export default App;

Using Bootstrap

To use Bootstrap in your React project, you can install the react-bootstrap package:

$ npm install react-bootstrap

Then, import the necessary Bootstrap components into your component:


import React from 'react';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div>
      <p>Hello, world!</p>
      <Button variant="primary">Click Me</Button>
    </div>
  );
}

export default App;

Adding Images

To add images to your React project, create a new images folder in the public folder and put your images in it. Then, use the img tag to display the image:

<img src="/images/my-image.jpg" alt="My Image" />

Using Third-Party Libraries

React has a vast ecosystem of third-party libraries that can help you build your projects faster and more efficiently. To use a third-party library in your React project, simply install it using npm and import it into your component:

$ npm install react-router-dom


import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

export default App;

These are just a few examples of the many ways you can customize your React project. The possibilities are endless, so feel free to experiment and explore!