Learn React JS Fundamentals With Project | React Tutorials for Beginners

Подписаться 80 тыс.

Просмотров 127 тыс.

50% 1

In this video we are going to learn about React JS Fundamentals from scratch. This video course is specially if you are planning to learn React in 2021 as a beginner. We will build a contact manager application using all the basics of react. You will find the topics covered in the timestamp below.
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
**Checkout these video to understand better**
JavaScript this Keyword - • JavaScript this Keywor...
JavaScript ES6 Arrow Functions - • JavaScript ES6 Arrow F...
JavaScript Higher Order Functions & Arrays Methods - • 13 Must Know JavaScrip...
JavaScript ES6 Destructuring - • JavaScript ES6 Destruc...
**Github link for Reference**
github.com/dmalvia/React_Tuto...
🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:10 - Application Demo
0:01:35 - What will you learn in this video ?
0:02:16 - Setup
0:03:03 - Create React App
0:04:27 - Start React Development Environment
0:04:45 - Understand React App Folder Structure
0:07:40 - Contact App Folder Structure/ Components
0:09:18 - React "Hello World" Components
0:09:35 - Adding Sematic UI to Project
0:10:26 - Understand React Components
0:12:15 - React JSX
0:13:24 - Function Component
0:15:23 - Class Component
0:19:37 - Rendering List in React
0:20:32 - Props - Pass data from parent to child
0:21:00 - Access Props
0:23:16 - Reference variable in JSX
0:25:00 - Adding In-line Style
0:27:39 - Add images in React
0:29:08 - useState React Hook
0:33:26 - Pass Function as Prop
0:34:34 - Update the State using setState()
0:36:30 - useEffect React Hook
0:46:23 - Enhancement in next video
0:46:58 - Outro
**More videos**
JSON Crash Course - • Learn JSON in 25 Minut...
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my crash courses for get started with web development**
JavaScript Tutorial For Beginners | Part 1 - • JavaScript Tutorial Fo... JavaScript Tutorial For Beginners | Part 2 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 3 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 4 - • JavaScript Tutorial Fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / dipesh.malvia
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Tags ⭐️
- React
- React Tutorial
- React JS Crash course
- React Project
- React For Beginners
⭐️ Hashtags ⭐️
#React#Beginners#Tutorials
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 200

@DipeshMalvia 3 года назад

Guys, if you feel this video was helpful in any sort than please hit the like button and subscribe channel. Need your support to keep myself motivated😎

@masnunahmedsporsho612 3 года назад

bro are u a professional developer?

@ramubhukya3238 2 года назад

How to communicate this application to firebase database? Pls explain for this problem👏👏

@DaniyalKhan-hk4uf 2 года назад

I have facing a problem when I access props there is nothing shown on my localhost when I run in console.log its show data

@TheHelpOfNS 2 года назад

Bro really awesome... explanation...can you please make a vedio crud operation using functional components........we will support you..plz share your details.... thanks bro 💕💕💕💕💕💕👍

@faizanali-gr8yx 2 года назад

sir useEffect to retrieve data back from local storage not working when i refresh page

@Abogida11 3 года назад

I love this tutorial, clear and to the point, the only Issue is why you need to mix class with functional component, I am trying to change the class comp. to FC butting getting some issues already.

@prasannanaik1023 Год назад

Really great video so far I found for react js project. From the beginning the way you started by first building basic components and then by using react concepts building functionality one by one really helped a lot for me . Thanks

@ProssCraft Год назад

I usually don't comment vidoes on YT, but this time I need to say I really appreciate your content and time given to those projects, they are very helpfull :)

@johnherrera5913 3 года назад

Master! Great build, so much value condensed into a small amount of time!

@DipeshMalvia 3 года назад

Glad you liked it!

@ecemonkol1653 Год назад

Thank you for the great tutorial. This one is the most helpful I found so far.

@MohitKumar-tn1cf 2 года назад

It was going good to learn!! thanks

@Crickeuzz Год назад

You are doing great work i appreciate it ,thanks all about your efforts.

@felipebatista7469 2 года назад

i am from brazil, thanks for the video bro!! helps a lot!

@abhimanyuarora9262 2 года назад

