React JS Full Course for Beginners | Complete All-in-One Tutorial | 9 Hours
React JS has become one of the most popular front-end development frameworks in recent years. It’s a powerful tool for building user interfaces and has been embraced by companies like Facebook, Instagram, Netflix, and Airbnb. If you’re new to React JS and want to learn it from scratch, this complete, all-in-one tutorial is a great place to start.
This tutorial is designed for beginners and covers everything you need to know to get started with React JS. Whether you have some experience with web development or are completely new to the field, this tutorial will guide you through the basics and gradually introduce more advanced concepts.
The tutorial is divided into several sections, each covering a specific topic:
1. Introduction to React JS: The tutorial starts with an introduction to React JS, explaining what it is, why it’s popular, and how it compares to other frameworks. You’ll also learn how to set up your development environment.
2. JSX and Components: JSX is an extension to JavaScript that allows you to write HTML-like code in your React components. In this section, you’ll learn the basics of JSX and how to create and use components.
3. State and Props: React components can have state, which allows them to manage data and respond to changes. This section will teach you how to work with state and props in React.
4. Lifecycle Methods: React components have lifecycle methods that allow you to perform actions at different stages of a component’s life. This section will explain the different lifecycle methods and how to use them.
5. Handling Events: React allows you to handle events like button clicks or form submissions. In this section, you’ll learn how to handle events in React and update the component’s state accordingly.
6. Forms and Validation: Building forms is a common task in web development. This section will teach you how to build forms in React and validate user input.
7. Routing and Navigation: React JS can be used to build single-page applications with multiple views. This section will teach you how to handle routing and navigation in React.
8. React with API: Many React applications need to interact with external APIs to fetch data. In this section, you’ll learn how to make API calls in React and update the component’s state with the retrieved data.
9. Deploying a React App: Once you’ve built your React app, you’ll need to deploy it to a web server. This section will guide you through the process of deploying a React app to platforms like Netlify or Heroku.
The tutorial is presented in video format, with each section lasting around one hour. With a total duration of nine hours, it may seem like a lot of content, but it’s worth investing the time if you’re serious about learning React JS.
By the end of the tutorial, you’ll have a solid understanding of React JS and be able to build your own React applications from scratch. From creating basic components to handling user events, fetching data from APIs, and deploying your app, this tutorial covers everything you need to get started with React JS.
So, if you’re ready to dive into the world of React JS and unleash your front-end development skills, this complete all-in-one tutorial is a fantastic resource. Grab a cup of coffee, sit back, and get ready to become a React JS pro in just nine hours!
A 45 second intro followed by nearly 9 hours of code and instruction for React JS to help you start from scratch and level up. I bookmarked all 23 chapters in the description. If you complete one lesson per day, you'll complete the full course in less than one month. Post questions in the comments below. ⬇⬇⬇ If you are new to Javascript, you should start with my full 8 hour Javascript course tutorial here: https://youtu.be/EfAl9bwzVZk
The const, count value that useState brought into a function doesn't change until the function exits, correct?
Did anybody else had trouble with the useEffect in Chapter 13? It executes twice if I do a refresh of the page and executes the fetch twice.
hi, Dave Gray I think you missed these points during the last video.
so I added these devDependencies and scripts by this I avoided the error with fetch API
"devDependencies": {
"concurrently": "^8.2.2",
"json-server": "^0.17.4"
}
"scripts": {
"start": "concurrently "npm:json-server" "npm:react-start"",
"json-server": "json-server -p 3500 -w data/db.json",
"react-start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Not all heroes wear capes. Some say "striving for progress not perfection"
hi Dave As per video useHistory and Switch are not working on dom V6 in reactjs and i used useNavigate instead of usehistory but unable to get output properly, Kindly suggest Asap.
Ctrl + B, B for Boy, hides the file tree. This shortcut was given more importance than the whole react tutorial 😅😂. Jokes aside, great tutorial 👍
Perfect course fr new comers like me :), thank you so much
Thank you Dave for this great Content!
Hii Dave what should be the way forward to learn React Native … plz answer
Hello there, i need a help or guidance and i hope you sir answer this question. Are there any essential concept or fundamental of JS i need to know 1st before learning react? Thanks…, Love from Indonesia
I am unable to understand what should i learn MERN or just next js😢
you dont know man how much you help me .. i learn axios and react basic from this video and with that tiny skills of mine i just made youtube clone.. thank you so so much . if any point of my life if start a job in this sector all credit goes to you. once again thank you so much
Hi @DaveGrayTeachesCode, I really like your way of teaching and i have followed this tutorial in the past but could not complete it, I want to start learning again but I have doubts that this tut is almost 2 yrs old now, and currently we have react 18 so could you please tell me if this is still relevant and give any tips on how to bridge the gap if I learn the basics from this.
I really hope you reply to this as there might be few others also with the same doubt.
Usually I never comment on any Youtube videos, but i have to admit one fact that Dave sir is one of the best teacher of web development that i have came across😇
You are a blessing 🎉❤
you are a great teacher but sometimes you get carried away writing code without even explaining what are you trying to achieve , like the useAxiosFetch i was writing along without knowing what even the purpose was it's very demoralizing
Why does it feel illegal to watch all this stuff for free?🥲🥺
Brilliant and in-depth tutorial, Dave. Masterful work with easy-to-follow explanations (that I sometimes needed to watch twice). Two weeks ago, React was just another framework to me; after a week, I am currently 75% thru the React video and now have a solid understanding of the basics. I have your NextJS tutorial ready to follow-up this one.
Am currently attempting to modify the Grocery List tutorial to include a 'quantity' input field (I think need to review Hooks).
Thank you so much for your hard work!