Learn React JS with Project in 2 Hours | React Tutorial for Beginners | React Project Crash Course

This video is a complete React Crash Course for beginners. The video covers different React Topics and implementation in one single project. The video showcase the React concepts and their use in practical project.

We will be building a contact manager application from scratch and by end of this crash course you will have good understanding of building projects with React.

***GITHUB***

⭐️ Support my channel⭐️

🔥 Video contents... ENJOY 👇
------- React Fundamentals --------
0:00:00 - Intro & Topics to learn in this video
0:01:54 - Setup
0:02:42 - Create React App
0:04:05 - Start React Development Environment
0:04:23 - Understand React App Folder Structure
0:07:15 - Contact App Folder Structure/ Components
0:08:55 - React "Hello World" Component
0:09:18 - Adding Sematic UI to Project
0:10:03 - Understand React Components
0:11:53 - React JSX
0:13:00 - Function Component
0:15:18 - Class Component
0:19:13 - Rendering List in React
0:20:08 - Props - Pass data from parent to child
0:20:36 - Access Props
0:22:55 - Reference variable in JSX
0:24:34 - Adding In-line Style
0:27:19 - Add images in React
0:28:46 - useState React Hook
0:33:02 - Pass Function as Prop
0:34:09 - Update the State using setState()
0:36:06 - useEffect React Hook

------- React Router--------
0:46:13 - React Router Intro
0:47:29 - Install React Router DOM package
0:48:25 - Verify installed package
0:49:16 - Create React Route for application
0:52:27 - Switch and exact
0:57:18 - Passing props in route component
1:00:02 - Passing props with route render
1:02:37 - Programmatic navigation with history
1:05:02 - Use Link for route
1:11:18 - Pass data in route state
1:12:51 - Access route state

------- React CRUD Axios--------
1:17:30 - Setting up JSON-SERVER
1:18:53 - Understand Rest API convention
1:19:32 - Create Contacts Resource
1:21:18 - Start JSON-SERVER
1:22:17 - Install AXIOS package
1:23:45 - Fetch All Contacts (READ)
1:27:23 - Add new Contact (CREATE)
1:30:37 - Delete a Contact (DELETE)
1:32:00 - Create an Edit component
1:37:35 - Edit Contact (UPDATE)

------- React Search--------
1:41:57 - Adding Search bar JSX
1:43:24 - Adding useState Hook
1:45:49 - Add State to Input Element
1:46:31 - Adding useRef Hook
1:49:24 - Search Filter with Array Filter Method
1:55:30 - Testing & Outro

⭐️ Related Video ⭐️

***Checkout my crash courses for get started with web development***

🔗 Social Medias 🔗

⭐️ Hashtags ⭐️
#react #beginners #tutorial

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.

[ajaypediredla]

Top class content. Have seen many ReactJS beginners courses and I can say this is the best. After watched this, went through your other courses as well and you are too good. Thanks for all your efforts.

[sash]

1 hour in and i totally understand everything you are trying to explain. Thank you! - Im subscribing! :)

[anishchaudhary]

I already watched so many tutorial videos and already know many things about react but things are not cleared in my mind so i am literally start searching more react js videos on youtube so i found this masterpiece. You are awesome brother. Thank you so much <3.

[AlexSpieslechner]

i'm really glad the yt suggestions brought me to your video. for a rather small youtuber, your video and presentation quality is great.
the clear structure, timestamps and flow is super helpful. especially for beginners, i think it is very easy to follow

[engr_mark]

I can't help myself than to hit the subscribed button after watching this. Well done.

[czonekannada]

🎯 Key Takeaways for quick navigation:

