React JS Tutorial For Beginners With React JS Project Step By Step Tutorial 2024

React JS Tutorial For Beginners With Project Step By Step Tutorial 2024 | Learn React JS and create To-Do List App react project in 1 hour.
❤️ SUBSCRIBE: ‪@GreatStackDev‬
Download the assets: drive.google.com/file/d/1TOFs...
In this single tutorial you will learn all basic concepts of react like, React Components, JSX Working, Rendering List in React JS, useState, useRef, useEffect in React, how to pass a props in React JS and Event handling.
After learning all these react JS concepts, we will also make a project using React JS. This will be a To-Do List app. In this to list react app you can save the task list to be done and you can also mark any task as completed or pending. We will use local storage of web browser to store the task list on web browser so that when you close the browser and open the app on your browser again, then your saved task list will be available.
You can use this React JS project in your resume / online portfolio and also for your college project.
After watching this React JS tutorial for beginner you will have practical knowledge of React JS and you can create your own front end web project in react like, Portfolio website, eCommerce website or social media website.
👉 React Introduction Tutorial: • What Is React (React J...
#ReactJS #ReactJsTutorial #ReactJsProject #GreatStack
-------------------------------------
Build more React JS projects:
Complete Ecommerce Website In React:
👉 • How To Create Complete...
Complete Portfolio Website In React:
👉 • How To Make Portfolio ...
Build ChatGPT Clone In React:
👉 • Build ChatGPT In React...
Build AI Image Generator with OpenAI In React
👉 • Build An AI Image Gene...
Create Weather App In React
👉 • How To Create Weather ...
----------------------------
Timestamp:
00:00 What you will learn
00:45 What is React
02:38 React Environment Setup
05:24 How React Works
06:46 React Components
09:20 How JSX Works
10:10 Rendering List
15:42 React useState Hooks
18:20 Passing Props
22:00 React useRef Hooks
27:35 Create To-Do list app using React JS
49:16 React useEffect Hooks
-------------------------------------
Recommended HTML and CSS Projects:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make personal resume website step by step:
► • How To Make A Website ...
-------------------------------------
Connect with me:
👉 linktr.ee/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack

[@endgaming4109]

Finally you say it is Basic consept of react. 🤯

[@UtiFavour]

I've been waiting for this!!! Thank you great stacks🙂

[@WillHype]

I've been followed you for a while now, you're really a great teacher ! I wish you all the best for your future you deserve it

[@user-my7uj9hb6b]

he's the best teacher ever wish him all the best too.

[@largatonguyemmanuelcouliba9827]

Thank you so much for this video ! You explain very well. Altough, I think beginners (like me) need more step by step tutorial to cover most used concept in react

[@bkishwarchavan7787]

Bhai yaar ek hi dil hai ....kitani bar jitoge.....❤❤❤❤❤........you are 😊😊😊😊 reason of this....thanks....

[@Xaviercomment586]

thanks! you're the reason why I do programming

[@con_el_maestro3544]

No, "YOU'RE" the reason I love programming

[@njtech826]

What r u doing here 🙄

[@edith8417]

Haaaaa😊😊😊😊😊😅😅😅😅😅😂😂😂😂😂finally seeing him programming

[@masudrana_360]

You entered everywhere😂

[@mervenurcifci2956]

thank you 💙 i officially learned react 🎈you are my hero ! i 'm glad chose this channel .

[@user-tc7gi8px2p]

This is by far the best react tutorial i have seen you have covered most of the things that too so easily hats off to you and thankyou so mych for such a informative content.

[@SandeepMR26]

I have been waiting to this ❤

[@nikhilsingh-te8hn]

Thanks, perfect 1 hr course.

[@Nandinichari222]

I like your videos you are explaining well , I can understand easily... Thank you so much ❤️

[@greentube2024]

Bro, many many thanks for this video.❤

[@varunpratapsingh6138]

Thank You Bro !! Really Its Great Tutorial

[@IllIIIIIIllll]

Wow your channel is gold, thank you🙏.

[@user-fx5uo7uz7p]

a nice one fellow this makes things a bit clearer the whole thing reminds me of lambdas in c++

[@user-fx5uo7uz7p]

this is a fine tutorial thank you kind sir

[@drexk6569]

thank you❤ I owe you a lot

[@giga_dev]

Great tutorial, thanks

[@Hedi_Developer]

Hi Sir, I love your videos i learned many things from you thank you sir....🙌

[@nadetdevfullstack7041]

Excellent !

[@ControllerCommand]

Can you please make a long video for beginners on JavaScript > React > Next.js. So many people want to learn but we need a long video where Instructor starts from JavaScript fundamentals then React and then Next.js. In the end a complete project will be icing on the cake.

[@r0ck3th76]

ditto

[@RomaMdau]

he has already done that

[@ashutosh_tiwari]

I remember this channel, this is the channel where I first started learning HTML/CSS when I was in my 8th Standard, back then it's name was easy tutorials. Your tutorials are really very easy and understandable so please keep making these videos. And one suggestion would be that, try to make videos on trending topics with more complex and good looking projects. Like you can create a beginner, intermediate and advanced playlist on React, Tailwind, Framer Motion etc. Ohh I forgot to mention that now I'm in College 2nd year doing BCA.

[@a.hgaming2416]

Hello bro

[@a.hgaming2416]

My name is ankit

[@a.hgaming2416]

I am a BCA 3 year student

[@ashutosh_tiwari]

@@a.hgaming2416 now I'm in my 3rd year as well.

[@naeemahmad-gm3bi]

You are a very good teacher. Made it easy to learn React. Lots of thanks from Lahore

[@charindujayanath3612]

Thanks a bunch❤

[@josphatbaraka]

Big up, you have sharpen ❤

[@JonathanSantos-ut1gc]

Thanks

[@saurabhpatil9469]

Thank you sir for the great knowledge 🙏🙏🙏

[@mern_stack662]

thank you Sir👏👏😍😍

[@user-dj8fj4td4m]

Thank you best vidios & chanel

[@temcode]

GREAT STACK YOURE THE BEST AND I HAVE BEEN FOLLOWING YOU SINCE EASY TUTORIAL ... PLEASE CAN YOU MAKE A VIDEO ON INFINITE SCROLL WITH CARD IMAGES .. PLEASE

[@BouQssim]

that's very useful, thank you

[@GreatStackDev]

Glad it was helpful!

[@redsokkatech]

God❤ Live long Sir 🙏🏻.....This helps me lot

[@motivation-ej6zt]

Thnxxx

[@kashifahmed_1995]

I will learn react only by doing Projects and reading blogs. We can not learn React only by pen and paper. Thanks for the project

[@Johnathan_.]

Brother.. You are just awesome! I made my portfolio website with your tutorial and got a job.. Thank you soo much.

[@Johnathan_.]

With your project based studies.. I was able to see how each elements tag function.. And this is the way every student should learn coding.

[@SukeDom_YT]

If you dont mind, can u share ur portfolio website

[@GreatStackDev]

Glad to hear Nithin. Congratulations...!!!

[@ashishsen5956]

Bro what is the package you got? 🎉

[@sanwicklithchristophermkal7668]

Really educative content...! much appreciated

[@GreatStackDev]

Glad you liked this react js tutorial

[@sa35085nhs]

thank you...

[@vsankar]

Thank You Sir💛💛💛

[@GreatStackDev]

Always welcome

[@chessmaster856]

The best tutorial

[@shashiraj6226]

i am really amazed to see this . thank you

[@yudit2086]

new sub here

[@sabbirhossainakil2338]

Next js ecommerce website design plz😢

[@heydsu]

❤

[@istvanbiczyk9632]

Great tutorial, thank you for making it! Where can I find the png images please?

[@GreatStackDev]

Thanks Istvan, I have just added the google drive link in the description to download the icons.

[@istvanbiczyk9632]

@@GreatStackDev Thank you very much! What would be your recommendation for deploying this project? I have used Heroku before but I'm not sure if it's the best for a React application.

[@hrushikway]

@@istvanbiczyk9632vercel

[@hopeasusi5306]

Could you please disclose the dimensions of the asset elements. Are they 24x24, 72ppi, 32bit? Svg or pure .png? Since I'd love to draw them myself.

[@16gowtham.s28]

I want React js basic to advance video

[@isidoramoonrose5657]

Honestly little too much for a beginner tutorial but thanks anyways . Learned a lot :)