I am *gonnu* like this video for sure :)

@drmr_mist 3 года назад

Hello Dipesh, great video! I am wondering how would u increment id prop without using uuid?

@TechnicalHeaven 2 года назад

Nice tutorial Dipesh, I learn a lot 👌🔥

@sherinfernando2720 3 года назад

Your tutorial is amazing,Way to go !! 🔥 It would be great if you had a project with context API too. Just a suggestion. :)

@DipeshMalvia 3 года назад

Noted! I have a whole bunch of videos covering all topics of React. You will see more in coming months. Thanks!

@hitechofficial 2 года назад

please upload tutorial series and project building in next js please thanks. Your way of teaching is awesome

@vinothkumars7421 3 года назад

To the point explanations .. Love it...Way to go brother

@DipeshMalvia 3 года назад

Glad you liked it!

@nandagopal375 Год назад

Thank you for providing valuable information sir 🙏🙏🙏

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

Thanks for this great video, you can make more complex app with React Sir. you are a great instructor

@AT-rg4el 2 года назад

great you are bro....keep going on.

@blosq2673 3 года назад

I'm from Kyrgyzstan , bro you helped me a lot!!! Forward only forward

@DipeshMalvia 3 года назад

Thanks buddy. More videos to come😊

@ambushtunes Год назад

Thank you man...you really helped me out. I was able to merge this with a ruby backend.

@DipeshMalvia Год назад

Excellent!

@Redstarcrew 3 года назад

Could you please show us how to code Addcontact as a function instead of a class?

@swethasandeep3025 3 года назад

This video is really helpful to learn react. Its crisp and clear. Thankyou for your effort

@DipeshMalvia 3 года назад

Glad you enjoyed it!

@joe86569 Год назад

evidayum malayalee 😆

@girishpandey9976 Год назад

Hey guys you done the good job and keep it up

@ronaldrendessyrealtormba8824 3 года назад

Hi there!! I look forward to watching your instructional video!!

@DipeshMalvia 3 года назад

Thanks! Hope it's helpful!

@diwakarsingh68 3 года назад

Hi Dipesh, You are great!!. This video really helpful for me.

@DipeshMalvia 3 года назад

Glad it was helpful!

@Avatar-Roku Год назад

24:48- at this point I am facing some trouble...my jsx component when I copy and paste in ContactCard shows that the map elements are not defined. should I use props and transfer these to this component?

@narayanankanchipuram1468 2 года назад

Hey Dipesh, your service is so useful, thanks for your videos, please do lot of videos like this, it is most useful people like me,

@DipeshMalvia 2 года назад

Sure I will

@dineshkumar8893 3 года назад

Best content, your explanation was so easy tp understand the working principles

@DipeshMalvia 3 года назад

Glad you enjoyed 😊

@pendhotapavankumar7297 2 года назад

Thanks for the support 🔥 to us sir, i have a doubt in my project? that is how to add navigation as well as sidebar , here i'm adding navigation but sidebar? please help me, how to do?

@sujairsuhaim2769 10 дней назад

Useful brother do not stop your works❤

@DipeshMalvia 10 дней назад

Thank you, I will

@LinkEX 3 года назад

Awesome commentary and great tutorial! The only thing that really did grind my nerves was the recurring Microsoft window alert sound. It's obnoxious enough by itself, but being so much louder than your voice recording didn't make things better 😅

@LinkEX 3 года назад

You might want to consider either turning it off in the future. You can even remove them in post-production by using Audacity - this works pretty nicely by using voice sampling IIRC.

@dhanyakrishnan5795 3 года назад

It is great tutorial I could ever see , just a suggestion if you decrease your speed a little bit it will more convenient as it made me pause and do it again but expecting more tutorial for MERN stack too

@joe86569 Год назад

evidayum malayalee 😃

@Redstarcrew 3 года назад

Thanks a lot for the video my friend!

@DipeshMalvia 3 года назад

My pleasure!

@alionabusuioc5772 3 года назад

Hi, it is very great course, but can you please rewrite the AddContact component also on Hooks and leave it in a comment ? Thank you in advance :)

@bilalshuja131 3 года назад

35:01 you remove &&(and operator) and write ||(or operator) but its still not working and adding empty fields

