THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

React JS 17.0.2 in one video By Thapa Technical


Complete React JS Tutorial with 5 Projects In 2021




Steps, we will cover in our Complete React JS Projects 👇




  1. Install the Recommended version of NodeJS


    2. Click Node JS


  2. check the version of NodeJS node -v on cmd

  3. What is React?

  4. Install React JS in our system using " npx create-react-app app_name "

  5. Go to the main directory by typing cd app_name

  6. How to run the React Project 🤔 Oooo It's simple
    just write the npm or yarn start command

  7. Understand the folder Structure

  8. Remove the Boiler Plate

  9. What's New in React 17th Version? We will see it after our first component.

  10. Vs Code Extension to make our React life Easy
    1. VS Code JavaScript (ES6) snippets

    2. ES7 React/Redux/GraphQL/React-Native snippets


  11. Hello World In React JS

  12. Our First Component in React JS
    • Three things are mandatory & that are
      import React from "react"
      any one function (functional Component)
      It should always return JSX.

  13. After React 17.0 Version, Now no need to write
    import React from "react" Anymore



  14. What is JSX? Rules to write JSX.
    1. It always return single element

    2. use Div or React Fragment to wrap all your JSX Code

    3. ClassName in place of class

    4. Need to close all non closing Tags in JSX

    5. Use camelCase for attributes

  15. Autocomplete for React JSX 😍 Very Important
    1. Open the settings

    2. Open Setting(JSON) file located on Top Right Corner

    3. Add the following Code => "emmet.includeLanguages": {"javascript": "javascriptreact"},

  16. What is Nested Components?
    17. ;
  17. CSS in React JS

  18. Props in React JS

  19. Props Children????

  20. JS important Methods
    1. Map Method

    2. Spread Operator & Many More


  21. Events In React JS


  22. Todo List Projects 

    23. Here is the complete CSS file of Todo List





  23. Weather Application Project

    24. Here is the complete CSS file of Weather Application List




Get Complete Source Code Projects



Complete Code Resturant & Hooks

on

