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


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

  4. What is React?

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

  6. Go to the main directory by typing cd app_name

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

  8. Understand the folder Structure

  9. Remove the Boiler Plate

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

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

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


  12. Hello World In React JS

  13. 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.

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



  15. 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

  16. 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"},

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

  20. Props in React JS

  21. Props Children????

  22. JS important Methods
    1. Map Method

    2. Spread Operator & Many More


  23. Events In React JS


  24. Todo List Projects 
  25. Here is the complete CSS file of Todo List





  26. Weather Application Project
  27. Here is the complete CSS file of Weather Application List




Get Complete Source Code Projects



Complete Code Resturant & Hooks

80 comments:

  1. Thanks for the source code. It was too helpful

    ReplyDelete
    Replies
    1. where is resturant css code plz tell me

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

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

      Delete
  2. Replies
    1. https://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css

      Delete
  3. 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. Bro No CSS For Restraunt Project

      Delete
    2. bro page open nhi horaha hai it is showing error

      Delete
    3. https://github.com/thapatechnical/reactjsByThapaTechnical

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

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


    Plz make it work

    ReplyDelete
  6. No css has been provided for restaurant app

    ReplyDelete
    Replies
    1. Then write your own css😊

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

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

    ReplyDelete
  8. 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
  9. https://github.com/thapatechnical/reactjsByThapaTechnical

    ReplyDelete
  10. 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
  11. Replies
    1. https://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/Resturant.js

      Delete
  12. https://github.com/thapatechnical/reactjsByThapaTechnical

    you will get full code except resturant css file.

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

    ReplyDelete
  14. Please provide CSS for restaurant app..plssssssssssssssssssssssssssssssssssssssss

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

    ReplyDelete
  16. 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
  17. Reactjs with firebase ka code bhejdo agr kisi ke pass h too

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

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

    ReplyDelete
  20. Thapa bhai pls update the code of Contact form with firebase

    ReplyDelete
  21. please share todo list ka .css file

    ReplyDelete
  22. sir can u please share your image file..

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

    ReplyDelete
  24. Thanks bro your React JS Tutorial very use full to learn

    ReplyDelete
  25. Excellent React Tutorial Thapa Ji....

    ReplyDelete
  26. sir please provide neflix css code
    please sir

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

    ReplyDelete
  28. how to add images folder to public folder in restaurant project

    ReplyDelete
  29. where is source code of real time firebase database!!!

    ReplyDelete
  30. .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
  31. https://github.com/thapatechnical/reactjsByThapaTechnical/blob/main/src/components/todoreact/style.css for todo

    ReplyDelete
  32. bhi firebase wala kha ha project plz give me a code

    ReplyDelete
  33. I am regularly following your videos and articles. This video is very useful for me. Thank you Vinod.

    ReplyDelete
  34. Unable to get html and css files

    ReplyDelete
  35. .navbar{
    padding-top: 50px;
    text-align: center;
    }
    https://github.com/thapatechnical/reactjsByThapaTechnical/blob/main/src/components/todoreact/style.css for todo

    .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;
    }
    enfblogs.com
    .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
  36. where is source code of "React JS with Firebase Tutorial In Hindi 2021"

    ReplyDelete
  37. bahi useState hook ki css file bhi koi bhej de plz

    ReplyDelete
  38. * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
    }

    html {
    background: #faf7f2;
    background-image: url(https://s3.postimg.org/s1n3ji1ur/paper_fibers_2_X.png);
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    }

    *,
    *:before,
    *:after {
    box-sizing: inherit;
    }

    .subtle {
    color: #aaa;
    }

    .main-card--cointainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 500px));
    grid-gap: 50px;
    justify-content: space-around;
    }

    .card-container {
    margin: 25px auto 0;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: space-around;
    align-items: flex-start;
    }

    .card-container img {
    max-width: 100%;
    height: 300px;
    }

    .card {
    background-color: #fff;
    padding: 30px;
    position: relative;
    box-shadow: 0 0 5px rgba(75, 75, 75, 0.07);
    z-index: 1;
    }

    .card-body {
    display: inline-block;
    }

    .card-number {
    margin-top: 15px;
    }

    .card-circle {
    border: 1px solid #aaa;
    border-radius: 50%;
    display: inline-block;
    line-height: 22px;
    font-size: 12px;
    height: 25px;
    text-align: center;
    width: 25px;
    }

    .card-author {
    display: block;
    font-size: 12px;
    letter-spacing: 0.5px;
    margin: 15px 0 0;
    text-transform: uppercase;
    }

    .card-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 60px;
    font-weight: 300;
    line-height: 60px;
    margin: 10px 0;
    text-transform: capitalize;
    }

    .card-description {
    /* display: inline-block; */
    font-weight: 300;
    line-height: 22px;
    margin: 10px 0;
    }

    .card-read {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 6px;
    margin: 5px 0 20px;
    position: relative;
    text-align: right;
    text-transform: uppercase;
    }

    .card-read:after {
    background-color: #b8bddd;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: 9px;
    width: 75%;
    }

    .card-tag {
    float: right;
    margin: 5px 0 0;
    border: 1px solid #aaa;
    padding: 5px 10px;
    cursor: pointer;
    }

    .card-tag:hover {
    background: #aaa;
    color: black;
    }

    .card-media {
    max-width: 100%;
    height: auto;
    }

    .card-shadow {
    background-color: #fff;
    box-shadow: 0 2px 25px 2px rgba(0, 0, 0, 1), 0 2px 50px 2px rgba(0, 0, 0, 1),
    0 0 100px 3px rgba(0, 0, 0, 0.25);
    height: 1px;
    margin: -1px auto 0;
    width: 80%;
    z-index: -1;
    }

    @media (max-width: 998px) {
    .main-card--cointainer {
    display: grid;
    grid-template-columns: repeat(1, minmax(200px, 500px));
    grid-gap: 50px;
    justify-content: space-around;
    }
    }

    /* ---------- Button styles ------------------ */

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

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

    /** button group styles **/
    .btn-group {
    border-radius: 1rem;
    text-transform: capitalize;
    }
    .btn-group__item {
    border: none;
    /* min-width: 6rem; */
    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;
    }
    .btn-group__item:last-child {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    }
    .btn-group__item:first-child {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    }
    .btn-group__item:hover,
    .btn-group__item:focus {
    color: rebeccapurple;
    box-shadow: inset 0px -20px 0px -15px rebeccapurple;
    }
    .btn-group__item:focus {
    outline: none;
    }
    .btn-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;
    }
    .btn-group__item--active:after {
    opacity: 1;
    transform: translatey(-2px);
    }

    ReplyDelete
  39. source code kha he ???????????????????????????????????????? kuch bhi kholo ye sala ek hi aa raha he chutiya he kya bsdk sahi sahi bolna ki nahi dalne vala to hum dhundhe hi nahi , pehle video me bolta he sab niche dunga or dekhate he ghanta hota he be dekh pehle ki kya he fir bol

    ReplyDelete
  40. nhi dena h source code to na do jhut ku bolte ho bsdk ...tumahr videos achhe hote h but jhut bol k gand mrwa lete ho tum....bol do bc nhi h source code kya ho jayega

    ReplyDelete
  41. However, what is common is that there are testers, tools and developers that are required to work with one another to complete the process for Quality Assurance. Wallstreet Play Boys

    ReplyDelete


  42. your article was amazing good job CS Thanks!!

    ReplyDelete
  43. am getting some problem in my navbar and section also

    ReplyDelete
  44. could someone please tell where is css file for weather app

    ReplyDelete
  45. Hello! The content you share is very good and helpful. I will pay more attention to planning.
    เกมส์สล็อต

    ReplyDelete
  46. Can anyone please share the source code of to do Project ?

    ReplyDelete
  47. why I am getting these warning in the console in browser: https://www.screencast.com/t/WMxheKEh
    ??
    Please let me know

    ReplyDelete