Building Your First React App And Deploying It
React is an open-source JavaScript library that is widely used to build user interfaces. It is maintained by Facebook and a community of individual developers and companies. React is known for its efficiency and flexibility and has gained immense popularity among developers. This guide will help you build your first React app step by step.
Before starting, you should have basic HTML, CSS, and JavaScript knowledge. You will also need a text editor (such as Visual Studio Code), and Node.js installed on your machine.
JS is standard JavaScript, and JSX is an HTML-like syntax that you can use with React to make it easier and more intuitive to create React components. JSX makes it easier to write and add HTML in React.
Step 1: Creating a React App
We will use the create-react-app command to create a new React app. Open your terminal and type the following command:
npx create-react-app my-appThis will create a new React app named my-app in the current directory.
Step 2: Setting up Git and GitHub
Next, we will set up Git and GitHub to manage our project’s version control. Go to GitHub and create a new repository with the same name as your app. Copy the repository URL.
Now, go to your project directory in the terminal and initialize Git:
cd my-app
git initAdd all the files to the Git repository and make the first commit:
git add .
git commit -m "first commit"Set the main branch as the default branch:
git branch -M mainFinally, add the remote repository URL and push your changes:
git remote add origin [repository-URL]
git push -u origin mainStep 3: Starting the App
To start the React app, run the following command:
npm startThis will start the development server and open your app will be accessible at http://localhost:3000 in your web browser. You can now see the React logo on the screen.
Step 4: Hello World
Open the App.js file in your code editor, and replace the default code with the following:
//app.js
import React from 'react';
function App() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
export default App;In the code above, we first import the React library, which is required to create React components. Then, we define an App function component that returns a div element containing an h1 element with the message "Hello, World!".
Save the file, If everything is working correctly, you should see the “Hello, World!” message displayed on the web page.
Step 4: Creating Components
Components are the building blocks of a React app. They are independent and reusable pieces of code that render UI elements. In React, components can be of two types: class components and functional components.
Create a new folder called components in the src directory. Inside this folder, create a new file called Recipe.js with the following code:
//Recipe.js
import React from "react";
function Recipe() {
return <h1>How to make Pasta</h1>;
}
export default Recipe;Edit your app.js file with the following changes:
//app.js
import React from "react";
import Recipe from "./components/Recipe";
function App() {
return (
<div>
<h1>Hello, World!</h1>
<Recipe />
</div>
);
}
export default App;This code imports the Recipe component and renders it inside the App component.
Step 5: Using React Hooks
React Hooks are functions that allow us to use state and other React features in functional components. The useState hook is used to manage state in functional components.
Create a new file Counter.js with the following code to create a counter that increments when a button is clicked:
//Counter.js
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={handleClick}>Increment</button>
</div>
);
}
export default Counter;This code creates a state variable called count and a function called setCount to update it. When the button is clicked, the handleClick function is called, which updates the count state.
Edit your app.js file with the following changes:
//app.js
import React from "react";
import Recipe from "./components/Recipe";
import Recipe from "./components/Counter";
function App() {
return (
<div>
<h1>Hello, World!</h1>
<Recipe />
<Counter />
</div>
);
}
export default App;Step 6: Using React Props
In React, props is a way to pass data from parent to child components. The parent component can pass any data, such as strings, numbers, arrays, or objects, as props to the child component, which can then use that data in its rendering.
For example, we have a parent component called Parent that renders a child component called Child. We want to pass a string value as a prop from the parent to the child. Here's how we can do it:
Create two files Parent.js and Child.js.
//Parent.js
import React from 'react';
import Child from './Child';
function Parent() {
return (
<div>
<Child name="Alice" />
</div>
);
}
export default Parent;In the code above, we are passing a prop called name with the value "Alice" to the Child component.
Now, in the Child component, we can access the value of name through the props object. Here's how we can use it to render a message that includes the name:
//Child.js
import React from 'react';
function Child(props) {
return <div>Hello, {props.name}!</div>;
}
export default Child;In the code above, we are using props.name to access the value of the name prop passed from the parent component. We are using this value to render a message that says "Hello, Alice!".
Import the Parent component in app.js file and add the <Parent/> tag in div.
Step 7: Adding Routing
Routing is an essential feature of any web application, and React provides an easy way to implement routing using the react-router-dom package. In this section, we will learn how to use react-router-dom to create a basic routing system. There are two major types of routers - BrowserRouter and HashRouter.
BrowserRouter is a router that uses the HTML5 history API to keep track of the current URL and to update the browser URL when navigating between pages.
HashRouter uses the hash portion of the URL to keep the UI in sync with the URL. This means the URL changes when the user navigates to a new page, but the page does not reload. Instead, the HashRouter updates the URL hash and renders the appropriate component based on the hash value. GitHub Pages does not support browser history. Therefore, we will use HashRouter to deploy our app to GitHub Pages.
First, we need to install the react-router-dom package using npm:
npm install react-router-domOnce the package is installed, we can import it in our index.js file and wrap our content with the <Router> component:
//index.js
import { HashRouter as Router} from "react-router-dom";
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);Now, we can define our routes using the <Routes> component. The <Routes> component renders a component when the URL matches its path. Add the following code to app.js file.
//app.js
import React from "react";
import Recipe from "./components/Recipe";
import Recipe from "./components/Counter";
import About from "./components/Parent";
import Recipe from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import {Routes, Route} from 'react-router-dom';
function App() {
return (
<div>
<h1>Hello, World!</h1>
<Recipe />
<Counter />
<Parent />
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</div>
);
}
export default App;In the code above, we have defined three routes: the home page ("/"), the about page ("/about"). We can have a catch-all route (path=”*”), which will be displayed for undefined URLs.
We can create a shared component like Navbar.js that inserts common content on all pages, such as a navigation menu.
//Navbar.js
import {Link} from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}
export default Navbar;Here, we have used the <Link> component to set the URL and keep track of browsing history. Anytime we link to an internal path, we will use <Link> instead of <a href="">.
Finally, we need to define our page components for each route in files Home.js and About.js as follows:
//Home.js
function Home() {
return <h2>Home</h2>;
}
export default Home;//About.js
function About() {
return <h2>About</h2>;
}
export default About;Now save the file. We can switch between pages by clicking on the links in the Navbar component and see the URL change accordingly.
Step 8: Deploying to GitHub Pages
After we have built our application, we need to deploy it so that other people can use it. One popular option for hosting React applications is GitHub Pages. In this section, we will learn how to deploy our React application to GitHub Pages.
First, we need to install the gh-pages package as a development dependency using npm:
npm install gh-pages --save-devNext, we need to add a homepage field and edit the scripts block in package.json file, which should contain the URL of our GitHub Pages site:
//package.json
{
"name": "[repo_name]",
"version": "0.1.0",
"homepage": "https://[your-github-username].github.io/[repo-name]"
}
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}Run the following commands to commit your changes and push them to GitHub with the below code:
git add .
git commit -m "Setup GitHub Pages"
git push origin mainFinally, run the following command to deploy your app:
npm run deployThis command will create a new branch in your repository called gh-pages and deploy your app to that branch. Once the deployment is complete, you can access your app at the URL you specified in the homepage field.
It’s important to note that your app may take a few minutes to be deployed and become available at the URL you specified.
In conclusion, understanding the basics of React is essential for building robust and scalable web applications. Components, JSX, and state management through hooks are the fundamental building blocks of React development. Additionally, routing with React Router allows developers to create dynamic and engaging user experiences.
Finally, with the help of GitHub Pages, deploying React applications has become a breeze. By following the steps outlined in this technical guide, you should now understand how to create a simple React application, implement routing, and deploy it to a live website. With this foundation, you can begin to explore and experiment with more complex React features to build powerful web applications.
Demo Video is available!
As a Beta MLSA, I have conducted various tech workshops. One such workshop was on “Getting Started with React” where I followed the same procedure as above to teach the basics. You can refer to the video recording of the workshop here and follow along more easily!