00:14 🚀 *The video is a two-hour React crash course covering topics such as React basics, components (class and functional), JSX, props, states, React hooks (useState, useEffect), component lifecycle, conditional rendering, lists and keys, form handling, project structure, React routing, JSON server setup, Axios usage, CRUD operations, and implementing a search filter.*
01:54 ⚙️ *Before starting the React project, Node.js needs to be installed on the machine. The video provides guidance on installing Node.js, and the speaker emphasizes checking the Node.js version through the terminal.*
02:49 🛠️ *The process of creating a React app is demonstrated using `npx create-react-app`. The speaker highlights the key commands for starting the development server, building for production, running tests, and ejecting.*
04:13 📁 *The video explains the basic folder structure of a React application, including the `node_modules`, `public`, and `src` folders. It introduces important files like `package.json`, `index.html`, and explores the default contents of the `src` folder.*
06:32 🎨 *Semantic UI is introduced as the CSS library for styling the React application. The speaker demonstrates adding Semantic UI classes to elements in the HTML file to improve styling.*
10:00 🔧 *Components (functional and class) are created for the header, add contact form, and contact list. JSX syntax is used to structure the components, and Semantic UI classes enhance the styling.*
19:04 📋 *An array of contacts is created, and the concept of passing data to components using props is explained. The video demonstrates rendering a list of contacts in the contact list component using the map function.*
23:32 🔄 *The process of refactoring and creating a reusable component (`ContactCard`) for rendering individual contact items is demonstrated. The refactored code enhances modularity and readability*
25:06 🛠️ *Hyphenated JSX attributes are avoided, and camel case is used instead.*
29:00 🔄 *Functional component state is managed using the `useState` hook.*
36:08 📦 *`localStorage` and `useEffect` are used to persist and retrieve data between page refreshes.*
41:05 🆔 *Unique IDs are generated for each contact using the `uuid` package.*
46:16 🌐 *Introduction to implementing routing using `react-router-dom`.*
47:14 🔄 *Importing and using `BrowserRouter`, `Switch`, and `Route` for React routing.*
55:32 🔄 *Navigating between pages programmatically in React Router can be achieved using `history.push` in response to an event, allowing for smoother user experiences.*
01:06:10 🌐 *Creating dynamic routes with React Router, such as `/contact/:id`, allows for the display of unique content based on the specified parameter (in this case, contact ID).*
01:10:34 🔄 *Passing additional data to a route in React Router can be done using the `to` prop of the `Link` component. The data can be accessed in the target component via `props.location.state`.*
01:12:52 🛠️ *Destructuring and extracting data from `props.location.state` enables easy access to information passed between components in React Router. This is useful for rendering dynamic content based on the route's state.*
01:15:17 🔄 *Utilizing React Router for navigation between components, ensuring quick and seamless transitions without page refresh.*
01:17:23 🛠️ *Setting up a JSON server for fake APIs, following RESTful API conventions, and creating a `db.json` file to simulate data.*
01:22:13 📡 *Implementing Axios to fetch data from the JSON server instead of local storage, improving data management in the React application.*
01:28:13 ➕ *Adding functionality to add new contacts, making POST requests to the server and updating the state with the response data.*
01:30:46 ➖ *Enabling the deletion of contacts by making DELETE requests to the server, enhancing the overall CRUD functionality of the application.*
01:35:00 🔄 *Implementing an edit feature, creating an edit route, and updating the contact details through the UI while maintaining synchronization with the server.*
01:37:34 🔄 *When updating a contact in a React app, create an `updateContactHandler` function to handle the PUT API call, passing the contact ID and new values.*
01:39:11 🔄 *After a successful update API call, update the React state with the new contact value to reflect the changes immediately.*
01:41:45 🛠️ *When building a search functionality in React, create a search bar component with a state for the search term and a function to handle changes.*
01:42:40 🔄 *Utilize the `useRef` hook to handle input values in a controlled manner, demonstrating an alternative to `event.target.value`.*
01:49:24 🔄 *Implement search functionality by filtering contacts based onthe search term, considering values like name and email using `Object.values` and string matching.*
01:53:57 🔄 *Update the contact list based on the search results, dynamically switching between displaying all contacts and the filtered results.*

Made with HARPA AI

[daoudacamara]

A very good tutorial from begging to react framework. I actually watching it on phone to see the first hour of the project. In this, I’m really inspired how good method you learn us! 🙏

[adityaer]

I really enjoyed watching your video.
Thank you for making a clear learning path and taking us through that path hands on.
As mentioned in comments the time stamps, structure, simple and easy to follow explaination made
the learning journey rewarding for me.

[thewpwing]

I am enjoying the tutorial, this is the best I have ever seen. Thanks Dipesh for your hard work. Looking forward to your other tutorials.

[kalombograce]

Thanks, Bro for this beautiful tutorial, I feel comfortable with React now, After going through a lotta React tuts without grasping the concepts and their applications... Thanks.

[kitchen-e-kausar]

Appreciate max. This is so helpful, specially when you want to revise everything without spending hours on lengthy videos, 2 hours and you already brush up components, router, axios and CRUD, hooks. I really love your videos ever since I went through your redux tutorial.

[ItsPureLuck]

Just an absolutely amazing tutorial, earned a subscription. While I feel like I have a decent grasp on vanilla JS, I was so confused coming over to React but this video was terrific in explaining everything!!!

[zaheerabbas]

Watched this first react tutorial as beginner and I am really impressed by the way you explained all the concepts. This tutorial is a great overview of react concepts for beginner to mid level learners. helped a lot. Thanks for great content.

[ewbcyiw]

I'm from Russia but I understood every moment. You explains just amazing. Thanks a lot!

[vimalneha]

Dipesh, it is a really very useful video to understand the basics and the scope of the REACT in the first instance. Thanks for making it.

[baiai]

where have you beeeen before? I watched so many react videos, but it's not explained like on your videos, I really like that there is no CSS or material UI, only functionality. This is exactly what I was looking for for a long time. Thank you a lot

[kandregularaviteja]

Learned a lot from this lecture. Easy way of explaining all the topics with clear video and voice. Very helpful for beginners. Please do the video by implementing CSS styling, like creating Cards, Animations etc using CSS.

[RahulSharma-pdce]

People are creating 15hrs and 20hrs videos for the react but this is the best short video and through the point.Really a good content.

[mohdnasir]

Impressed. Excellent Explanation in 2 hours, you covered most of the topics. Thanks bro.

[santoshmohapatra]

Finally the comprehensive guide here. Keep it up