جستجو برای:
  • صفحه نخست
  • دوره ها
    • طراحی وب ریسپانسیو
 
نکست وان کد ، آموزش برنامه نویسی و طراحی وب
  • صفحه نخست
  • دوره ها
    • طراحی وب ریسپانسیو
0

ورود و ثبت نام

آموزش پروژه محور ری اکت (react js) از مقدماتی تا پیشرفته

خانهبرنامه نویسی سایتآموزش پروژه محور ری اکت (react js) از مقدماتی تا پیشرفته
حالت مطالعه

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

پشتیبانی دوره react

کانال مخصوص دوره و پشتیبانی دوره

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

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.


پیش به سوی آموزش react

قبل از شروع آموزش مفاهیم ریکت ، مفاهیم مهم javascript که توی react خیلی پر کاربرد هستن رو بررسی میکنیم با هم (درک این پیش نیاز ها به شدت ضروریه و اگه این پیش نیاز ها رو به خوبی تمرین کنید و با دقت ویدئو ها رو ببینید، ریکت رو هم میتونید خیلی راحت یاد بگیرید)

آموزش scope در javascript

برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید

01 - آموزش مفهوم scope در جاوا اسکریپت

پیش نمایش
  • دانلود ویدئو

02 - آموزش global scope

پیش نمایش
  • دانلود ویدئو

03 - آموزش function scope

پیش نمایش
  • دانلود ویدئو

04 - آموزش block scope

پیش نمایش
  • دانلود ویدئو

05 - آموزش مفهوم hoisting

پیش نمایش
  • دانلود ویدئو

06 - آموزش variable hoisting

پیش نمایش
  • دانلود ویدئو

07 - آموزش function hoisting

پیش نمایش
  • دانلود ویدئو

08 - آموزش undeclared variable و strict mode

پیش نمایش
  • دانلود ویدئو
آموزش مفاهیم مهم و کاربردی ES6

برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید

01 - معرفی این فصل

پیش نمایش
  • دانلود ویدئو

02 - ternary operator

پیش نمایش
  • دانلود ویدئو

03 - back-tics syntax

پیش نمایش
  • دانلود ویدئو

04 - module concept

پیش نمایش
  • دانلود ویدئو

05 - import and export

پیش نمایش
  • دانلود ویدئو

06 - as keyword in module

پیش نمایش
  • دانلود ویدئو

07 - default export import

پیش نمایش
  • دانلود ویدئو

08 - arrow function

پیش نمایش
  • دانلود ویدئو

09 - rest operator

پیش نمایش
  • دانلود ویدئو

10 - spread operator

پیش نمایش
  • دانلود ویدئو

11 - array destructuring

پیش نمایش
  • دانلود ویدئو

12- object destructuring

پیش نمایش
  • دانلود ویدئو

13 - foreach method

پیش نمایش
  • دانلود ویدئو

14 - map method

پیش نمایش
  • دانلود ویدئو

15 - filter method

پیش نمایش
  • دانلود ویدئو

16 - reduce method

پیش نمایش
  • دانلود ویدئو

17 - reduce challenge

پیش نمایش
  • دانلود ویدئو

18 - this keyword

پیش نمایش
  • دانلود ویدئو

19 - bind method

پیش نمایش
  • دانلود ویدئو
مروری بر کلاس ها در javascript

برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید

01 - روش های مختلف ساخت اشیاء - بخش اول

پیش نمایش
  • دانلود ویدئو

02 - روش های مختلف ساخت اشیاء - بخش دوم

پیش نمایش
  • دانلود ویدئو

03 - پارامترها در تابع سازنده (constructor function)

پیش نمایش
  • دانلود ویدئو

04 - کلاس (class) چیست؟

پیش نمایش
  • دانلود ویدئو

05 - متد سازنده (construnctor method)

پیش نمایش
  • دانلود ویدئو

06 - یک مثال از کلاس ها

پیش نمایش
  • دانلود ویدئو

07 - ارث بری (inheritance) در کلاس ها

پیش نمایش
  • دانلود ویدئو

 