55 comments:

  1. Aayush's Light Of KnowledgeJuly 21, 2021 at 5:03 AM

    Thanks for the source code. It was too helpful

    ReplyDelete
    Replies
    1. UnknownJuly 25, 2021 at 4:40 AM

      where is resturant css code plz tell me

      Delete
    2. UnknownJuly 28, 2021 at 3:07 AM

      exactly...plz tell us where the css code of resturant project

      Delete
    3. Mayur RathorAugust 2, 2021 at 8:18 PM

      https://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css

      Delete
  2. sourav deyJuly 21, 2021 at 5:14 AM

    source code nehi mil raha ha

    ReplyDelete
    Replies
    1. UnknownSeptember 15, 2021 at 11:50 PM

      ha source code bata bhai

      Delete
    2. Saunak NandiOctober 6, 2021 at 11:28 AM

      https://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css

      Delete
  3. ThapaTechnicalJuly 21, 2021 at 5:48 AM

    Hope you all love the video Guys, For Complete Source Code please check look at the bottom of the page, You will find Get Complete Source Code Button. Click on it for the code ok :)

    ReplyDelete
    Replies
    1. UnknownJuly 21, 2021 at 8:00 PM

      Bro No CSS For Restraunt Project

      Delete
    2. My Daily,Weekly,Monthly blogsJuly 22, 2021 at 5:02 AM

      bro page open nhi horaha hai it is showing error

      Delete
    3. UnknownJuly 22, 2021 at 5:17 AM

      https://github.com/thapatechnical/reactjsByThapaTechnical

      Delete
  4. Aviral.KJuly 21, 2021 at 6:16 AM

    thank u

    ReplyDelete
  5. UnknownJuly 21, 2021 at 6:47 AM

    Unable to parse "/github.com/thapatechnical/reactjsByThapaTechnical": Not a valid repository path?

    ReplyDelete
  6. UnknownJuly 21, 2021 at 7:12 AM

    Unable to parse "/github.com/thapatechnical/reactjsByThapaTechnical": Not a valid repository path?


    Plz make it work

    ReplyDelete
  7. photostratorJuly 21, 2021 at 9:26 AM

    No css has been provided for restaurant app

    ReplyDelete
  8. UnknownJuly 21, 2021 at 10:43 AM

    Unable to parse "/github.com/thapatechnical/reactjsByThapaTechnical": Not a valid repository path?
    now what i do?

    ReplyDelete
  9. Mohammed RahimJuly 21, 2021 at 11:17 AM

    Bro whenever I clicked on that button I found this
    "Unable to parse "/github.com/thapatechnical/reactjsByThapaTechnical": Not a valid repository path?" error please resolve it.
    Thanks
    Regards
    Mohammed Rahim

    ReplyDelete
  10. HarshitJuly 21, 2021 at 12:33 PM

    https://github.com/thapatechnical/reactjsByThapaTechnical

    ReplyDelete
  11. Aayush's Light Of KnowledgeJuly 21, 2021 at 9:22 PM

    Just remove gist-it.appspot.com/

    ReplyDelete
  12. Saurabh KhandelwalJuly 22, 2021 at 12:15 AM

    Thapa Sir, kindly provide the restaurent app css file, because I want to add this project in my resume .
    and thank you very much aapse padhkar hee mene complete java script sikhi hai. aise hee awesome
    videos banate rahiye, mai last 2 months se daily 10 hrs only appke hee videos dekh raha hu.
    Thank you very much , aap ke channer purr jald hee millions me subscriber honge

    ReplyDelete
  13. UnknownJuly 22, 2021 at 12:59 AM

    css for restuant app

    ReplyDelete
    Replies
    1. Saksham MishraAugust 10, 2021 at 12:55 AM

      https://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/Resturant.js

      Delete
  14. UnknownJuly 22, 2021 at 1:31 AM

    https://github.com/thapatechnical/reactjsByThapaTechnical

    you will get full code except resturant css file.

    ReplyDelete
  15. UnknownJuly 24, 2021 at 2:34 AM

    thapa sir, resturant ka css file mil hi nhi rha h

    ReplyDelete
  16. Ayush MondalJuly 24, 2021 at 5:36 AM

    Thank you to sorce coasd

    ReplyDelete
  17. UnknownJuly 24, 2021 at 6:25 AM

    Thank you

    ReplyDelete
  18. UnknownJuly 25, 2021 at 4:42 AM

    resturant css code ???

    ReplyDelete
  19. Yash GuptaJuly 29, 2021 at 1:26 AM

    Please provide CSS for restaurant app..plssssssssssssssssssssssssssssssssssssssss

    ReplyDelete
  20. Yash GuptaJuly 29, 2021 at 2:02 AM

    Source code for restaurant app : https://github.com/thapatechnical/complete_react2021

    ReplyDelete
  21. UnknownAugust 2, 2021 at 11:19 PM

    are thapa bhai source code dhang se diya karo na sab projects ka. please bhai. aadha time to source code dhundne me chala jata hai.

    ReplyDelete
  22. UnknownAugust 4, 2021 at 7:30 AM

    Reactjs with firebase ka code bhejdo agr kisi ke pass h too

    ReplyDelete
  23. UnknownAugust 5, 2021 at 5:50 AM

    i need source code of covid 19 live tacker. please provide the link

    ReplyDelete
  24. LalitAugust 7, 2021 at 9:04 PM

    Guyz this is the source code for resturent
    https://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css

    ReplyDelete
  25. Digital Web ClubAugust 8, 2021 at 11:30 AM

    Thank you for sharing sach a amazing content also chcek website Design company in Dwarka

    ReplyDelete
  26. ChinmayAugust 19, 2021 at 3:25 AM

    Thapa bhai pls update the code of Contact form with firebase

    ReplyDelete
  27. UnknownAugust 24, 2021 at 4:31 AM

    please share todo list ka .css file

    ReplyDelete
  28. Sreenivasa RaoAugust 29, 2021 at 4:44 AM

    thanks bhai

    ReplyDelete
  29. sanjibAugust 30, 2021 at 1:05 AM

    hi card image not display

    ReplyDelete
  30. UnknownSeptember 2, 2021 at 7:47 AM

    sir can u please share your image file..

    ReplyDelete
  31. UnknownSeptember 9, 2021 at 7:52 AM

    CSS source code nhi mil rha?

    ReplyDelete
  32. pawan poudelSeptember 12, 2021 at 8:12 AM

    k /xa bro

    ReplyDelete
  33. Alvi MahmudSeptember 20, 2021 at 12:13 AM

    Bhai Source Code Kaha Hai Source Code Milna thoda easy kardete to video experience acha bajata

    ReplyDelete
  34. UnknownSeptember 21, 2021 at 11:34 AM

    Thanks bro your React JS Tutorial very use full to learn

    ReplyDelete
  35. ishanSeptember 22, 2021 at 10:37 AM

    Excellent React Tutorial Thapa Ji....

    ReplyDelete
  36. UnknownSeptember 25, 2021 at 9:03 AM

    sir please provide neflix css code
    please sir

    ReplyDelete
  37. UnknownSeptember 27, 2021 at 3:27 AM

    when i place npx create-react-app app_name this command then npm start is coming instead of yarn

    ReplyDelete
  38. manikyaSeptember 27, 2021 at 10:33 AM

    how to add images folder to public folder in restaurant project

    ReplyDelete
  39. UnknownSeptember 29, 2021 at 11:53 PM

    where is source code of real time firebase database!!!

    ReplyDelete
  40. UnknownSeptember 30, 2021 at 2:48 PM

    .navbar{
    padding-top: 50px;
    text-align: center;
    }

    .navbar h1{
    padding-bottom: 20px;
    text-transform: capitalize;
    }

    .button-group{
    border-radius: 1rem;
    text-transform: capitalize;
    }

    .button-group_item{
    border: none;
    padding: 1.5rem 3rem;
    background-color: rgb(255, 255, 255) ;
    cursor: pointer;
    margin: 0;
    font-size: 17px;
    box-shadow: inset 0px 0px 0px -15px rebeccapurple;
    transition: all 300ms ease-out;
    text-transform: capitalize;

    }
    .button-group_item:last-child{
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    }
    .button-group_item:first-child{
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    }
    .button-group_item:hover,
    .button-group_item:focus{
    color: rebeccapurple;
    box-shadow: inset 0px 0px 0px -15px rebeccapurple;
    }

    .button-group_item:focus{
    outline: none;
    }

    .button-group_item:after{
    content: "✓";
    margin-left: 0.5rem;
    display: inline-block;
    color: rebeccapurple;
    position: absolute;
    transform: translatey(10px);
    opacity: 0;
    transition: all 200ms ease-out;

    }

    .button-group_item--active:after{
    opacity: 1;
    transform: translatey(-2px);
    }

    ReplyDelete
  41. UnknownOctober 16, 2021 at 9:18 PM

    https://github.com/thapatechnical/reactjsByThapaTechnical/blob/main/src/components/todoreact/style.css for todo

    ReplyDelete

Subscribe to: Post Comments (Atom)
© ThapaTechnical 2018. By SoraTemplates | DSTB By MyBloggerThemes | FreeBloggerTemplates