[@rashmithagudipudi5979]

Thank you sir, for making videos on react. could you please do a video on how connect firebase for authentication in react.

[@GreatStackDev]

Thanks for your comment, I will try in upcoming videos.

[@drexk6569]

can you dedicate a video on how to fetch api

[@user-gf6yd3ug2r]

Please is this the same guy from Easy Tutorial?? NIce Video, Thanks.

[@adeelsuleman7753]

Thanks sir Sir why to create todoscount for local storage when have all data set in local storage

[@nikhilsingh-te8hn]

Please create courses on just creating front end layouts without any backend. If possible ~1Hr : ). As an mid level developer I am comfortable with backend but its the front end like layout, align, grid etc which takes a lot of time for me.

[@Aashiqui-pf7ni]

hi sir actually its lot more for a beginer like useEffect ,localstorage so still need some clarity but thats for the video but i can't delete all the data (todos)

[@PrashantMalviya-jk8vp]

sir useEffect and useState per ek seperate video please

[@VikasRajput_98]

❤❤❤

[@shashiraj6226]

please upload node js also we will be thankfull to u very much

[@drexk6569]

Please dedicate a video on react router

[@AtharvShreshtha]

I am getting uncaught typeerror cannot read properties of undefined (reading 'useref') error after using route.

[@abumdnayeemkhan7211]

❣❣❣

[@user-hr2ye6tf8x]

I'm new to react.. This is enough to creating projects in react?