خب حالا که مفاهیم مهم و کاربردی javascript که توی react زیاد استفاده میشن رو یاد گرفتیم ، بریم سراغ راه اندازی و نصب محیط توسعه ی ریکت و با پکیج create-react-app محیط توسعه ی برنامه های ریکتی رو آماده کنیم و با jsx آشنا بشیم و یه کوچولو هم توی ریکت کد بزنیم.

شروع کار با react

برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید

01 - creat-react-app

پیش نمایش
  • دانلود ویدئو

02 - react project structure

پیش نمایش
  • دانلود ویدئو

03 - emmet plugin in react

پیش نمایش
  • دانلود ویدئو

04 - ?what is jsx

پیش نمایش
  • دانلود ویدئو

05 - jsx rules

پیش نمایش
  • دانلود ویدئو

06 - javascript in jsx

پیش نمایش
  • دانلود ویدئو

07 - ?why to use jsx

پیش نمایش
  • دانلود ویدئو

08 - example - website templete

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

09 - example - product card

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

دانلود فایل های این فصل

دانلود فایل ها

حالا بریم با یکی از مهم ترین مفاهیم توی react یعنی کامپوننت ها (component) آشنا بشیم.

کامپوننت ها (component) توی react

برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید

01 - component concept

پیش نمایش
https://course.next1code.ir/react/03-react-comp/01.mp4

02 - component example

پیش نمایش
https://course.next1code.ir/react/03-react-comp/02.mp4

03 - nested component

پیش نمایش
https://course.next1code.ir/react/03-react-comp/03.mp4

04 - class component vs function component

پیش نمایش
https://course.next1code.ir/react/03-react-comp/04.mp4

05 - root comp - App.js

پیش نمایش
https://course.next1code.ir/react/03-react-comp/05.mp4

دانلود فایل های این فصل

دانلود فایل ها

حالا بریم سراغ موضوع جذاب و دوست داشتنی و هم چنین مهمِ props ، و ببینیم پراپ ها چه ارتباطی با component ها دارن

props توی کامپوننت

برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید

01 - user component example

پیش نمایش
https://course.next1code.ir/react/04-props/props-01.mp4

02 - what is props

پیش نمایش
https://course.next1code.ir/react/04-props/props-02.mp4

03 - props destructuring

پیش نمایش
https://course.next1code.ir/react/04-props/props-03.mp4

04 - spread in props

پیش نمایش
https://course.next1code.ir/react/04-props/props-04.mp4

05 - default props

پیش نمایش
https://course.next1code.ir/react/04-props/props-05.mp4

06 - children props

پیش نمایش
https://course.next1code.ir/react/04-props/props-06.mp4

07 - props in class component

پیش نمایش
https://course.next1code.ir/react/04-props/props-07.mp4

08 - default props in class component

پیش نمایش
https://course.next1code.ir/react/04-props/props-08.mp4

09 - card component with props

پیش نمایش
https://course.next1code.ir/react/04-props/props-09.mp4

10 - conclusion

پیش نمایش
https://course.next1code.ir/react/04-props/props-10.mp4

دانلود فایل های این فصل

دانلود فایل ها

حالا وقتش رسیده بریم سراغ طراحی یه پروژه با ریکت ، تا به صورت کامل موضوع component ها و prop ها رو درک کنیم ، و همچنین با ساختار پوشه بندی یه پروژه ریکتی به صورت استاندارد تر آشنا بشیم.

پروژه (تبدیل یه قالب سایت به یه پروژه ی ریکتی)

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

01 - project introduction

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

02 - project structure

پیش نمایش
  • دانلود ویدئو

03 - header component

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

04 - about component

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

05 - service component - part1

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

06 - service component - part2

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

07 - blog component - part1

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

08 - blog component - part1

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

09 - footer component

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

حالا بریم و با رویداد ها (event) توی ریکت آشنایی پیدا کنیم ، ببینیم چطور میتونیم توی react رویداد ها رو مدیریت کنیم و با event object یا همون شی رویداد هم آشنا بشیم

رویداد ها (event) در react

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

01 - react event vs js event

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

02 - click event in class component

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

03 - arrgument in event handler

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

04 - event object in react

پیش نمایش
  • دانلود ویدئو
  • دانلود فایل ها

فرم ها (form) یه بخش جدایی ناپذیر از وبسایت ها هستند و تقریبا سایتی پیدا نمیشه که از فرم ها توش استفاده نشده باشه ، پس بریم و با موضوع form ها توی react آشنا بشیم.

