React JS Full Tutorial for Beginners | What is React JS? - Learn React JS in 9 Hours

Поделиться
HTML-код
  • Опубликовано: 5 авг 2024
  • In this detailed React JS tutorial, you will learn React JS in Hindi. This React JS crash course will help you get an overview of what is React JS and how to use and implement React JS for beginners.
    React JS is a JavaScript library that builds user interfaces for single-page applications. It is open-source, which is used for handling the view layer for mobile apps and the web. You can also create reusable UI components with this react crash course.
    With this detailed React tutorial for beginners, you will learn everything from basic to pro. Timestamps are also mentioned down below for this react tutorial.
    00:00:00 | Introduction of Course
    00:00:35 | What is React JS
    00:10:17 | How to Install React JS
    00:20:48 | Directory Structure of React App
    00:31:45 | The Workflow of React App
    00:39:39 | What are REact components
    00:43:30 | React JS Functional vs Class Components
    01:00:17 | What is JSX & Why use it in React
    01:09:07 | React JS Props
    01:20:31 | What is State in React JS
    01:28:17 | Event Handling with Method in React JS
    01:36:24 | How to Add CSS to React Component
    01:45:38 | Module Style for a Component
    01:49:22 | what is AXiOS & How to use it with React JS
    01:53:22 | Redux Flow-its Work
    01:57:16 | How to Render List in React Component
    02:06:10 | What is Key Prop in React JS
    02:11:11 | How to Render Data Conditional in React Component
    02:16:55 | How to Delete Data From the State in React JS
    02:24:08 | Handling the form inputs in React JS
    02:37:48 | Form Handling using Controlled Components
    02:46:26 | How to Create Registration for using Greeting Screen
    03:04:41 | Show & Hide Password along with Dynamic Style
    03:13:45 | How to Add CSS Classes Dynamically in React JS
    03:18:45 | Styled Component Library in React JS
    03:27:02 | Implementing Media Query and Hover Using Styled
    03:32:00 | How to Use Props Inside a Styled Component
    03:39:25 | How to Set up the Environment for Firebase
    03:46:39 | Setup of the Survey Project
    04:00:54 | Handling the Name and the Answers with the State
    04:14:42 | How to Initialize the Firebase in React JS
    04:20:26 | Send the DAta to the firebase
    04:28:10 | Setup the Login & Register Components
    04:35:06 | Register User using Firebase in React JS
    04:54:03 | Sign in with Email & Password using Firebase
    05:05:24 | Google Login using Firebase
    05:14:34 | Converting a Template
    05:29:41 | Complete Setup for React Router Packages
    05:43:47 | Create React 404 Page Not Found using React Router
    05:46:41 | Redirecting Page After Successful Login and Logout using Router
    05:55:16 | Nested Routing in React
    06:09:21 | useState Hook to Handel State inside Function Components
    06:19:05 | Stateful & Stateless Component in React JS
    06:20:42 | Component Lifecycle Method in React JS
    06:26:06 | Class Component Mounting Lifecycle Method
    06:36:01 | Class Component UnMounting Lifecycle Method
    06:40:04 | Understanding the HTTP_AJAX Request in React JS
    06:45:49 | Fetching Data Using GET HTTP Request in React JS
    06:53:06 | Displaying the Fetched Data in Blog Project
    07:06:00 | How to Post Data to the API with React jS
    07:13:11 | Deleting Data using Axios in React JS
    07:19:16 | Default Global Configuration for axios
    07:22:57 | Creating and Using Axios Instances
    07:28:17 | Weather App
    07:34:23 | Converting the Template into Component
    07:53:07 | Handling the Lat and Lon using State in React JS
    08:06:57 | How to get Data Using API in React JS
    08:24:57 | Show Loading Screen While Fetching Data
    08:30:21 | Recent Search Bar Filter
    08:45:14 | Research the Recent Searched Data in React JS
    08:53:12 | Save Recent Searches in Local Storage
    09:01:58 | Understanding State and its Complexity
    09:05:41 | Setting up Reducer and Store
    09:13:00 | Create Dispatching Action in React JS
    09:17:47 | Create Subscription
    09:23:42 | Connect React to Redux
    09:29:23 | Connect ReactJS to Store
    09:35:38 | Dispatching Actions from within the Component
    💎 Get Access to Premium Videos and Live Streams: / @wscubetech
    Connect with WsCube Tech on social media for the latest offers, promos, job vacancies, and much more:
    ► Subscribe: bit.ly/wscubechannel
    ► Facebook: / wsubetech.india
    ► Twitter: / wscubetechindia
    ► Instagram: / wscubetechindia
    ► LinkedIn : / wscubetechindia
    ► RUclips: / wscubetechjodhpur
    ► Website: wscubetech.com
    -------------------------------------| Thanks |--------------------------
    #ReactJS #ReactJSTutorial #ReactJSCrashCourse

