نصب و شروع کار با react

مدرس : حسام موسوی
زمان این قسمت : 32:47

برای دسترسی به این قسمت نیاز است عضو سایت باشید و وارد سایت شوید
توضیحات

در این جلسه روش نصب و راه اندازی React رو به شما آموزش میدم که مقداری هم پیچیده اس که امیدوارم با دقت این قسمت رو مشاهده کنید و بعد پیغام معروف یعنی Hello World رو با استفاده از React در مرورگر به شما نمایش میدم . 

آموزش ReactJs ورژن 15 زمان کل دوره : 06:30:42
1
معرفی ReactJs رایگان
12:45
3
آشنایی با JSX رایگان
18:30
19:04
5
کار با props رایگان
15:50
30:40
30:57
12
کار با propTypes رایگان
13:50
13
07:31
14
21:06
15
15:15
17
کار با mixin ها رایگان
11:07
19
16:53
14:26

دورهای پیشنهادی

مشاهده همه دوره ها
آموزش ReactJs درحال برگزاری

ReactJs یکی از محبوب ترین فریمورک های جاوا اسکریپتی حال حاضر است که توسط فیسبوک با هدف تعامل بهتر جاوا اسکریپت و html ارائه شده تا شما بتوانید با استف...

آموزش پروژه محور Vuex درحال برگزاری

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

آموزش webpack تکمیل شده

در این دوره قصد دارم webpack که یک module bundler برای جاوا اسکریپت هست رو به شما آموزش بدم . حالا module bundler چیه ؟ در جاوا اسکریپت همیشه احساس نی...

آموزش Redux تکمیل شده

شاید تا به حال اسم Redux رو نشنیده باشید اما اگر با جاوااسکریپت یا فریمورک ReactJs کار کردید حتما پیشنهاد میکنم این توضیحات رو مطالعه کنید . ببینید Re...

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
programer | 1 هفته پیش

gulp.task('babel', () =>
    gulp.src('src/*.*')
    .pipe(babel({
        "presets": [
    ["env", {
                "modules": false
    }], "react"
        ]
    }))
    .pipe(gulp.dest('dist'))
);

babel کاری به کد های خود کتابخونه نداره.

saer | 2 روز پیش

سلام مهندس جان...این آموزش که با نسخه جدید اصلا راه اندازی نمیشه!
یه حرکتی برا ما بکن فدات شم...پس چجوری بریم سراغ دوره ری اکت نیتیو؟ در ضمن کامنت های اینجا رو هم خوندم و متوجه شدم به یک خط نصب میشه...
ولی خیلی تغییر کرده...منتظر بمونیم دوره جدید شروع کنید؟

حسام موسوی | 2 روز پیش

دوره جدید طی روز های آینده در سایت شروع میشه

programer | 1 هفته پیش

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

gulp.task("bundle", ["babel"], function () {
        return rollup({
            input: './dist/main.js',
            format: "cjs",
            plugins: [resolve({
                jsnext: true,
                main: true
            }), zibandeh(), commonjs({
                include: 'node_modules/**',
                sourceMap: false
            })]
        })
        .pipe(source('app.js'))
        .pipe(gulp.dest("./dest"))
})

کد های main.jsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
var App = React.createClass({

        render: function () {
            return ( <
                h1 > Hello World < /h1>
            )
        }

    });

    ReactDOM.render( < App / > , document.getElementById('app'));

task بدون خطا اجرا می شه اما browser خطای دستوری (syntax Erroe) از کد های خود react و react-dom فایل باندل شده می گیره.
چطور این مشکل رو رفع کنم؟

حسام موسوی | 1 هفته پیش

اصلا احتیاج به استفاده از gulp نیست از روش نصب خود مستندات ورژن جدید React استفاده کنید

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

programer | 1 هفته پیش

ممنون
استفاده از Create React App قطعا بهتره.
اما برای اصلاح این روش باید چی کار کرد؟

حسام موسوی | 1 هفته پیش

شما باید ببینید کدهاتون درست build شدن بر اساس babel که اضافه کردید.

mghhgm | 2 هفته پیش

ممنون از پاسخ شما

کم کم دیدم نسبت به فریم ورک های جدید داره عوض میشه چون اصلا پایدار نیستن!!!! این آموزش شما برای ۱۰ ماه پیش هست اما روی reactjs الان داره خطا میده...
همین مشکل در angularjs هم بود و با آمدن angular2 ، نسخه قبلی کلا پشتیبانی نشد و شیوه کد نویسیش هم تغییر کرد.
در فریم ورک سیمفونی هم همین مشکل رخ داد و ورژن قبلی کلا در ورژن بعدی پشتیبانی نشد.

با این اوصاف برای یک برنامه نویس که پروژه برمیداره این موارد همشون خطرناک هستن چون در زمان آپدیت بعدی مدام باید نگران باشه الان وقت کدوم یکی هست که کامل عوض بشه و بشینه کل پروژه به اون عظمت رو از نو ادیت کنه ... .

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

Saeed | 1 ماه پیش

سلام

در زمان ایپورت چه تفاوتی بین حالتی که با {} نام گزاری میشه و حالتی که بصورت ساده ایپورت میشه وجود داره

