آموزش React برای ساخت سایت های ساده و جذاب: از صفر تا صد

React یک کتابخانه جاوااسکریپت است که برای ساخت رابط کاربری (UI) استفاده می شود. React به شما اجازه می دهد تا اجزای قابل استفاده مجدد بسازید و مدیریت state را به صورت کارآمد انجام دهید. در این آموزش، به شما نشان می دهیم که چگونه با React می توانید سایت های ساده و جذاب بسازید.

چرا React را انتخاب کنیم؟

• Component-Based: React بر پایه اجزا (components) استوار است که به شما اجازه می دهد رابط کاربری را به بخش های کوچک و قابل مدیریت تقسیم کنید.
• Virtual DOM: React از Virtual DOM استفاده می کند که باعث افزایش سرعت و کارایی می شود.
• Reusable Components: اجزای React می توانند در قسمت های مختلف برنامه استفاده شوند، که باعث کاهش کد تکراری می شود.
• Large Community: React دارای جامعه بزرگی از توسعه دهندگان است که منابع و آموزش های فراوانی را ارائه می دهند.
• SEO-Friendly: با استفاده از رندرینگ سمت سرور (SSR) در React، می توانید سئو سایت خود را بهبود بخشید.

پیش نیازها

قبل از شروع آموزش React، باید با مفاهیم زیر آشنا باشید:

• دانش پایه HTML، CSS و JavaScript
• آشنایی با ES6 (ECMAScript 2015)
• درک مفاهیم DOM (Document Object Model)

مراحل شروع کار با React

1. نصب Node.js و npm: React به Node.js و npm (Node Package Manager) نیاز دارد. آنها را از وبسایت رسمی دانلود و نصب کنید.
2. ایجاد یک پروژه React: از Create React App برای ایجاد یک پروژه React جدید استفاده کنید:

               npx create-react-app my-app
               cd my-app
               npm start
           

3. ساختار پروژه: با ساختار دایرکتوری پروژه React آشنا شوید. فایل های اصلی معمولاً در دایرکتوری `src` قرار دارند.
4. کامپوننت ها: شروع به ساخت کامپوننت های React کنید. هر کامپوننت یک بخش از رابط کاربری را تعریف می کند.

مفاهیم کلیدی React

کامپوننت ها (Components)

کامپوننت ها بلوک های سازنده رابط کاربری React هستند. یک کامپوننت می تواند یک دکمه ساده یا یک صفحه پیچیده باشد.

JSX

JSX یک افزونه نحوی برای جاوااسکریپت است که به شما اجازه می دهد کدهای HTML را درون کدهای جاوااسکریپت بنویسید.

State

State یک شی است که داده های یک کامپوننت را نگه می دارد. وقتی state یک کامپوننت تغییر می کند، کامپوننت دوباره رندر می شود.

Props

Props (properties) راهی برای انتقال داده ها از یک کامپوننت والد به یک کامپوننت فرزند هستند.

Lifecycle Methods

Lifecycle methods توابعی هستند که در مراحل مختلف عمر یک کامپوننت React اجرا می شوند.

ایجاد یک پروژه نمونه: لیست کارها

در این بخش، یک پروژه نمونه ایجاد می کنیم: یک لیست کارها ساده.

1. ایجاد کامپوننت های اصلی:
   • `App.js`: کامپوننت اصلی برنامه.
   • `Todo.js`: کامپوننت نمایش یک مورد کار.
   • `TodoForm.js`: کامپوننت فرم برای افزودن کار جدید.
2. پیاده سازی کامپوننت `Todo.js`:

               
   import React from 'react';
   
   function Todo({ todo }) {
       return (
           
   
               {todo.text}
           
       );
   }
   
   export default Todo;
               
           

3. پیاده سازی کامپوننت `TodoForm.js`:

               
   import React, { useState } from 'react';
   
   function TodoForm({ addTodo }) {
       const [value, setValue] = useState('');
   
       const handleSubmit = e => {
           e.preventDefault();
           if (!value) return;
           addTodo(value);
           setValue('');
       };
   
       return (
           
   
                setValue(e.target.value)}
               />
           
       );
   }
   
   export default TodoForm;
               
           

4. پیاده سازی کامپوننت `App.js`:

               
   import React, { useState } from 'react';
   import Todo from './Todo';
   import TodoForm from './TodoForm';
   
   function App() {
       const [todos, setTodos] = useState([
           { text: 'Learn React' },
           { text: 'Build a todo app' },
           { text: 'Deploy the app' }
       ]);
   
       const addTodo = text => {
           const newTodos = [...todos, { text }];
           setTodos(newTodos);
       };
   
       return (
           
   
               
   
                   {todos.map((todo, index) => (
                       
                   ))}
                   
               
           
       );
   }
   
   export default App;
               
           

استفاده از Hooks

Hooks توابعی هستند که به شما اجازه می دهند از state و دیگر ویژگی های React در کامپوننت های تابعی استفاده کنید. `useState` و `useEffect` از پرکاربردترین Hooks هستند.

useState

از `useState` برای اضافه کردن state به یک کامپوننت تابعی استفاده می شود.

useEffect

از `useEffect` برای انجام side effects در یک کامپوننت تابعی استفاده می شود. این شامل فراخوانی API، تنظیم تایمر و غیره است.

استایل دهی به کامپوننت ها

روش های مختلفی برای استایل دهی به کامپوننت های React وجود دارد:

• Inline Styles: استایل دهی مستقیم در تگ ها (مانند مثال های بالا).
• CSS Classes: استفاده از کلاس های CSS.
• CSS Modules: استفاده از CSS Modules برای scope کردن استایل ها.
• Styled Components: استفاده از کتابخانه Styled Components برای نوشتن CSS-in-JS.

سوالات متداول (FAQ)

React چیست و چرا باید از آن استفاده کنیم؟

React یک کتابخانه جاوااسکریپت برای ساخت رابط کاربری است. استفاده از React باعث افزایش سرعت توسعه، قابلیت استفاده مجدد و بهبود کارایی می شود.

چه ابزارهایی برای توسعه React لازم است؟

برای توسعه React، به Node.js، npm و یک ویرایشگر کد نیاز دارید.

چگونه می توانم یک پروژه React جدید ایجاد کنم؟

از Create React App استفاده کنید: `npx create-react-app my-app`

تفاوت state و props چیست؟

State داده های یک کامپوننت را نگه می دارد و props راهی برای انتقال داده ها از یک کامپوننت والد به یک کامپوننت فرزند هستند.

با این آموزش، شما می توانید با React شروع به ساخت سایت های ساده و جذاب کنید. اگر به دنبال توسعه وب سایت حرفه ای هستید، می توانید با تیم متخصص ما تماس بگیرید. ما با ارائه خدمات طراحی و توسعه وب سایت با React، به شما کمک می کنیم تا وب سایتی مدرن و کارآمد داشته باشید.

برای مشاوره رایگان و سفارش پروژه، با ما تماس بگیرید: 09190994063 - 09376846692