Комментарии • 130

  • @wscubetech
    @wscubetech  Год назад +7

    😎Hey, thanks for watching! We’d love to know your thoughts/doubts here in the comments.
    🔴 To learn Web Development online with regular LIVE CLASSES, enroll now: forms.gle/XVJRMQdCMoPeNpBm7
    👉For professional self-paced certification courses (pre-recorded), visit: bit.ly/Pre-Recorded-Course
    👉Don’t forget to SUBSCRIBE to our channel for more such videos & valuable content: bit.ly/RUclips-WsCubeTech

  • @ravikiranab
    @ravikiranab Год назад +6

    The way of explanation with real time example is very good.
    ನಿಮ್ಮ ವಿವರಿಸುವ ವಿಧಾನ ತುಂಬಾ ಚೆನ್ನಾಗಿದೆ

    • @Viralmems_xyz
      @Viralmems_xyz 10 месяцев назад

      if you make notes in this lecture please send me

  • @NDMARATHA
    @NDMARATHA Год назад +7

    Really awesome course even if it is old but i love it

  • @HiddenUser889
    @HiddenUser889 Год назад +4

    I love your channel ws cube tech... This channel teach me front-end web development & I spacelly love giri sir.. Who teach us in really verry fantastic way❤❤❤❤❤❤❤❤❤❤❤❤❤❤mant many many many many love from heart sir🙏🙏from Bihar🙏🙏

  • @shivamkumarsah9514
    @shivamkumarsah9514 2 года назад +7

    Awsome explanation sir. Subscribed this channel 💖

  • @motivationalguru5428
    @motivationalguru5428 Год назад +6

    best demonstration ever seen👌

  • @shikharpaudel4630
    @shikharpaudel4630 Год назад +4

    well explained ,thank you😍

  • @Hazell639
    @Hazell639 Год назад +3

    Such an underrated video. Thanks

  • @rahulbaghel4755
    @rahulbaghel4755 2 года назад +11

    Dam. Ur videos are really amazing.. Topic wise and easy.. Pls make a COMPLETE MERN STACK TUTORIAL. PLSSSSSSSSSS🥴🥴

  • @mdhossen7082
    @mdhossen7082 2 года назад +2

    This video is Very helpful,
    Thanks wscub tech

  • @exposetechnology9907
    @exposetechnology9907 2 года назад +18

    Awesome content! Awesome teaching style.

    • @Viralmems_xyz
      @Viralmems_xyz 10 месяцев назад

      bhai notes banaye ho to send kr do bhai

  • @muhammadnaveed7953
    @muhammadnaveed7953 2 года назад +6

    Excellent demonstration.. Awesome job sir g.. Thank u..

  • @the_princekrrazz
    @the_princekrrazz 6 месяцев назад +1

    Wow sir It's great explanation.

  • @adityanandan01
    @adityanandan01 2 года назад +2

    Sir You are my favourite teacher

  • @sufyanbaig9755
    @sufyanbaig9755 2 года назад +4

    thank to you for your effort

  • @pradyumn8507
    @pradyumn8507 11 месяцев назад

    Fabulous Video❤
    like here after watching full tutorial🧑‍💻

  • @attiqurrehman4142
    @attiqurrehman4142 2 года назад +22

    Best react courses in the entire youtube specially for pakistani & indian

    • @zeeshanimran9580
      @zeeshanimran9580 2 года назад

      P⁰⁹⁸7⁷⁶⁶⁵2²¹.,
      ,
      ,.m.,m
      ,Mlmp⁹pppói⁸⁷y5⁵⁴é²¹3344⅚ to í that gyi both zoom water cool no no honeymoon on vinyl

    • @trailersclub6227
      @trailersclub6227 Год назад

      Pakistan can only teach how to make bombs 💣

    • @nissaislam4082
      @nissaislam4082 10 месяцев назад

      And bangadesh

  • @mdhossen7082
    @mdhossen7082 2 года назад +1

    This video is Very helpful,
    Please make REACT-NATIVE crash course,

  • @AkshayKumar-zz6cz
    @AkshayKumar-zz6cz Год назад +4

    Sir can you provide a complete crash course on React Native from beginner to advanced level

  • @manmohansharma6484
    @manmohansharma6484 Год назад +2

    You are a good teacher

  • @priyanshukumarsingh4090
    @priyanshukumarsingh4090 Год назад +1

    very useful viedo
    thanks a lot sir for this viedo

  • @shivdatt5492
    @shivdatt5492 2 года назад +3

    awesome 👌👌

  • @bhismpitamah267
    @bhismpitamah267 Год назад +3

    Very informative video ,Please make BackEnd Nodejs Full Course ❤️🙏🙏🙏

  • @RajeshChauhan-bz5zj
    @RajeshChauhan-bz5zj 2 года назад +1

    Thank you so much

  • @aasthagoyal5059
    @aasthagoyal5059 Год назад +1

    AT 2:56:34 how you decide to make all states in app.js and registrationhandler also. why can't we make name,email,pswrd state and registrationhandler in register.js

  • @codeprohub
    @codeprohub Год назад +1

    really its a best course

  • @kalyanipriyadarsini
    @kalyanipriyadarsini 2 года назад +1

    Your laravel tutorial was awesome

  • @nayemislam3806
    @nayemislam3806 2 года назад +1

    Thanks for this help sir

  • @VikasSharma-nx5go
    @VikasSharma-nx5go 2 года назад +6

    Thanks 😊 Mam for this course

    • @Mrtjsis
      @Mrtjsis 2 года назад +2

      Welcome sister

  • @ProjectPros
    @ProjectPros 2 года назад +1

    You guys are awesome

  • @SpotQuotes
    @SpotQuotes 10 месяцев назад

    React JS Full Tutorial for Beginners is Very Helpful ❤❤

  • @mila-gv7ks
    @mila-gv7ks 2 года назад +7

    Apne Khan sir programmes ke liye

  • @ashutoshrashtrawadi4812
    @ashutoshrashtrawadi4812 2 года назад +1

    Please make this course in functional component

  • @inderjitrao2140
    @inderjitrao2140 Год назад +1

    Thank you sir

  • @GB-su9gu
    @GB-su9gu 2 года назад +2

    Respect ❤️

  • @arshad1781
    @arshad1781 Год назад +1

    Nice 👍

  • @razarajpoot9811
    @razarajpoot9811 10 месяцев назад

    Excellent explainatin

  • @BadalKumar-tu2wg
    @BadalKumar-tu2wg 2 года назад

    #Great video

  • @abirpaul9027
    @abirpaul9027 2 года назад

    completely hooked

  • @prasadonride
    @prasadonride Год назад

    thank you sir ☺☺☺

  • @shreyalove322
    @shreyalove322 2 года назад +3

    Great teacher

    • @Viralmems_xyz
      @Viralmems_xyz 10 месяцев назад

      apne notes banaye ho to send kr do plz

  • @hackingboy0768
    @hackingboy0768 2 года назад

    Thanks mam

  • @harkiratsingh507
    @harkiratsingh507 2 года назад +2

    Hi sir mam pls make a video on adobe after effect

  • @pateljayu7676
    @pateljayu7676 Год назад

    I request to make series using functional component

  • @user-oe6gf9lv2k
    @user-oe6gf9lv2k 9 месяцев назад

    I have one doubt sir, I created database in firebase but my data does not going in to firebase, Please help me for that.

  • @shivampandey-xn7tz
    @shivampandey-xn7tz 2 года назад +1

    Osm

  • @ramanuj912
    @ramanuj912 Год назад

    please make a video on vue js beginer to advance

  • @InfoFootball2
    @InfoFootball2 Год назад +1

    Love from Pakistan ❤❤❤

  • @ashrafkhan9080
    @ashrafkhan9080 Год назад

    which extension download for html suggetion

  • @cartoonwalasudhir
    @cartoonwalasudhir 2 года назад

    Please make one video react hooks

  • @desertergaming4239
    @desertergaming4239 Год назад +2

    Sir can you please provide the template of weather app

  • @Muskan-by3ze
    @Muskan-by3ze Год назад

    Mam meri create-react app create nhi hori..node.exe is not recognised aara h

  • @_hustler_boy
    @_hustler_boy Год назад +1

    Please make real project using front end all tools Please sir

  • @gojo55x
    @gojo55x Год назад +1

    Sir We need a React Native Course in 2023

  • @umardarazofficials3529
    @umardarazofficials3529 Год назад

    Hlo sir ab to class component use hi ni ho rha, so Plz function component pr bhi bna dain

  • @anoopyadavoffcial6993
    @anoopyadavoffcial6993 2 года назад +1

    Pleease implement Django with react js

  • @varsharajput331
    @varsharajput331 6 месяцев назад

    Hello sir ky is video se av padhna shi rhega kyuki ye 2 sal purani video h to ky mai isse pdh skti hu pls sir reply 😢

  • @maddymac7813
    @maddymac7813 2 года назад

    Angular Full Course kab upload ho raha hai, sir ???

  • @nileshnkjmt
    @nileshnkjmt Год назад +2

    Thanks for hindi bhagwan apko khub khusiya de

  • @jaitiwari5982
    @jaitiwari5982 Год назад

    from where i can gets the notes

  • @muhammadarslanmaqsood158
    @muhammadarslanmaqsood158 2 года назад

    ❤️❤️❤️

  • @sonashaan4777
    @sonashaan4777 2 года назад

    Data entry video v bnaye

  • @SurajChauhan-ni5kz
    @SurajChauhan-ni5kz Год назад

    Dir Aap NODE JS AUR ANGULAR JS PAR V VIDEO banaiye

  • @Keep_Laughfing
    @Keep_Laughfing Год назад +2

    Sir we import firebase but from where we export?? Error is showing

  • @BadalKumar-tu2wg
    @BadalKumar-tu2wg 2 года назад

    Good

  • @kashmirtechtv2948
    @kashmirtechtv2948 2 года назад

    Anyone will suggest this course?

  • @tcoc05pratikwagh17
    @tcoc05pratikwagh17 10 месяцев назад

    anybody knows unexpected tokec '

  • @AhmadShah-wd3yy
    @AhmadShah-wd3yy Год назад

    Sir keya hm Log direct front End keleye..
    Js and React Start kar sakte hai...
    Matlab HTMl css bootstrap jqury esko chor ke

    • @learningmode4895
      @learningmode4895 Год назад +2

      Ha tu bina Jamin k ghr bna lega phle ye bta agar bina jamin k ghr bna skta hai to tu js bhi chod de or sidha react kr

  • @codetube7034
    @codetube7034 8 месяцев назад

    can you provide me the the slides of these video materials ??

  • @cartoonwalasudhir
    @cartoonwalasudhir 2 года назад +1

    Html css JavaScript complete then choose to angular or react

  • @yourdady8448
    @yourdady8448 11 месяцев назад

    if i download react js with vite

  • @euzarsiph
    @euzarsiph 2 года назад

    What is that screen on which u cna write??
    Any one who can tell me?

  • @suryanshagrawal7700
    @suryanshagrawal7700 Год назад +3

    5:31:37 At this timeline if you download Router then may be your get error in using Switch because in the new version it is replaced with "Routes", so do this:
    import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
    And replce Switch statement with the Routes like this;











    This will work.
    Bythe way Amazing course😎

  • @sonashaan4777
    @sonashaan4777 2 года назад

    Sir affiliate marketing k uper full video bnaye bro

    • @maddymac7813
      @maddymac7813 2 года назад +1

      Sir bro.... Bro sir.... 😅

  • @anoopyadavoffcial6993
    @anoopyadavoffcial6993 2 года назад +3

    make a video on Django with react

  • @ankitavirani8464
    @ankitavirani8464 Год назад

    I have one error and I don't know how to solve

  • @GurmeetSingh-fr8uo
    @GurmeetSingh-fr8uo 2 года назад

    Which is the best language to learn in 2022?

  • @balrampatidar8568
    @balrampatidar8568 Год назад

    Ese course ko karne ke baad kya hum frontant developer ki job mil sakte hai...

    • @learningmode4895
      @learningmode4895 Год назад

      It also depends ur mind and practice how much u grabbed from this session if u think u have successfully gained much knowledge than u can apply for job

  • @Holly-bolly_movies_2022
    @Holly-bolly_movies_2022 Год назад

    // App.js///
    import React, {Component} from 'react';
    import logo from './logo.svg';
    import './App.css';
    import demo from './components/demo';
    class App extends Component {
    render(){
    return (




    );
    }
    }
    export default App;
    ///Demo.js///
    import React from "react";
    function demo () {
    return (

    hiiiii

    )
    }
    export default demo;//
    error.... Line 5:8: 'demo' is defined but never used no-unused-vars.....solve it sir plz

    • @adarshjaiswal1850
      @adarshjaiswal1850 4 месяца назад

      Bhai is Blog project ka source code Kahan se milega 💀

  • @vatsvlogs6110
    @vatsvlogs6110 6 месяцев назад

    Woh wale sir kahan hain??

  • @softmedun6794
    @softmedun6794 Месяц назад +1

    Aap koi v topic ko iatna jyada difficult kyu kr dete h 😢

  • @dakshkumar7637
    @dakshkumar7637 2 года назад

    Re-upload.. why?

    • @ShikharMaurya
      @ShikharMaurya 2 года назад

      Because in last upload voice is not audible after 1:30 hours

  • @pakkid6432
    @pakkid6432 2 года назад

    dzb adb

  • @VikasSharma-nx5go
    @VikasSharma-nx5go 2 года назад +1

    9 hours ka to full course hota he🌝
    Crash course nhi😛

  • @ashishmalviya2979
    @ashishmalviya2979 2 года назад

    Hi Sir i'am Ashish Malviya kya aap coding ke uper full video banayege

  • @ajinformation5105
    @ajinformation5105 2 года назад

    Sir please make videos of blender

  • @dharmendrasharma9317
    @dharmendrasharma9317 2 года назад

    🌹🌹💖💖

  • @mohammadajharuddeen8933
    @mohammadajharuddeen8933 2 года назад +2

    React native ka full course upload kro medam

  • @deepaksunwal1028
    @deepaksunwal1028 Год назад

    Sir, Kya yeh complete code mil jayega kya?
    Please Reply.

  • @akhileshsharma9040
    @akhileshsharma9040 2 года назад

    Sit kotlin pe video banye na

  • @dikshachawda839
    @dikshachawda839 Год назад

    project bta do

  • @whitefoxstudio7226
    @whitefoxstudio7226 2 года назад +5

    We need full MERN stack course

  • @rahulsachdeva7908
    @rahulsachdeva7908 2 года назад +1

    Maza nahi aya harek video ka coding ka pdf hona chahiye banda video dekhne k baad step by step practical karke dekh sake

  • @Debasish-Kumar-Baidya
    @Debasish-Kumar-Baidya Год назад

    6/5/23 to

  • @developerstudentlife8420
    @developerstudentlife8420 2 года назад

    sir template ka code kaha milega sir practice ke liye to chahiye

  • @jitendramehta9528
    @jitendramehta9528 Год назад

    Which is better python or react js

    • @sudhirsingh35555
      @sudhirsingh35555 Год назад +1

      react js used for UI(frontend) and python framework django used for backend .....so it's totally depends on u whether u find designing things good or playing with database and solving logical problems

  • @Viralmems_xyz
    @Viralmems_xyz 10 месяцев назад

    sir notes send kr do

  • @ajinformation5105
    @ajinformation5105 2 года назад

    Sir please make videos of blender 🙏🙏🙏🙏🙏🙏♥️♥️♥️♥️♥️♥️🆗🆗🆗🆗🆗🆗🆗

  • @ajruchouhan3713
    @ajruchouhan3713 Год назад

    Please sir react native course upload

  • @rajatsharma8214
    @rajatsharma8214 Год назад +1

    kisi ne ye poora video dekh liya hai kya ?? agr han to plz btao k kya ye video se react ache se sikhi jaa skti hai ??