import React , {Component} from 'react'

حسام موسوی | 1 ماه پیش

این موضوع مربوط به ماژول های es6 میشه
ما دوحالت export دارید
default و غیر default
اگر یک پکیجی export default داشته باشه
میتونید بگید React یا با هر اسم دیگه ای اونو import کنید
اما اگر غیر default باشه باید داخل {} امسشو فراخونی کنید تا بتونید بگردونید اونو
البته این ساده شده اشه و موضوع کمی بزرگتر از این حرفاست

Saeed | 1 ماه پیش

سلام

یعنی زمانی که داخل {} هست نمیتونیم اسمشو تغییر بدیم ؟
---------------------------
و اگر غیر default باشه بدون {} فراخوانیش کنیم ارور میده ؟

حسام موسوی | 1 ماه پیش

میشه تغییر داد لطفا در مورد ماژول های es6 در جستجو کنید

برای مثال این کد زیر رو میشه تبدیل کرد

import React , {Component} from 'react'

به

import R , {Component as Cm} from 'react'

که بجای component باید از Cm استفاده کنید و بجای React از R

mghhgm | 2 هفته پیش

با سلام. من که دقیقا مطابق آموزش ها پیش رفتم. حتی آموزش gulpjs رو هم دیدم. اما مدام خطای زیر رو میده و Hello World رو نمایش نمیده! خستم کرده ... .

Uncaught TypeError: React.renderComponent is not a function
    at Object.34.react (bundle.js:20957)
    at s (bundle.js:1)
    at e (bundle.js:1)
    at bundle.js:1

حسام موسوی | 2 هفته پیش

دیگه به gulp نیاز نیست اول با دستور

npm install -g create-react-app

create-react-app رو روی سیستمتون نصب کنید و بعد با دستور زیر پروژه جدید هر جا که خواستید بوجود بیارید و دیگه برای کامپایل کردن کد ها نیاز به gulpjs نیست

create-react-app my-app

mghhgm | 2 هفته پیش

ممنون از پاسخ شما

اما بهتر نیست این مورد رو اطلاع رسانی کنین که من این همه وقت روی آموزش دوره gulp نگذارم توی این بی وقتی و باز برم آموزش reactjs رو شروع کنم و چند ساعت با کدها سروکله بزنم خطا بگیرم همش ...!!

حسام موسوی | 2 هفته پیش

بله حق با شماست اما این مورد رو در قسمت نظرات گفتم بزودی این دوره انتقال داده میشه به بخش آرشیو سایت و دوره ای جدیدی جاشو میگیره
که همه موارد جدید توش مطرح میشن

pariko | 3 ماه پیش

سلام و وقت بخیر
من دستور gulp watch رو که اجرا می کنم فایل build ساخته نمیشه
من فایل gulpfile که شما داشتید و اجرا کردم تو دستور gulp watch می گفت که watch رو نمیشناسه و من از یه سایتی filegulp را دانلود کردم و دیگه اون خطا مشاهده نگردید ولی مشکل اینجاس فایل build رو نمیسازه
خواهشمندم مرا راهنمایی فرمایید و اگر امکانش هست فایل gulpfile رو در اختیار قرار دهید.
با تشکر

حسام موسوی | 3 ماه پیش

با سلام همونطور که در ویدیو ها گفتم روز ایجاد این موضوع رو در دوره gulp دقیق توضیح دادم و اینکه این فایل در فایل های دانلود قرار دادم میتونید استفاده کنید

حامد | 7 ماه پیش

سلام و وقت بخیر؛
بر روی سرور هم نیاز به gulp watchی که گفتید هست؟ یا صرفا کدهای رو روی سرور کپی کنیم سایت بالا میاد؟
من با کدایگنایتر کار می کنم و دوست دارم لایه View رو با استفاده از reactJS جلو ببرم.
ممنونم

حسام موسوی | 7 ماه پیش

سلام خیر نیازی به gulp watch نیست و بعد از اتمام کارتون در local فقط نیاز به کپی و پیست کردن کد ها دارید
در ضمن مهم نیس از چه زبان یا فریمورک سمت سروری استفاده میکنید
لطفا بصورت اون رو بصورت Api استفاده کنید .

Mahdi Memarpouri | 8 ماه پیش

ابتدای این ویدئو فرمودید که قراره از Babel استفاده کنیم ولی تا آخر با gulp رفتیم جلو . چرا ؟

حسام موسوی | 8 ماه پیش

gulp یک Task Manager هستش که با استفاده از اون میتونید یک سری کارها رو بصورت اتوماتیک انجام بدید در آموزش پیاده سازی من با استفاده از gulp یک Task برای کامپایل با استفاده از babel ایجاد کردم یعنی کامپایل کد ها با babel اتفاق افتاده

احمد | 8 ماه پیش

لطفا فایلهای ویدئوی دوم react را بگذارید. باتشکر

حسام موسوی | 8 ماه پیش

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

shahab | 9 ماه پیش

سلام
پس فایلای تمرنی کو؟

حسام موسوی | 9 ماه پیش

چک نکردم اگر در این قسمت نباشه در قسمت های آینده هست