The ultimate React JS Course - Build 3 Real-world Projects

In this lesson, we learn What is React? Also we see Why react is so popular.

In this lesson, you learn about virtual dom in React with animation. So you can understand Virtual DOM in simple and easy way.

This lesson is for setup the development environment for the complete course like nodejs and code editor. Also installing  some helpful VS code extension.

Let's create our first React application with using latest tool vite.

In this lesson, I explain full react application folder structure and the importance of folders like

• node_modules

• public

• src

Also we understand all files like App.jsx, main.jsx, index.html etc...

In this lesson, you will see how react application display to the DOM

This is the introduction of the section 2 JavaScript ES6 Refresher. We will discuss all concepts which we will learn in this section.

In this lesson, we will see the 3 methods of variable declaration. Also we will see Var vs Let vs Const

In this lesson, we will learn JavaScript Arrow Function syntax which is the another way to define functions in JavaScript.

We all know JavaScript objects. In this lesson, we will see another way to access object properties.

In this lesson, we will see object destructuring which is used to directy access property and store it in the variable.

In this lesson, we will learn how to use map method to display the list on our webpage. This is one of the most important method in React.

In this lesson, we will see JavaScript filter method for filtering the data from the array. It is useful for deleting specific item from list.

In this lesson, we will see JavaScript Spread Operator. Using Spread Operator we can easily duplicate the existing object or array values.

In this lesson, we will see JavaScript Ternary Operator which is the shortcut way to write If else condition. Pretty helpful for react applications.

In this lesson, we will see What are modules? And how we can create them. Modules is one of the most important part in React. Because React works on component structure. And by using modules we can make our code clean and more organized.

In this lesson, we will see another syntax of exporting the modules which is Export them as default. Export default syntax is very popular and clean in React. So it will also helpful for you.

In this lesson, we will see the introduction of the React basics section.

• Building own component

• How JSX and babel works

• Adding Elements

• JavaScript Expression

• Setting Attributes

• Events

• What is State

• Hooks

• useState hooks

• Handling the user inputs

• Mapping lists and more..

In this lesson, you see how to setup new react project for Project 1.

In this lesson, you see how to build components in React. Also I will give you an exercise for building one more component.

In this lesson, you get the solution of the previous build component exercise. First try to solve it and after that see the solution.

In this lesson, you learn What is JSX and Babel and How they works together to make react application more easy. This can be the reason why React is simple and easy.

In this lesson, we see how to add elements in the JSX and how they display on the webpage. This is the UI part.

In this lesson, we see how to add JavaScript Expression or we can say JavaScript code in JSX. So we can perform tasks with our UI.

In this lesson, we see how to set attributes in JSX elements. It is the same way we add attributes in the simple HTML elements.

In this lesson, we see how to add events in React code. Events like onClick, onDoubleClick, onSubmit and so on. Using this events we can perform many tasks like Submitting the form, search and much more.

In this lesson, we see What is State in React. State is the very core concept of React. Without State you can't create dynamic websites in React. So in this lesson, I demonstrate What is the difference between React State and Normal JavaScript variable.

In this lesson, I explain What is React Hooks in very simple and easy language and by that you get the clarity about React Hooks.

In this lesson, we see the most popular and most used React hook which is useState hook. useState hook is used to create state variable in React application. Pretty important hook. Must Watch.

In this lesson, we see How to handle user inputs in React application. In simple words, what user select or type in input, how can we get that in React application.

In this lesson, we see how to display or map the list on our webpage. For example, we have array of products and we want to display it on our webpage. Then by using map method we can display list on our webpage.

This is the Summary file of React Basics Section. You can use this file as the refresher for this section.

In this lesson, you get the introduction about this section in which we are going to create our first React Project.

In this lesson, we are going to see the full project overview and also we plan about how to start creating this project. This is my secret to create any React Application fast and without writing useless code.

In this lesson, we create the basic structure of our website and add style for that layout.

In this lesson, we create Task Form Component which is the input box, selection list and dropdown in navbar.

In this lesson, we add styles for our form component. By adding styles we make our application look nice.

In this lesson, we create Tag component and by using this we can display 4 tags which we can select while adding the task.

In this lesson, we see What is Props in React and also we see how we can use props and make our component dynamic.

