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:
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:
Example: This example demonstrate a Simple webpage design in React JS.
/*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;
}
// 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;
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.