@empowercode 3 года назад

Hey Dipesh, nice to meet you! I just found your channel and subscribed, love what you're doing! I like how clear and detailed your explanations are as well as the depth of knowledge you have surrounding the topic! Since I run a tech education channel as well, I love to see fellow Content Creators sharing, educating, and inspiring a large global audience. I wish you the best of luck on your RU-vid Journey, can't wait to see you succeed! Your content really stands out and you've put so much thought into your videos! Cheers, happy holidays, and keep up the great work!

@DipeshMalvia 3 года назад

Glad you enjoyed. Thanks a lot for a such a nice comment. Highly appreciated ☺️

@empowercode 3 года назад

@@DipeshMalvia No problem, keep up the great work!

@tomasburian6550 2 года назад

Bro! I came here to learn how to delete items and refresh the list and you didn't disappoint! Thanks a lot.

@DipeshMalvia 2 года назад

Glad I could help!

@ankitkumar-bg7dr 4 месяца назад

Could you please share which company and model headphone you are using?

@hiteshsuthar1097 2 года назад

Dil ❤️ maange more 🔥

@saitejapendli7036 3 года назад

Bro,where i can import this delete icon.instead this icon we can put button for this ??

@naveenkumarkota2090 Год назад

@dipesh i think error in contact card saying props.clickhandler is not a function

@ankitrikame336 3 года назад

Great 💯

@ravinorthland 2 года назад

Good tutorial 😀

@JustVinayadav Год назад

so easy like a todo application

@debrad.castleberry2457 3 года назад

Nice Explanation. Subscribed. Love from Pakistan 🇵🇰

@DipeshMalvia 3 года назад

Thankyou so much! Welcome to the family 🙂

@Ali_Cook20 9 месяцев назад

Hi Dipesh . Can you say me about your course ? If i do this project and others . Will i be a junior or middle react developer? Thanks for your reply.

@anubhapant5227 2 года назад

Please make more videos on such kinds of projects on React.

@DipeshMalvia 2 года назад

Sure! Keep watching!

@jayprakashsingh6327 2 года назад

Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version.

@anilkumardas7662 2 года назад

Sir give me solutions..... how to cheack localstroage is empty or not ? (If the localstroage is empty simple write please add data other wish localstroage data will write )

@KaranKumar-bp4hu 8 месяцев назад

@DipeshMalvia Sir, Please before statring a project clear the flow of data , it would easy to understand the complete code at very efficient time

@keerthanachennamsetty2322 Год назад

Bro, Can you make a video for showing how real time react project will be

@veeramuthur Год назад

Thanks its very helpful

@DipeshMalvia Год назад

You're welcome

@bhoomikasb147 2 года назад

Can you please also help me to edit the data from local storage....

@basamalhassan7006 3 года назад

Thanks a lot for this tutorials. Please can you make advance react tutorials. Thanks in advance

@DipeshMalvia 3 года назад

Sure, more videos on React are on the way. Publishing React Router on Tuesday. Stay Tuned.😊

@46aniketchandivkar82 Год назад

I'm just starting react so Can I begin with this?

@sarojakulkarni1030 2 года назад

LOVELY VIDEO SIR

@DipeshMalvia 2 года назад

Thanks a lot

@jasoncysiu 3 месяца назад

Why do we use class component for addContact?

@nitinworldwide 2 года назад

the video was good but bit confusing bcoz of contacts name defining props child to parents it should have more time on this parts

@masnunahmedsporsho612 3 года назад

good job

@programmer5475 Год назад

Thank you for theReactJS video series. It makes learning React JS way simpler. But while implementing this application, I was struck in useEffect part. I was not able to restore values on reload. After debugging, I came to know that useEffect was running twice due to React.StrictMode. This issue makes me do some research on it and one additional point that has been added to my React knowledge is that for security purposes, StrictMode forces every component to render twice. Thank you again!

@DipeshMalvia Год назад

This happens in React 18 so I have a video how to make the code work please check - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vApTJpRqyx4.html

@bankauday7784 2 года назад

how to fix the vulenrablities while downaloding packages??

@darjipavan5112 2 года назад

