چگونه یک وب سایت با React.js ایجاد کنیم؟ آموزش یک پروژه کوچک و ساده react

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://irabrod.ir/wp-content/uploads/2021/05/cropped-Untitled-1.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

* {

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;

}