Complete React JS Tutorial with 5 Projects In 2021
Steps, we will cover in our Complete React JS Projects 👇
- Install the Recommended version of NodeJS
- check the version of NodeJS node -v on cmd
- What is React?
- Install React JS in our system using " npx create-react-app app_name "
- Go to the main directory by typing cd app_name
-
How to run the React Project 🤔 Oooo It's simple
just write the npm or yarn start command - Understand the folder Structure
- Remove the Boiler Plate
- What's New in React 17th Version? We will see it after our first component.
-
Vs Code Extension to make our React life Easy
- VS Code JavaScript (ES6) snippets
- ES7 React/Redux/GraphQL/React-Native snippets
- Hello World In React JS
-
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.
- Three things are mandatory & that are
- After React 17.0 Version, Now no need to write
import React from "react" Anymore -
What is JSX? Rules to write JSX.
- It always return single element
- use Div or React Fragment to wrap all your JSX Code
- ClassName in place of class
- Need to close all non closing Tags in JSX
- Use camelCase for attributes
- Autocomplete for React JSX 😍 Very Important
- Open the settings
- Open Setting(JSON) file located on Top Right Corner
- Add the following Code => "emmet.includeLanguages": {"javascript": "javascriptreact"},
- What is Nested Components? ;
- CSS in React JS
- Props in React JS
- Props Children????
- JS important Methods
- Map Method
- Spread Operator & Many More
- Events In React JS
- Todo List Projects
- Weather Application Project
Click Node JS
Here is the complete CSS file of Todo List
Here is the complete CSS file of Weather Application List
Get Complete Source Code Projects
Complete Code Resturant & Hooks
Thanks for the source code. It was too helpful
ReplyDeletewhere is resturant css code plz tell me
Deleteexactly...plz tell us where the css code of resturant project
Deletehttps://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css
DeleteThanks for such kind info... grt sir
Deletesource code nehi mil raha ha
ReplyDeleteha source code bata bhai
Deletehttps://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css
DeleteHope 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 :)
ReplyDeleteBro No CSS For Restraunt Project
Deletebro page open nhi horaha hai it is showing error
Deletehttps://github.com/thapatechnical/reactjsByThapaTechnical
Deletethank u
ReplyDeleteUnable to parse "/github.com/thapatechnical/reactjsByThapaTechnical": Not a valid repository path?
ReplyDeleteUnable to parse "/github.com/thapatechnical/reactjsByThapaTechnical": Not a valid repository path?
ReplyDeletePlz make it work
No css has been provided for restaurant app
ReplyDeleteThen write your own css😊
Deletehttps://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css
DeleteUnable to parse "/github.com/thapatechnical/reactjsByThapaTechnical": Not a valid repository path?
ReplyDeletenow what i do?
Bro whenever I clicked on that button I found this
ReplyDelete"Unable to parse "/github.com/thapatechnical/reactjsByThapaTechnical": Not a valid repository path?" error please resolve it.
Thanks
Regards
Mohammed Rahim
https://github.com/thapatechnical/reactjsByThapaTechnical
ReplyDeleteJust remove gist-it.appspot.com/
ReplyDeleteStill not working
DeleteThapa Sir, kindly provide the restaurent app css file, because I want to add this project in my resume .
ReplyDeleteand 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
bro did you get the css file of restaurant? please LMK!
Deletefound it
Deletecan u share the css file
Deletecss for restuant app
ReplyDeletehttps://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/Resturant.js
Deletehttps://github.com/thapatechnical/reactjsByThapaTechnical
ReplyDeleteyou will get full code except resturant css file.
wow,
Deleteits working
thapa sir, resturant ka css file mil hi nhi rha h
ReplyDeleteThank you to sorce coasd
ReplyDeleteThank you
ReplyDeleteresturant css code ???
ReplyDeletePlease provide CSS for restaurant app..plssssssssssssssssssssssssssssssssssssssss
ReplyDeleteSource code for restaurant app : https://github.com/thapatechnical/complete_react2021
ReplyDeleteyes got it,Thank you Yash :)
DeleteAre bhai css wali link kaha hai?
Deleteare thapa bhai source code dhang se diya karo na sab projects ka. please bhai. aadha time to source code dhundne me chala jata hai.
ReplyDeleteReactjs with firebase ka code bhejdo agr kisi ke pass h too
ReplyDeletei need source code of covid 19 live tacker. please provide the link
ReplyDeleteGuyz this is the source code for resturent
ReplyDeletehttps://github.com/thapatechnical/complete_react2021/blob/main/src/component/Basics/style.css
dsdsa
DeleteThank you for sharing sach a amazing content also chcek website Design company in Dwarka
ReplyDeleteThapa bhai pls update the code of Contact form with firebase
ReplyDeleteplease share todo list ka .css file
ReplyDeletethanks bhai
ReplyDeletehi card image not display
ReplyDeletesir can u please share your image file..
ReplyDeleteCSS source code nhi mil rha?
ReplyDeletek /xa bro
ReplyDeleteBhai Source Code Kaha Hai Source Code Milna thoda easy kardete to video experience acha bajata
ReplyDeleteThanks bro your React JS Tutorial very use full to learn
ReplyDeleteExcellent React Tutorial Thapa Ji....
ReplyDeletesir please provide neflix css code
ReplyDeleteplease sir
when i place npx create-react-app app_name this command then npm start is coming instead of yarn
ReplyDeletehow to add images folder to public folder in restaurant project
ReplyDeletewhere is source code of real time firebase database!!!
ReplyDelete.navbar{
ReplyDeletepadding-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);
}
https://github.com/thapatechnical/reactjsByThapaTechnical/blob/main/src/components/todoreact/style.css for todo
ReplyDeletebhi firebase wala kha ha project plz give me a code
ReplyDeleteI am regularly following your videos and articles. This video is very useful for me. Thank you Vinod.
ReplyDeleteUnable to get html and css files
ReplyDelete.navbar{
ReplyDeletepadding-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);
}
u r awesome
ReplyDeletewhere is source code of "React JS with Firebase Tutorial In Hindi 2021"
ReplyDeletebhai kuch mila ?
Deletebahi useState hook ki css file bhi koi bhej de plz
ReplyDeletecc
ReplyDelete* {
ReplyDeletemargin: 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);
}
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
ReplyDeletenhi 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
ReplyDeleteHowever, 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
ReplyDeleteyour article was amazing good job CS Thanks!!
am getting some problem in my navbar and section also
ReplyDeletecould someone please tell where is css file for weather app
ReplyDeleteHello! The content you share is very good and helpful. I will pay more attention to planning.
ReplyDeleteเกมส์สล็อต
Can anyone please share the source code of to do Project ?
ReplyDeletewhy I am getting these warning in the console in browser: https://www.screencast.com/t/WMxheKEh
ReplyDelete??
Please let me know
Thanks Bro!
ReplyDeleteimages m problem aari sir
ReplyDeletejjhjhkfsk
ReplyDeleteYour React tutorial video is awesome.
ReplyDeleteipowala
hi thapa sir i need help for running 1st app as i type yarn start it shows following error....
ReplyDeleteyarn : The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path
was included, verify that the path is correct and try again.
At line:1 char:1
+ yarn start