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

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

مقدمه ای بر React

React توسط فیسبوک توسعه داده شده و به طور گسترده ای در توسعه وب استفاده می شود. مزایای استفاده از React عبارتند از:

• کامپوننت های قابل استفاده مجدد: می توانید کامپوننت ها را یک بار بسازید و در قسمت های مختلف وبسایت استفاده کنید.
• Virtual DOM: React از Virtual DOM استفاده می کند که باعث افزایش سرعت و بهبود عملکرد وبسایت می شود.
• یادگیری آسان: React دارای سینتکس ساده و قابل فهمی است.
• جامعه بزرگ: React دارای جامعه بزرگ و فعالی است که به شما در حل مشکلات کمک می کند.

پیش نیازها

برای شروع کار با React، نیاز به دانش پایه ای در زمینه های زیر دارید:

• HTML
• CSS
• JavaScript (ES6+)

نصب و راه اندازی

برای شروع توسعه با React، باید Node.js و npm (یا yarn) را نصب کنید. سپس می توانید از Create React App برای ایجاد یک پروژه جدید React استفاده کنید.

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

این دستور یک پروژه جدید React با نام "my-app" ایجاد می کند، وارد دایرکتوری آن می شود و سرور توسعه را اجرا می کند. حالا می توانید وبسایت خود را در مرورگر مشاهده کنید.

کامپوننت ها در React

کامپوننت ها بلوک های سازنده React هستند. هر کامپوننت یک قطعه کد مستقل است که UI را ارائه می دهد. کامپوننت ها می توانند توابع یا کلاس ها باشند.

کامپوننت های تابعی

کامپوننت های تابعی ساده ترین نوع کامپوننت ها هستند. آنها یک تابع جاوااسکریپت هستند که JSX را برمی گردانند.

        function Welcome(props) {
            return <h1>Hello, {props.name}</h1>;
        }
    

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

کامپوننت های کلاس پیچیده تر هستند و می توانند state و lifecycle methods داشته باشند.

        class Welcome extends React.Component {
            render() {
                return <h1>Hello, {this.props.name}</h1>;
            }
        }
    

JSX

JSX یک افزونه سینتکس برای JavaScript است که به شما امکان می دهد HTML را در کد JavaScript بنویسید. JSX توسط Babel به کد JavaScript تبدیل می شود.

        const element = <h1>Hello, world!</h1>;
    

State و Props

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

        class Counter extends React.Component {
            constructor(props) {
                super(props);
                this.state = { count: 0 };
            }

            render() {
                return (
                    <div>
                        <p>Count: {this.state.count}</p>
                        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
                    </div>
                );
            }
        }
    

Lifecycle Methods

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

• componentDidMount: بعد از اینکه کامپوننت برای اولین بار در DOM قرار گرفت، فراخوانی می شود.
• componentDidUpdate: بعد از اینکه کامپوننت به روزرسانی شد، فراخوانی می شود.
• componentWillUnmount: قبل از اینکه کامپوننت از DOM حذف شود، فراخوانی می شود.

Hooks

Hooks توابعی هستند که به شما امکان می دهند state و سایر ویژگی های React را در کامپوننت های تابعی استفاده کنید. برخی از مهم ترین Hooks عبارتند از:

• useState: برای مدیریت state در کامپوننت های تابعی استفاده می شود.
• useEffect: برای انجام side effects (مانند درخواست های HTTP) در کامپوننت های تابعی استفاده می شود.
• useContext: برای دسترسی به context در کامپوننت های تابعی استفاده می شود.

        import React, { useState, useEffect } from 'react';

        function Example() {
            const [count, setCount] = useState(0);

            useEffect(() => {
                document.title = `You clicked ${count} times`;
            }, [count]);

            return (
                <div>
                    <p>You clicked {count} times</p>
                    <button onClick={() => setCount(count + 1)}>
                        Click me
                    </button>
                </div>
            );
        }
    

Routing

Routing به شما امکان می دهد تا بین صفحات مختلف در وبسایت خود حرکت کنید. React Router یک کتابخانه محبوب برای مدیریت routing در React است.

مدیریت State

برای مدیریت state در برنامه های بزرگ React، می توانید از کتابخانه هایی مانند Redux یا Context API استفاده کنید.

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

React چیست؟

React یک کتابخانه جاوااسکریپت برای ساخت رابط های کاربری است.

مزایای استفاده از React چیست؟

کامپوننت های قابل استفاده مجدد، Virtual DOM، یادگیری آسان و جامعه بزرگ.

چگونه React را نصب کنیم؟

با استفاده از Create React App: npx create-react-app my-app.

JSX چیست؟

یک افزونه سینتکس برای JavaScript که به شما امکان می دهد HTML را در کد JavaScript بنویسید.