- دوره آموزش ReactJS: آشنایی با ReactJS و چاپ Hello World
- دوره آموزش ReactJS: شروع با JSX
- دوره آموزش ReactJS: مفهوم Component ها و Prop ها
ReactJS یک کتابخانه جاوا اسکریپتی قدرتمند می باشد که توسط فیس بوک خلق شده است. ReactJS متخصص ایجاد رابط کاربری قدترمند است که قصد دارد سایتهای اینترنتی را متحول کند.
پیش نیازهای ReactJS
از آن جایی که ReactJS توسط جاوا اسکریپت بوجود آمده است، پس باید قبل از استفاده از ReactJS به جاوا اسکریپت و اکما اسکریپت 6 مسلط باشید.
نصب ReactJS
برای نصب ReactJS به npm نیاز دارید. npm یک Package Manager مخصوص برنامههای JavaScript است.
برای نصب npm آخرین نسخه NodeJS را از آدرس nodejs.org دانلود و در دستگاه خود نصب کنید.
پس از نصب NodeJS که نصب بسیار راحتی دارد، به مسیر پروژه دلخواه خود رفته و در پوشه مورد نظر پروژه کلید Shift را فشار داده و گزینه Open command window here را انتخاب کنید. پنجره CMD با آدرس پوشه جاری باز خواهد شد. در این جا دستور زیر را وارد کنید:
npm install -g create-react-app
در بالا با npm پکیج create-react-app را نصب میکنیم.
در هر مسیری که مایل بودید به شکل زیر پروژه خود را ایجاد کنید:
create-react-app hitos_project
به جای hitos_project نام پوشهای دلخواه است که پروژه در آن قرار میگیرد. با دستور زیر وارد پوشه پروژه خود میشویم:
cd hitos_project
با استفاده از دستور زیر پروژه شما به صورت خودکار در مرورگر اجرا خواهد شد:
npm start
به محض وارد کردن دستور فوق سرور مجازی شروع به فعالیت کرده و برنامه React شما را در مرورگر پیشفرض نشان داده و به شما یک آدرس میدهد.
فایلهای موجود در پوشه public و src را پاک کرده و فقط این دو پوشه را نگاه دارید. ساختار فایلها و پوشههای مهم این پروژه به شرح زیر خواهد بود:
node_modules
public
-> index.html
src
-> index.js
package.json
فولدر node_modules شامل کتابخانههای مورد نیاز پروژه است.
پوشه public حاوی کدهای static پروژه و فایل index.html است.
پوشه src شامل کدهای جاوا اسکریپتی پروژه و فایل index.js مهم ترین فایل پروژه React است.
فایل package.json نیز لیست کتابخانههای مورد نیاز React را برای شما نگهداری میکند.
از پوشه public کلیه فایلها غیر از index.html و از پوشه src کلیه فایلها غیر از index.js را پاک میکنیم.
محتویات فایل index.html را با سورس زیر جایگذاری میکنیم:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="main"></div>
</body>
</html>
محتویات فایل index.js را با سورس زیر جایگذاری میکنیم:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('main'));
دو کتابخانه react و react-dom را در سطرهای اول و دوم اضافه کردیم.
در سطر سوم با ReactDOM و متد render سعی در چاپ Hello World داریم. اولین ورودی render یک تگ HTML و ورودی دوم آدرس شناسه اصلی در ساختار صفحه index.html است.
اگر پیش از این دستور npm start را وارد کرده و صفحه CMD در حال اجرای دستور باشد بلا فاصله میتوانید تغییرات را ببینید و گرنه در مسیر پروژه دوباره دستور npm start را درخواست دهید.
قسمتهای بعد را از دست ندهید.