In this lesson, we build Task List component, which is the column in which we display all our tasks by their status.

In this lesson, we see the solution of the previous exercise which is the props exercise and you can check your solution is correct or not.

In this lesson, we create TaskCard Component and also we make it dynamic using props and this is the last part of the UI for this TaskTrek Project.

This the summary of this Section 04. You can refer it for quickly see and recap the concepts.

In this lesson, we see the topics which will cover in this Section 05:

• Handling Form

• Shortcut for Handling complex form

• React Strick Mode

• Tag Selecting

• Listing the Tasks

• Deleting the Tasks

• Saving Tasks in Local Storage

• useEffect Hook

• Adding Custom Fonts

• and much more

In this lesson, we will handle our form which means, we get the Task text and also the selected status of our task.

In this lesson, we see the Shortcut trick to handle form. By using this trick we can handle complex form in just 2 lines of code. Must Watch.

In this lesson, we see What is React Strict Mode and why we need Strict mode. This question ask a lot in React Interviews. So it's better to know.

In this lesson, we see how we can select Tags from our Task Form. This feature is very important for modern days websites because it looks really nice.

In this lesson, we see How to display the select tag on the UI. This is very simple logic. We simply use inline styles for change the background color.

In this lesson, we see how we display the task card in different task columns by filtering them by their current status.

In this lesson, we see how we can implement delete task functionality. For deleting the task we will use filter method.

Previously, when we refresh the page, our all task goes away. So to solve this issue, we need to store our tasks in the local storage.

In this lesson, we see the Basics of the most important hook which is useEffect. This hook is also very important as useState hook. Must Watch.

In this lesson, we see how to add custom fonts in our React project. By adding custom fonts we can make our website look more professional.

In this lesson, we wrap up our Project 01 TaskTrek. So here we complete our project 01.

This is the summary of the Section 05 of The ultimate React Course.

In this lesson, we see What we are going to learn in this section 06.

• Layout Style

• Custom Fonts

• Building re-usable components

• What is API

• How to use another website API

• How to fetch data from API

• and much more

In this lesson, we setup our new project which is MovieManiac and also we create the basic structure of our website.

In this lesson, we see another way to add custom fonts in our project. In this method, we download font file from the internet and also we will reduce the font file size.

In this lesson, we are going to build Navbar Component which includes project name and some navbar links.

In this lesson, we will build MovieList Component which can we reuse for Popular, Top-rated and Upcoming section.

In this lesson, we build MovieCard Component which is the individual Card for displaying single movie details like movie poster, movie name, rating, release date and description.

In this lesson, we style the Movie Card component. By adding these styles, our MovieCard works very well.

In this lesson, we see What is API in very simple and easy to explain language. API is very important part of many React Application. So it will help you a lot in the future.

In this lesson, we will generate the API key from movie website. Without getting this API key, we can't fetch data from this API.

In this lesson, we see JavaScript fetch method of calling API. Fetch method is one of the best way to fetch data from API.

In this lesson, I will give you one exercise for displaying API data in the MovieCard. So you will better understand how to use props.

After solving this exercise, you can see this solution. Also if you don't solve this, you can see this. But give it one try and see where you stuck.

This is the Summary of the Section 06 of The Ultimate React Course.

In this lesson, we see what we are going to learn in this Section.

• Filter vs Sort

• Filter in React

• Sorting in React

• React developer tool

• Dark and Light mode

• and much more

Before implementing filter and sorting features. Let's first understand what is the difference between Filter and Sort functionality.

In this lesson, you will see how to implement filter functionality in the React application. Filter feature is really simple, you have to just know the basics.

In this lesson, we create a Reusable Filter feature which we can use in other sections as well.

Before implementing sorting feature, we need to first get the current Selected Sorting value and that's we will see in this lesson.

In this lesson, we see how we can use React Developer tools to debug our React application. This is the best tool for debugging react application.

In this lesson, we see the implementation of the Sorting Feature. By using this feature, we can sort movie data according to its rating.

In this lesson, we will see how we can add Dark-Light switch which we will add in the navbar.

This is the Link for creating Toggle Switch using HTML and CSS.

In this lesson, we will implement the Dark Mode feature in our React application. This is really simple and easy. Don't worry about that.

In this lesson, we see how to make movie list component reusable and by that we will complete our second project.