Open In App

How to create a website in React JS ?

Last Updated : 09 Jan, 2025
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Share
Report
News Follow

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:

Creating a complete website using React can be an exciting challenge.

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:

Screenshot-from-2023-11-10-14-57-33

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

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;
}
JavaScript

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.



Next Article

Similar Reads

three90RightbarBannerImg