Sir , javascript me interview questions answers ki new series banaiye please ( theory, practical examples )

@2784raj 3 года назад

hi, Dipesh love they way you explain the code , can you guide where is second part of this contact app ?

@DipeshMalvia 3 года назад

Hey Raj, the second part is the next video React Router, after that it's React Axios CRUD and last is Search Filter. Playlist link - ru-vid.com/group/PLTP3E5bPW7944Ec1lfXzavqRHzxY5FigD

@2784raj 3 года назад

@@DipeshMalvia thanks you are Legend, I will highly recommend to my colleagues who wants to learn react,

@DipeshMalvia 3 года назад

@@2784raj : Thanks, my channel needs support. Happy Learning 😃

@busrakara4929 3 года назад

thank you!

@DipeshMalvia 3 года назад

You're welcome!

@chanelj5072 2 года назад

Hello, I keep on getting this error 'Uncaught RangeError: Maximum call stack size exceeded' it is shown in the console when I try and add a contact. How would I fix this?

@DipeshMalvia 2 года назад

Please use the reference code for comparison.

@9a56mahabirjaiswal9 Год назад

It becomes difficult to do usestate in class component for those who are engineers .You should atleast also show the usestate with functional component then should move to usestate with class component

@neets7519 2 года назад

Amazing video

@DipeshMalvia 2 года назад

Thanks!

@jhunconsole8492 3 года назад

What are the cons and pros of using classbase components vs functional components?

@DipeshMalvia 3 года назад

Hi Jhun, I don't have a straight and small answer for your question but they both have their props and cons. Also function components with React Hooks are getting popular as a modern way of building components. I found an article that would be a good read to understand about both type of components and their pros & cons. Article - www.twilio.com/blog/react-choose-functional-components

@niravsanepara3934 Год назад

props.clickHandler is not function error shows plz help !!!!

@bhukyaramu7047 2 года назад

Hii sir,can you explain about Employee details like employee list and employee list item and title of the employee and description of the employees using crud operation.

@DipeshMalvia 2 года назад

I have a CRUD operation video for this contact app you can use it as a reference and but your own Employee project - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-59z1_3-vTOk.html

@sandeeppinasimham8000 3 года назад

Class name not getting applied what is ui class?

@pk_officl 2 года назад

You just taught short and sweet all things what I have learnt from 100 videos. You have fulfilled the starting level. This should be a first try for every React beginners. I can't import uuid from uuid4. Have anyone faced this issue kindly post the solution.

@HARSHKUMAR-fi5fr Год назад

same here

@dhanyakrishnan5795 3 года назад

hey brother what is that ui classes? are we importing anything?

@bharathbellamkonda 2 года назад

yes when we import stylesheets from such semantic ui's we can use classes as such

@manishkuswhaha2563 Год назад

Today I tried to implement the same app but the local storage functionality is not working. DATE: 09-07-2022

@inevitableman4159 Год назад

Have you solved that problem?

@5minupsc723 Год назад

how to add update functionality in the code

@gkmishra2009 3 года назад

Best sir

@DipeshMalvia 3 года назад

Thanks!

@apoapo521 2 года назад

im beginnner and very good tutorial but i cant start the projekt

@rishabhprabhakar6009 Год назад

not able retrive the data

@abhishekshivgan1884 Год назад

Same here!

@ankitapandey8655 Год назад

Same 😢, can't even figure out why it's not happening

@ishaneemandal9783 Год назад

Only form is visible in my case .....and when am adding new contacts nothing is added to the contact list !!

@dev49433 2 года назад

in the trash icon fuction you can say only e.target.parentelement.remove this its coffuse Eng

@yaseenimuhammadraja9461 2 года назад

Can I get Source code for full project Not only for this video but all source code for multiple video's related to this crud I think you post multiple video's parts of this project

@imprasna2539 Год назад

Dipesh, the localstorage is not working for me

@rudragoudapatil5913 2 года назад

I needed to install util to run uuidv4 Later again I am getting error of maximum storage exceeded Can you please help me out from this.

@akhilaakki4912 9 месяцев назад

Yes how to solve this

$@in2fractalout$

@in2fractalout 2 года назад

powerful

@krishnatejaAkella 2 года назад