فرم ها (form) در react

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

01 - input type text

پیش نمایش
  • دانلود ویدئو

02 - form select

پیش نمایش
  • دانلود ویدئو

03 - checkbox

پیش نمایش
  • دانلود ویدئو

04 - checkbox challenge

پیش نمایش
  • دانلود ویدئو

05 - radio button

پیش نمایش
  • دانلود ویدئو

بریم با یکی از مهم ترین موضوعات react یعنی state ها آشنا بشیم.

اِستیت (state) ها در react

برای دنلود هر ویدئو روی عنوان ویدئو کلیک کنید

01 - why use state

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

02 - render , re-render

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

03 - useState

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

04 - react developer tools

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

05 - useState - state type

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

06 - useState - array in state

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

07 - useState - object in state

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

خب بریم سراغ رندر شرطی یا همون conditional rendering توی ریکت

رندر شرطی (conditional rendering) در react

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

01 - falsy and turthy vale

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

02 - evaluate AND (&&) operator

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

03 - conditional rendering example

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

04 - conditional rendering example

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

05 - counter challenge

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

حالا بریم یه مینی پروژه با هم انجام بدیم تا چیزایی که تا الان یاد گرفتیم رو در عمل ازش استفاده کنیم ، میخوایم یه ماشین حساب جمع و چور با هم طراحی کنیم تا به موضوع state ها کامل مسلط بشیم و مطالب جدیدی رو با انجام این مینی پروژه یاد بگیریم.

مینی پروژه ماشین حساب (calculator application)

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

01 - intro mini project

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

02 - html

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

03 - css

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

04 - useState for screen result

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

05 - clear and c button

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

06 - equal button

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

07 - equal button

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

08 - dot button

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

09 - dot button

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

10 - useState vs regular variable

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

11 - install mathjs package

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

12 - package.json , package-lock.json

خصوصی
این بخش خصوصی می باشد. برای دسترسی کامل به دروس این دوره باید این دوره را خریداری نمایید.

