×

Building Your First React App: A Step-by-Step Tutorial

React JS is the most popular JavaScript library for building dynamic user interfaces. It has become an essential tool in the web developer community. React JS is widely used by top companies like Apple, Facebook, Netflix, Instagram over 225,000 live websites. This article will guide you through Step-by-step building of React app from scratch.

Prerequisites

Before we dive in, ensure you have the installed the following in your computer:

  • Install Node.js and npm on your machine. Download them from nodejs.org.
  • Install Visual Studio Code from code.visualstudio.com.

Step 1: Setting Up Your Development Environment

  • To set up a new React project, use the Create React App package.
  • Avail the Create React App package using npx.
  • Open your terminal and run the following command:
npx create-react-app my-first-react-app</pre>

This command will create a new directory called my-first-react-app with all the packages.

Start the Development Server and open your new React app in the default browser using:

npm start

Step 2: knowing the Project Structure

The project directory should look like this:

my-first-react-app/ ├── node_modules/ ├── public/ │ ├── index.html │ └── &#8230; ├── src/ │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── &#8230; ├── .gitignore ├── package.json ├── README.md └── ..

public/: Contains the static files, including index.html where your React app is rendered.

src/: Contains the React components and styles. index.js: Entry point of the React application. App.js: Main component of your React app.

Step 3: Creating the First Component

React components are the building blocks of a React application. Let’s create a simple functional component that renders a simple header. Open src/App.js in your text editor and place the below code:

import React from &#8216;react&#8217;; function App() { return ( <div className="App"> <header className="App-header"> <h1>Welcome to My First React App</h1> </header> </div> ); } export default App;

Step 4: Creating Additional Components

Create a new file in the src directory called Greeting.js:

import React from &#8216;react&#8217;; function Greeting() { return ( <div> <h2>Hello, React Developer!</h2> </div> ); } export default Greeting;

Use the New Greeting Component in App.js

import React from &#8216;react&#8217;; import Greeting from &#8216;./Greeting&#8217;; function App() { return ( <div className="App"> <header className="App-header"> <h1>Welcome to My First React App</h1> <Greeting /> </header> </div> ); } export default App;

Step 5: Adding Interactivity with State

Using State in a Component
Add a button that increments a counter each time it’s clicked.
Modify Greeting.js to use the useState hook:

import React, { useState } from &#8216;react&#8217;; function Greeting() { const [count, setCount] = useState(0); return ( <div> <h2>Hello, React Developer!</h2> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } export default Greeting;

The useState hook initializes a state variable count and a function setCount to update it. The button increments the count each time it’s clicked.

Step 6: Building and Deploying Your App

1.Build the App for Production

npm run build

This command creates an optimized build of your app in the build directory.

2.Deploying the App into GitHub Pages.

Install the gh-pages package:

npm install gh-pages &#8211;save-dev

Add the following scripts to your package.json:

“homepage”:”http://{username}.github.io/{repo-name}”, “scripts”: { “predeploy”: “npm run build”, “deploy”: “gh-pages -d build” }

Initialize a Git repository, commit your code, and push it to GitHub:

git init git remote add origin https://github.com/{username}/{repo-name}.git git add . git commit -m &#8220;Initial commit&#8221; git push -u origin master

Deploy your app:

npm run deploy

Your app should now be live at

http://{username}.github.io/{repo-name}.

Conclusion

Finally, Our first React app was built and deployed successfully. This tutorial covered the basics of creating a React app including components, state, and deployment. To expertise in React JS, Join Credo Systemz React JS Training in Chennai. Gain the skills of React js, coding knowledge and practical experience. Expand your app’s functionality by adding advanced features. Happy coding!

Related Tags