چگونه یک وبسایت با react ایجاد کنیم ؟ یکی از پرکاربرد ترین و مدرن ترین ابزار های طراحی وب کتابخانه react محسوب میشود ، که طرفداران زیادی در این سال ها پیدا کرده است. در این مقاله تلاش میشود ، یک پروژه کوچک و ساده به شما آموزش داده بشود ، تا بتواند نقطه ی شروعی برای پروژه های پیچیده تر و انشالا موفق تر شما کاربران عزیز ایرابرود باشد.

 

شاید به این مطالب هم علاقه مند باشید:

چگونه یک هولوگرام سه بعدی بسازیم ؟ – هولوگرام چیست و چطور کار میکند – کاردستی در خانه

چه رنگ ها و چه لباس هایی قد را بلندتر نشان میدهد – لباس های مردانه برای کوتاه قد ها

10 مورد از ترسناک ترین و عجیب ترین صدا های ضبط شده از اعماق اقیانوس ها

 

اصلا react چیست و چرا مهم است ؟

ReactJS یک کتابخانه فرانت‌اند مبتنی بر کامپوننت و منبع باز است که تنها مسئول لایه نمایش یا UI برنامه است. react توسط فیس بوک نگهداری می شود. React از یک پارادایم اعلامی استفاده می کند که استدلال در مورد برنامه شما را آسان تر می کند و هدف آن این است که هم کارآمد و هم انعطاف پذیر باشد. زمانی که داده های شما تغییر می کند react دقیقاً component مناسب را به طور مؤثر به روز می کند و ارائه می دهد. نمای اعلانی کد شما را قابل پیش بینی تر و رفع اشکال می کند.این کتابخانه به زبان ساده تر ، این اجازه را میدهد که با کمک جاوا اسکریپت ، component ها را که کلاس یا توابعی از جاوااسکریپت میباشند تعریف کنید ، و به عنوان یک markup ی ا موردی شبیه به tag های html از آنها استفاده کنید. این ویژگی اجازه میدهد ، از یک component در چند پروژه مختلف استفاده کنید. یک برنامه React از چندین component تشکیل شده است که هر کدام وظیفه ارائه یک قطعه کوچک و قابل استفاده مجدد از HTML را بر عهده دارند.

آموزش ساخت یک وبسایت ساده با react.js

راه اندازی اولیه: با استفاده از Create-react-app پروژه جدیدی را شروع می کنید، پس ترمینال خود را باز کنید و تایپ کنید:

npx create-react-app my-app

ساختار پروژه: ساختار فایل در پروژه به شکل زیر خواهد بود:

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

مثال: در این مثال، ما یک صفحه وب در React JS طراحی خواهیم کرد، برای این کار باید فایل App.js و Index.css را دستکاری کنیم:

دو گرگی که ماه و خورشید را می بلعند – ماجرای اسکول و هاتی

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

حال باید فایل 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;
}

حال باید از طریق ترمینال ، به پوشه ای که package.json در آن قرار دارد ، برویم و سپس با دستور زیر میتوان پروژه را تست کرد.

npm start

 

همچنین با دستور زیر میتوان پروژه را روی سرور (اگر دستگاه خانگی دارید ، سرور لوکال) قرار داد

npm run build
npx -s serve build

نتیجه این پروژه در زیر قابل مشاهده است.

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

منبع ، آموزش ساخت سایت ساده با react : ایرابرود

10 مورد از ترسناک ترین و عجیب ترین صدا های ضبط شده از اعماق اقیانوس ها


0 Comments

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

خدمات ایرابرود

تعرفه تبلیغات اینترنتی طراحی سایت و اپلیکیشن رپورتاژ ارتباط با ما

RABROD

Copyright © · All Rights Reserved designed & developed by · irabrod.ir