chat_bubble_outlineنظرات

  • vahid138311
    14 دسامبر 2022
    پاسخ

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

  • nadia.hemmati( دانشجوی دوره )
    17 دسامبر 2022
    پاسخ

    html و cssو javascript رو با دوره شما یادگرفتم خیلی عالی بود تدریس تون منتظر این دوره بودم ممنون بابت قولی که دادید قطعا بهترین دوره ری اکت خواهد بود.

    • میلاد بهرامی(مدیریت)
      19 دسامبر 2022
      پاسخ

      مرسی از همراهیتون خانوم همتی

  • sarahyaraghtala( دانشجوی دوره )
    19 دسامبر 2022
    امتیاز 5 از 5
    پاسخ

    مثل همیشه قطعا این دوره هم بهترین هست

    • میلاد بهرامی(مدیریت)
      24 دسامبر 2022
      پاسخ

      خیلییییییی مچکررررم

  • zahrasakora( دانشجوی دوره )
    20 دسامبر 2022
    امتیاز 5 از 5
    پاسخ

    شما بسیار سلیس و روان تدریس میکنین. یاد گیری html, css, javascript رو من با دوره های شما یاد گرفتم. و تمام جزییات را شما در نظر میگیرین توی تدریستون. ممنون بایت محبتتون

    • میلاد بهرامی(مدیریت)
      24 دسامبر 2022
      پاسخ

      مرررررسی از همراهیتون

  • مهرداد
    21 دسامبر 2022
    پاسخ

    سلام این دوره کی تکمیل میشه؟

    • میلاد بهرامی(مدیریت)
      24 دسامبر 2022
      پاسخ

      سلام
      تا آخر فروردین ماه 1402

  • محمدرضا موسوی( دانشجوی دوره )
    24 دسامبر 2022
    امتیاز 5 از 5
    پاسخ

    قطعاً دوره خوبی میشه. ممنونم بابت ارائه این دوره پربار

    • میلاد بهرامی(مدیریت)
      25 دسامبر 2022
      پاسخ

      خیلیییی مچکرم محمدرضا جان

  • _mohammaddd_( دانشجوی دوره )
    25 دسامبر 2022
    پاسخ

    با اختلاف بهترین و خوش اخلاق ترین مدرسی که به عمرم دیدم، شما هستین آقای بهرامی. مطمئنم این دوره هم مثل بقیه دوره هاتون خفن و بی نظیر می‌شه.

    • میلاد بهرامی(مدیریت)
      25 دسامبر 2022
      پاسخ

      خیلیییییییی ممنون محمد جان

  • javad
    2 ژانویه 2023
    پاسخ

    می تونم بگم کسانی که میخان ری اکت رو با دیدن فیلم آموزشی یاد بگیرن، بی شک، بهتر ، روان تر، اصولی تر و لذت بخش تر از این دوره پیدا نخواهند کرد.

    • میلاد بهرامی(مدیریت)
      2 ژانویه 2023
      پاسخ

      خیلی ممنونم اقا جواد عزیز ، ممنون از لطف شما

  • سهیل
    11 ژانویه 2023
    پاسخ

    سلام
    استاد الان که دوره کامل نیس اگه هزینه رو پرداخت کنیم
    دیگه زمانی که دوره کامل شد نیازی نیس پولی بیستر بدیم؟

    • میلاد بهرامی(مدیریت)
      11 ژانویه 2023
      پاسخ

      سلام سهیل جان ، وقتتون بخیر ، اگه الان دوره رو ثبت نام کنید ، به تمامی آپدیت های دوره به صورت رایگان دسترسی دارید و نیازی نیست بعدا پولی پرداخت کنید

  • amirkasraei088( دانشجوی دوره )
    19 ژانویه 2023
    امتیاز 5 از 5
    پاسخ

    تمام دوره هاتون رو دنبال کردم و بدون تردید باز هم دنبال میکنم چون بهترین هستین با آرزوی سلامت برای شما استاد عزیز🙏⭐

    • مهران
      24 ژانویه 2023
      پاسخ

      love

  • حسین
    24 ژانویه 2023
    پاسخ

    با سلام وقت بخیر این دوره چند ساعته؟

    • میلاد بهرامی(مدیریت)
      24 ژانویه 2023
      پاسخ

      سلام وقتتون بخیر ، دوره در حال برگذاری هست و مشخص نیست چند ساعت بشه ، ولی بالای 30-40 ساعت میشه

  • یونس شیخلر( دانشجوی دوره )
    25 ژانویه 2023
    امتیاز 5 از 5
    پاسخ

    دورود استاد بهرامی عزیز .
    من دانشجوی دوره های Html , css, JavaScript شما بودم .
    و با اینکه ری اکت رو مدتی است یاد گرفتم و چندتا پروژه درست کردم و یا مشارکت داشته ام با این حال باز هم دوره شما رو خریداری کردم چون میدونستم دوره های شما متفاوته و به نکات کلیدی و ریز هم میپردازید و همینطور هم هست چون با دیدن آموزش ها به خودم آفرین گفتم که به شما باور داشتم – همیشه پیروز و تندرست باشید –

  • Ahmad
    28 ژانویه 2023
    پاسخ

    سلام آقای بهرامی عزیز
    میخواستم بدونم دوره تا کی کامل بارگزاری میشه؟
    و یا هر فصل کی به کی بارگزاری میشه؟؟

    • میلاد بهرامی(مدیریت)
      29 ژانویه 2023
      پاسخ

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

قوانین ثبت دیدگاه

  • دیدگاه های فینگلیش تایید نخواهند شد.
  • دیدگاه های نامرتبط به مطلب تایید نخواهد شد.
  • از درج دیدگاه های تکراری پرهیز نمایید.
  • امتیاز دادن به دوره فقط مخصوص دانشجویان دوره می باشد.

لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

قیمت :

2,199,000 تومان 676,000 تومان

امتیاز
5.00 از 5 رأی
5.00 5 رای
2,199,000 تومان 676,000 تومان
تعداد دانشجو : 77
نوع دوره: غیر حضوری (دانلودی)
پیش نیاز: html , css , js
6.84k بازدید 24 دیدگاه
میلاد بهرامی
میلاد بهرامی
برنامه نویس و توسعه دهنده وب

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

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

تمامی حقوق برای سایت نکست وان کد محفوظ می باشد.

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت