How to create a website in React JS ?

React JS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook. React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple views for each state in your application, and React will efficiently update and render just the right component when your data changes. The declarative view makes your code more predictable and easier to debug. A React application is made of multiple components, each responsible for rendering a small, reusable piece of HTML.

Prerequisites:

• NPM & Node.js
• React JS
• React JSX

Approach:

To create a website in React JS, we will first initialize a React Project using the CRA command. We will define the React Components in JSX which is a syntax extension of JavaScript. Return the Page in the App components using the return keyword with the JSX code. Define the styles for components in CSS file and import in the project.

Steps to create the React application:

Step 1: Create React Project 

npm create-react-app myreactapp

Step 2: Change your directory and enter your main folder charting as

cd myreactapp

Project Structure:

Example: This example demonstrate a Simple webpage design in React JS.

Javascript

// Filename - App.js

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

function App() {
    return (
        <div>
            <nav class="navbar background">
                <ul class="nav-list">
                    <div class="logo">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
                        />
                    </div>
                    <li>
                        <a href="#courses">Courses</a>
                    </li>
                    <li>
                        <a href="#tutorials">Tutorials</a>
                    </li>
                    <li>
                        <a href="#jobs">Jobs</a>
                    </li>
                    <li>
                        <a href="#student">Student</a>
                    </li>
                </ul>

                <div class="rightNav">
                    <input
                        type="text"
                        name="search"
                        id="search"
                    />
                    <button class="btn btn-sm">
                        Search
                    </button>
                </div>
            </nav>

            <section class="section">
                <div class="box-main">
                    <div class="firstHalf">
                        <h1 class="text-big">
                            7 Best Tips To Speed Up Your Job
                            Search in 2022
                        </h1>
                        <p class="text-small">
                            Hunting down a relevant job
                            requires proper techniques for
                            showcasing your potential to the
                            employer. But with the advent of
                            COVID-19, it has become a bit
                            challenging and competitive to
                            reach out for your dream job.
                            Many individuals have lost their
                            jobs during these times, and on
                            the other hand, freshers are
                            facing difficulties while
                            applying for a new job. But
                            there is no need for panic, you
                            can change your ways and
                            streamline things in a way that
                            you get a proper result.
                        </p>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="box-main">
                    <div class="secondHalf">
                        <h1 class="text-big" id="program">
                            JavaScript Tutorial
                        </h1>
                        <p class="text-small">
                            JavaScript is the world most
                            popular lightweight, interpreted
                            compiled programming language.
                            It is also known as scripting
                            language for web pages. It is
                            well-known for the development
                            of web page many non-browser
                            environments also use it.
                            JavaScript can be used for
                            Client-side developments as well
                            as Server-side developments.
                        </p>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="box-main">
                    <div class="secondHalf">
                        <h1 class="text-big" id="program">
                            Java Programming Language
                        </h1>
                        <p class="text-small">
                            When compared with C++, Java
                            codes are generally more
                            maintainable because Java does
                            not allow many things which may
                            lead to bad/inefficient
                            programming if used incorrectly.
                            For example, non-primitives are
                            always references in Java. So we
                            cannot pass large objects (like
                            we can do in C++) to functions,
                            we always pass references in
                            Java. One more example, since
                            there are no pointers, bad
                            memory access is also not
                            possible. When compared with
                            Python, Java kind of fits
                            between C++ and Python. The
                            programs are written in Java
                            typically run faster than
                            corresponding Python programs
                            and slower than C++. Like C++,
                            Java does static type checking,
                            but Python does not.
                        </p>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="box-main">
                    <div class="secondHalf">
                        <h1 class="text-big" id="program">
                            What is Machine Learning?
                        </h1>
                        <p class="text-small">
                            Machine Learning is the field of
                            study that gives computers the
                            capability to learn without
                            being explicitly programmed. ML
                            is one of the most exciting
                            technologies that one would have
                            ever come across. As it is
                            evident from the name, it gives
                            the computer that makes it more
                            similar to humans: The ability
                            to learn. Machine learning is
                            actively being used today,
                            perhaps in many more places than
                            one would expect.
                        </p>
                    </div>
                </div>
            </section>
            <footer className="footer">
                <p className="text-footer">
                    Copyright ©-All rights are reserved
                </p>
            </footer>
        </div>
    );
}

export default App;

CSS

/*Filename - App.css*/

* {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    cursor: pointer;
}

.background {
    background: rgb(255, 255, 255);
    background-blend-mode: darken;
    background-size: cover;
}

.footer {
    background-color: #000;
}

.nav-list {
    width: 70%;
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    width: 180px;
    border-radius: 50px;
}

.nav-list li {
    list-style: none;
    padding: 26px 30px;
}

.nav-list li a {
    text-decoration: none;
    color: #000;
}

.nav-list li a:hover {
    color: grey;
}

.rightnav {
    width: 30%;
    text-align: right;
}

#search {
    padding: 5px;
    font-size: 17px;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 9px;
}

.box-main {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    max-width: 80%;
    margin: auto;
    height: 80%;
}

.firsthalf {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.secondhalf {
    width: 30%;
}

.secondhalf img {
    width: 70%;
    border: 4px solid white;
    border-radius: 150px;
    display: block;
    margin: auto;
}

.text-big {
    font-weight: 500;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana,
        sans-serif;
    font-size: 30px;
}

.text-small {
    font-size: 18px;
}

.btn {
    margin-left: 20px;
    height: 33px;
    width: 70px;
    color: #fff;
    background-color: #000;
    cursor: pointer;
}

.btn-sm {
    padding: 6px 10px;
    vertical-align: middle;
}

.section {
    height: 200px;
    display: flex;
    align-items: center;
    background-color: rgb(250, 250, 250);
    justify-content: space-between;
}

.section-Left {
    flex-direction: row-reverse;
}

.center {
    text-align: center;
}

.text-footer {
    text-align: center;
    padding: 30px 0;
    font-family: "Ubuntu", sans-serif;
    display: flex;
    justify-content: center;
    color: #fff;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.