React JS Full Course (20 HOUR All-in-One Tutorial for Beginners) – PART 1!
Welcome to the first part of our comprehensive React JS tutorial series! In this tutorial, we will cover the fundamentals of React JS for beginners. If you are new to React or want to brush up on your skills, this tutorial is for you.
Introduction to React JS
React JS is a popular JavaScript library used for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. With React, developers can create interactive and reusable UI components, making it easier to build complex applications.
Topics Covered in Part 1
Part 1 of this tutorial series will cover the following topics:
- Setting up a React development environment
- Understanding JSX (JavaScript XML)
- Creating and rendering React components
- Using props to pass data to components
- Handling events in React
Video Tutorial
Conclusion
Congratulations on completing Part 1 of our React JS Full Course! You have learned the basic concepts of React and how to create simple components. In the next parts of this tutorial series, we will dive deeper into React’s features and build more complex applications.
Stay tuned for Part 2!
Note: This article is written with HTML tags for formatting and styling. The actual tutorial content may be in the video tutorial embedded.
top! great man, hey I was wondering, what would you recommend as a webpage to be always updated with new trends and tendencies wit coding react or js. Every month we have new settings new templates new tools how do you keep track on all that?
thank you man keep helping people learn
Great series!
I had to check for "data[0]?.meanings" before calling "setWord(data[0].meanings);" otherwise the app broke when searching for "texas". I tried to clone your repo and checked out the "404s" commit. It's the same, but it only writes the error in the console – mine is showing the error (Uncaught (in promise) TypeError: Cannot read properties undefined (reading 'meanings')) on the page. The error is showing in your console @4:02:30.
Really a great course, thank you so much. And I really laughed at 3:26:05 😂
It's really great work. Each and every code clearly explains what and how it works. Really good teacher 🎉..
Timestamp 1:17:57
The tutorial is very awesome and is not boring to continue the watching. Everything Caleb teaching is very clear to understand from the bottom of the learning curve..
So, in this comment, I've a little problem to resolve in my code which I'm getting in the front-end console. Could someone please provide me a fix to resolve the following error
Uncaught (in promise) SyntaxError: Unexpected end of JSON input.
I really don't understand clearly which is the proper way to resolve this. However, I hope the error is coming from the Python back-end.
Thank you!!!!!
Thanks Caleb, this is one of the best ReactJs course I have ever seen, and I have been through a lot, PLEASE DO A NEXTJS COURSE, PALEEEEEZ!!!
Hey, brushing up on react and loving this, really easy to follow.
One question, Why are you wrapping everything in the Header? Shouldn't it be something more like this?
<BrowserRouter>
<Header />
<Routes>
<Route path='/employees' element={<Employees />} />
<Route path='/customers' element={<Customers />} />
</Routes>
</BrowserRouter>
I appreciate using frameworks like tailwind and react bootstrap but I prefer building components from scratch. It reinforces concepts and it is easier to troubleshoot. My bootstrap button aren't loading the background color for some reason and I can't find any resources on why that might be the case. Sure I can style it myself, even using tailwind, but little issues like that drive me crazy. P.s. yes i imported the react bootstrap css to the correct place. Otherwise good vid so far.
Great tutorial
You killed me at 7:12:26…. switching the POST to GET.. Figured it out though 😮💨👍👌
what are the prerequisite for this course?
Can i use vite?
thank you so much
TimeStamp: 2.46 / I think it's a good practice to use the keyword "page" to differentiate a page from a component. E.X. HomePage.jsx, AboutPage.jsx, etc
From the how to push to state array lecture: If I want to prevent to enter empty values to the employee array; if I do if (name === '' || role === '' || img === ' ') {
console.log('please provide input values');
return;
}. This piece of code doesn't prevent to enter empty values to the UI. How can I prevent this to happen?
Wait ooo.. this guy does all this Courses, on YouTube and Udemy, and has lots of connections..and work experience, yet he was laid of…well, no one is safe then…man guy, wishing you all.the best you will overcome…
Just wondering why not use navigate("/customers/") instead of passing state in the request and having to use the useLocation hook? @7:42:20
great video,
In AddEmployee at 2:18:00, you can just remove the value property instead of resetting the state, it works