استفاده از ری اکت بدون Node.js

ری اکت چیست؟

ری اکت یک کتابخانه برای جاوا اسکریپت است که برای ساخت رابط کاربری به کار میرود. که توسط فیسبوک ساخته شده و پشتیبانی می شود.

برای دسترسی به documentation ری اکت می‌توانید از لینک زیر استفاده کنید.

https://reactjs.org/tutorial/tutorial.html#overview

برای راه اندازی یک پروژه با ری اکت چند راه وجود دارد که ما در این آموزش روش راه اندازی ری اکت بدون Node.js را برسی می‌کنیم و اشاره ای کوتاه به 2 روش دیگر هم داریم.

روش اول: استفاده از create-react-app

تقریبا ساده ترین راه برای راه اندازی یک پروژه با ری اکت استفاده از پکیج create-react-app می باشد که توسط خود فیسبوک ساخته شده است.

https://github.com/facebook/create-react-app

در این روش احتیاج به هیچ گونه پیکربندی( configuration ) نداریم و فقط با اجرای دستور زیر در npm می‌توانیم پروژه ی خود را با ری اکت شروع کنیم.

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

لازم به ذکر است که در این روش تقریبا تمام پکیج های مورد نیاز (live-server, babel, webpack و ...) نصب می شود.

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

دوستانی که علامند به این روش هستند می‌توانند با استفاده از آموزش های زیر پروژه خودشون رو با ری اکت شروع کنند.

آموزش فارسی: آموزش بسیار کامل و دقیقی که توسط عامر لطفی اوریمی در ویرگول تهیه شده است.

آموزش انگلیسی: برای دوستان علاقه مند ولی با وجود آموزش کامل فارسی فکر نکنم احتیاجی داشته باشین.


روش سوم: استفاده از ری اکت بدون Node.js

خوب اگه یه توسعه دهنده وب هستین که با CSS، HTML و JavaScript آشنایی دارین می‌تونین با این روش بدون احتیاج به Node.js و ابزار پیچیده یه پروژه رو با ری اکت راه اندازی کنید.

1- افزودن پکیج های react-dom, react و babel به فایل HTML

<script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js">
  <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js">
  <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js">

کدهای بالا را می‌توانید به انتهای تگ <head> اضافه کنید.

*در کد های بالا از CDN استفاده شده شما می‌توانید ابتدا فایل ها را دانلود کرده و بعد به پروژه ی خود اضافه کنید.


2- افزودن یک container برای ری اکت به فایل HTML

<div id="root"></div>

این کد را به ابتدای <body> اضافه کنید.


3- اضافه کردن فایل App.js به پروژه(این فایل باید شامل برنامه ری اکت شما باشد)

ابتدا در پوشه پروژه یک فایل با نام App.js بسازید و سپس:

<script type="text/babel" src="./App.js">

کد بالا را به انتهای <body> اضافه کنید.

دو تا نکته راجب اضافه کردن این فایل:

اول: حتما باید بعد از فراخوانی پکیج ها به فایل HTML اضافه شود.

دوم: type تگ باید مساوی "text/babel" باشد.

خوب حالا می‌تونین کد های ری اکت خودتونو داخل App.js بنویسین به عنوان مثال:

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello React</h1>
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('root'));


خوب دوستان اگه نظر، پیشنهاد و یا سوالی دارین خوشحال میشم تو قسمت نظرات مطرح کنید تا بتونم تو نوشته های بعدیم ازشون استفاده کنم.