Build a website with ReactJS.

ReactJS has been super popular lately due to its performance and component-based architecture. From a developer to companies, all have been using ReactJS for developing super-fast web pages and web apps.

In this article, we will see how you can create a website with ReactJS. We will make sure to tell the best practices that are being used by ReactJS development companies. So, let us get started.

How to build a website with ReactJS?

Getting started.

First of all, to get started with making the website, you must have nodejs installed on your machine.

You can download and install it from here for your operating system. This will install node package manager that will be used to set up our reactjs project.

After the installation, type the following command to confirm the installation.

node --version.

React community provides us the boilerplate for the project that can be easily set up with a single command. We can install it with the following command.

npx create-react-app my-website

This will install all the boilerplate for our project in the defined directory. The project structure is as follows.

Index.js: It is the main entry point for our project.

App.js: This is the root of our web project.

To keep things simple, we will delete some files and our project now looks as follows.

To see how the bare-bones look like in our browser, write the following command in the terminal.

npm start

The browser will open and you will see the following output.

Build a website

Before starting to code, we must know the concept of components. In React, everything works in terms of components. Instead of having different HTML webpages, we have javascript components.

There are two types of components; functional and class-based. In this tutorial, we will be using functional components as they are the new standard and every react development company recommends doing so.

Furthermore, we have state in the components that help us keep things dynamic.

Now let us move to App.js and delete everything that is in the render function. A sample website consists of different web pages and a router that enables navigation between them.

For handling navigation in React, we use an external package. Let us install it in the same project with the following command.

npm install react-router-dom

Now, we will create three components that will be our three web pages. The code for them is given as follows.

Users.js

Home.js

import React from "react";
 
export default function Home() {
 return (
   <div>
     <p>Hi this is home!</p>
   </div>
 );
}

About.js

import React from "react";
 
export default function About() {
 return (
   <div>
     <p>Hi this is about</p>
   </div>
 );
}

The next step is to render these inside our App.js with the appropriate routing. Add the following code in App.js

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Home";
import Users from "./Users";
import About from "./About";
import "./App.css";
function App() {
 return (
   <Router>
     <div>
       <nav>
         <ul>
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
             <Link to="/about">About</Link>
           </li>
           <li>
             <Link to="/users">Users</Link>
           </li>
         </ul>
       </nav>
 
 
       <Switch>
         <Route path="/about">
           <About />
         </Route>
         <Route path="/users">
           <Users />
         </Route>
         <Route path="/">
           <Home />
         </Route>
       </Switch>
     </div>
   </Router>
 );
}
 
export default App;

In this file, we have imported the BrowserRouter, Switch, Link, Route from the react-router-dom.

BrowserRouter: The main component that wraps around the application to enable the routing.

Link: Renders <a> tag on the frontend which changes the URL.

Switch: Checks if the child components are matching the URL pattern for a specific route.

Route: Navigates to a specific component on a successful match.
Our App.css is given below.

ul {
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
}
li {
 list-style-type: none;
 margin-right: 50px;
}

Let us run the project again and see the output.

With this, we have our simple website ready in Reactjs. You are free to add as much content and customization you want!

Deployment

We were working with the development build and to create the production one, just write the following command in the terminal.

Npm run build

After success, you will see a new build folder in the project.

With this, you can deploy your website to the server of your choice!

Conclusion

Reactjs is a great library for creating blazing fast websites and any Reactjs development company will recommend you using it.

With the amazing community, demand in the market and easy learning curve, Reactjs can be a great addition to your skillset. If you have started exploring frontend frameworks and libraries, Reactjs is the best choice!

What’s the biggest thing you’re struggling with right now that we as a technology consulting company can help you with? Feel free to reach out to us at info@jalantechnologies.com. We hope our assistance will help!