[@user-yx3qr5if7x]

This is definitely not a beginner friendly tutorial, especially the project part of it but anyway thanks for making this video!!

[@mohdabid8499]

Please creat trading application with react js

[@atiyabali3518]

I am Getting an error ...as we have used setItem but you haven't initialised the useState for setItem, but you didn't get this error how?

[@remember.772]

U miss something when we add alot task the list is gonna leave the height of the Todo div and it become on the body

[@jaideepkalakoti4752]

Can u make a video on a podcast streaming website using react

[@BirasaEmmanuel-pm4xt]

why is mine not opening like after i click java script + SWC no folder is created why?

[@kuldeeprawat328]

When the page is reloaded, your component will be remounted. Without the first useEffect, the todos state will be re-initialized to an empty array []. Then, the second useEffect will run, as it still exists in your code. However, since the todos(state variable) state is now an empty array, the localStorage.setItem("todos", JSON.stringify(todos)) line will store an empty array in localStorage under the key "todos". As a result, when the page is reloaded, the todos state will be initialized as an empty array, and the data in localStorage under the key "todos" will also be an empty array. This behavior will cause any previously saved todos to be lost because they were not loaded into the todos state during component initialization. Was this explanation technically correct?

[@chenuladulnith2285]

Joomla website create please ❤

[@spartondon3591]

47:00😊

[@user-ou1hg1eg9e]

Sir i have been assigned to create a website on freelancer marketplace and project management tool using html and css . But i don't have any idea how should it look like . Will you please make a video for this ?

[@GreatStackDev]

You can take a design reference of fiverr.com for freelancer website design and asana.com or trello.com for project management tool design. Inspecting their source code will help you a lot in your development process.

[@govindsheshadri7254]

If bro had used npx create react app this video woud have been in two parts

[@React1007]

plz make expense tracker and e commerce project as fast u can

[@cruzinsweetsntreats]

As of February 13, 2024 for LTS: node-v20.11.0 (includes npm 10.2.4)

[@61mohamedathil99]

hello sir i have a doubt why you use javaScript + swc

[@akoladebode-ajayi327]

sir please i was confused because when you created the todo.jsx folder you didn't update it inside the main.jsx, it made me to stress my self as a react beginner 😭😭😭

[@jank8456]

what is your color theme and icons in vs code?

[@GreatStackDev]

brackets theme

[@abhishekKUMAR-ij7nw]

which extension are you using for snippets

[@abhishekKUMAR-ij7nw]

@@DevKumar-hs4dr thanks

[@ahmedamin8134]

importing navbar doesnt works for me

[@shubhamsonar5689]

when i click on without adding text add button it added as empty how to fix this in your video this logic is not available

[@popoolarahmat2127]

my portfolio

[@bbcguy8327]

how to install the extension that supported rfac?

[@srinitya537]

es7 extension from extensions

[@moonlighttv777]

rafc = which extension do you use.

[@DipakShende-oe9pn]

Es7 react/redux snippets

[@user-pv2pn3uo9i]

I want to Create ecomm

[@ifeomadymphna]

Please Reply me, am Having issues when I typed mom run dev They keep saying a node modules called roll up not found and bunch of error I have clear cache and install again

[@ifeomadymphna]

@@DevKumar-hs4dr how

[@ifeomadymphna]

@@DevKumar-hs4drhow

[@Disruptiveb]

In my Asset folder there's no image. How do i get the image you use in the asset folder

[@dimasbajuri]

There is a google drive link in the description, download it

[@AmirKhan-vg4br]

Npm warn deprecated error 😢

[@omarbarbeir9887]

Number is not updated it is 0

[@dude-ox2em]

The explanation in the video is very good but the topics are not explained elaborately . He explains the contents but what,why etc are not explained. The main objective of this video is to make the students ready to make a simple App rather than to make them understand the stuffs what they do and why they do.

[@shubhamsonar5689]

const add = () => { const newTaskText = inputRef.current.value.trim(); if (newTaskText === "") { // Don't add empty tasks return; } setTodos([ ...todos, { no: count++, text: newTaskText, display: "" }, ]); inputRef.current.value = ""; localStorage.setItem("todos_count", count); }; i updated the add function 😁

[@anishhazra2204]

where is assets link???

[@GreatStackDev]

just now added in the description, please check

[@anishhazra2204]

thank you sir@@GreatStackDev

[@anishhazra2204]

sir could you make complete MERN stack tutorials also :) i really like your tutorials@@GreatStackDev

[@endgaming4109]

Bro i got one issue

[@tsdonalds1668]

List the issue

[@01_abhijeet49]

It wouldve been better if you didnt just type the code and explained it a little more

[@SuryaPrakash-cw9wd]

Do You learning or did we learning ????

[@SigmaDomination]

This is not that good for the beginners. Explaining was bad

[@SandeepSharma-us4ix]

hey @GreatStackDev can you please share the source code i am getting error in deleting the todo