How to do reports in react any tutorial bro

@aayush9752 4 месяца назад

i don't know basics of react js is it good for me

@narensabari2891 2 года назад

Hi dipesh first of all thanks for your videos. I tried this video in this i am struck in uuid. After including the uuid coding, compiler throws util error. I am using node version 16 . So can anyone face this type of issues ?

@narensabari2891 2 года назад

@@cjs4912 yes. Instead of uuid i am using the default id value. And pass that unique id as list key

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

@@narensabari2891 i faced this issue too , just resolved it . use import { v4 as uuid } from "uuid";

@anrgkdm 2 года назад

I created the app and started it, It worked initially, Then I stopped it. And then Deleted the files not required for this application, as said in video from 7:04 to 7:38. But after that the application never ran. It gave errors like "ENOENT: no such file or directory, open "

@sai6157 2 года назад

Same issue I am also getting, did u get it ?

@rojamanepalli3068 Год назад

@@sai6157 try to navigate to correct directory path then run the application

@dabbarnaresh7791 Год назад

Hello sir, nice video I'm doing same as you But when I refresh Page , My get data also not showing

@DipeshMalvia Год назад

Yes, because you are using React 18 and the tutorial uses React 17 - please follow this updated video - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vApTJpRqyx4.html

@dabbarnaresh7791 Год назад

@@DipeshMalvia Sir how can I contact you

@inevitableman4159 Год назад

Unable to store the data in the local storage

@ankitanand3216 Год назад

i seen this now , and i implemented but after refreshing data went hide from the document. what might be reason to happen this ?

@DipeshMalvia Год назад

The reason is you are using React 18 and there were some breaking changes in working of useEffect - You can refer to this video how to fix the issue - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vApTJpRqyx4.html

@ankitanand3216 Год назад

@@DipeshMalvia thankyou

@55BLOCKS 2 года назад

i love it

@DipeshMalvia 2 года назад

Thanks!

@discovershorts6968 2 года назад

Sir I'm facing a little problem.... when i getitems from local storage....all items are automatically delete when i refresh this page... i mean.. when want to get items form local storage.... its not working.. so what i should do??

@DipeshMalvia 2 года назад

Please check are your items stored in the local storage in the first place. If need your can check GitHub code for reference

@discovershorts6968 2 года назад

@@DipeshMalvia Yes Sir I already checked.. all items are storing on local storage... Okay Sir 😊 I'll check GitHub... Thanks

@dragansliskovic3473 2 года назад

Did you solve your problem mate? I am also having the same issue. Files are storing perfectly fine on Local Storage but when I refresh them they are gone. Could it be because I kept App.js file in src folder? Weird...Copied then entire code from GitHub and still the same issue. But when I use the same code and have my App.js inside components folder it works. Weird stuff :)

@discovershorts6968 Год назад

@@dragansliskovic3473 Not yet... Bro

@shivamsingh-ud5hb Год назад

I used ui container center class but the content is not rendered at center

@DipeshMalvia Год назад

I think you should refer to semantic UI documentation for classes as the documentation might have changed in last one year.

@sai6157 2 года назад

I tried but after deleting webvitals file and other files I am getting error .. I am not getting what to do.. please help..

@DipeshMalvia 2 года назад

Please check your errors might be you have deleted the file but their refrences still present in index.js or app.js files

@pratosh Год назад

use nanoid if the uuid is not working.....thanks😄

@sivanagarjuna569 2 года назад

Sir icon is not fit properly

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

Error: maximum call stack size exceeded RangeError: maximum call stack size exceeded. Can u plz give me a solution for this

@flyflor599 Год назад

Where is the classes ...avatar etc?

@5minupsc723 Год назад

how to fetch local storage and display it on screen

@DipeshMalvia Год назад

If you are using react 18 then you can follow this video for fixing the breaking changes - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vApTJpRqyx4.html

@5minupsc723 Год назад

@@DipeshMalvia ok

@rajalekshmir8308 2 года назад

I tryed many time .. error occurs in starting. Can't resolve module

@DipeshMalvia 2 года назад

This won't be sufficient to provide any solution. Make sure you have NodeJs installed properly and if you are using the reference code than use npm install to install the dependencies.