Course details

ReactJs - The Complete Guide

A brief summary

Learn React or dive deeper into it. Learn the "What", "Why" and "How" of ReactJs, solve assignments, practice in demo projects, and build one big application that is improved throughout the course. The whole course is designed to help a beginner to be an expert in ReactJs using Hooks, Redux, and other modern features. Throughout the course, all the topics will be discussed with real-time project implementation and at the end of the day, a final project will be given to everyone

Prerequisite

HTML, CSS, Javascript

Course highlight

  • Build powerful, fast, user-friendly, and reactive web apps
  • Provide amazing user experiences by leveraging the power of JavaScript with ease
  • Get a proper idea of React hooks and lifecycle
  • Master fundamental concepts behind structuring Redux applications

What you will learn

Completing this course, you will be able to

- Build powerful, fast, user-friendly, and reactive web apps

- Provide amazing user experiences by leveraging the power of JavaScript with ease

- Get a proper idea of React hooks and lifecycle

- Master fundamental concepts behind structuring Redux applications


01

Introduction to ReactJs

The most important question of this course is What is React and why should we use it. In this lecture, we'll take a closer look.

02

Understanding JSX

One of the most important features of ReactJs is JSX which allows us to develop components faster and efficiently. This the objective of this session

03

Props and States

The core system is ReactJs is driven by two sample thing. Props and States. In this lecture will learn these two things with examples

04

Class Component

Though in current time, the Class component is discouraged to use, still we need to know our ancestor to understand our modern development system. So we will get to know the class component in this lecture. Don't Worry, we will learn everything in ReactJs hooks.

05

Functional Component

In this lecture, we will get to know the Functional Component and the react Hooks which is the modern way of building a react application.

06

ReactJs Lifecycle

The most important thing in ReactJs is to understand the lifecycle of a component without which the whole ReactJs will be a big black hole. So Let's learn the LIFECYCLE of the ReactJs component. We will demonstrate the both legacy way of lifecycle in-class component and also in the Hooks way, From both of them, we will get to learn why we should use React Hooks instead of Class Component

07

Life Cycle Hooks

In this Section, We will dig deeper into the basic life cycle hooks of ReactJs. The hooks are useState,useEffect which are use almost every component in a react application

08

State Manipulation and Two way Data Binding

One of the vital things in a React Application is State Manipulation which we will learn in this lecture as well as will try to implement two-way data binding.

09

Conditional Rendering

In this section, we will get to know how we can render content depending on our data flow and other factors conditionally

10

List and Keys

Looping through the contents is one of the most important things we should learn to develop a modern and real life react application. So let's learn this in this section.

11

Styling React Components

To make an application, it is important to have proper UX and UI. In this section we learn about styling techniques : - Setting styles dynamically - Setting Classname dynamically - CSS Module

12

More in to Styling

Though we have learned about styling using CSS, modern applications require modern ways of styling UI. So In this section we will learn about a fantastic library called STYLED-COMPONENTS using which we can style our components in a Javascript way.

13

Material UI

For faster development, we often use various UI libraries. Material UI is one of them and in this section, we will learn about this amazing UI library.

14

Form and Form Validation

In this section, we learn to create form, handle user input, validating inputs, Handling errors

15

Debugging and better project structure

In this section, we will learn about two vital things. One is how to debug a React Application using React Developers Tool. Another topic is how to build a better project structure. Also, we will learn how to clean up react hooks and make them efficient.

16

API Call

We will learn how to communicate with API using the following tools and techniques: - Fetch - Axios - Difference between GET/POST/PATCH/PUT/DELETE - Handling errors - Handling asynchronous API calling

17

React Router

A very important feature of ReactJS is Routing and in this session, we will talk and learn about ReactRouter and some of its features: - Setting up Router Package - Components of routers - Switching between pages - Using porps via router - Navlink/Link component of router - History and Params Hooks - Redirection

18

Redux

Due to the Unidirectional Data Flow of React, often we have to use a common store, and a very popular library is Redux. In this session we will learn: -Why Redux - Understanding Redux Flow - Setting up reducers and store - Dispatching actions - Connect React to redux - Passing data with action to store - Update store immutably - Combining multiple reducers - Connect component with redux hooks - Setting up redux dev tools

19

Redux Middle Ware

As we have to deal with the Asynchronous feature of Javascript, we need to handle them in a middleware and a very popular yet simple package of react for that is Redux-thunk and we will learn about this tools. - Why middleware is important - Redux Thunk - Configuring Thunk to store - Implement store with redux thunk - A brief overview of redux-saga

20

Advance Hooks

There some other hooks in ReactJs and we will have a brief overview of those hooks. - useMemo - useCallback - useLayout - useReducer

21

Performance enhancers

As it's a frontend library, we have to think about updating the performance to ensure a smooth user experience. So we will learn about some performance enhancer and their use. - React Profiler - Generate react source-map - React.Lazy - React.memo

22

Final Project analysis and discussion session

Throughout the whole course, all the topics will be discussed with real-time project implementation and at the end of the day, a final project will be given to everyone. In this session, we will analyze the submission and have a discussion over how to make it more efficient and performance-friendly.


Next Batches

Batch No. Class Days Time Reg. Close Class Start
03 Mon, Thu 07:00 PM December 09, 2021 December 20, 2021

Students feedback/comment about this course

Student Photo

Mahfuj Ayub

Posted On: 15-Nov-2021

Alhamdulillah, I have learned the basics of react js from this course . It seemed hard in the beginning but by the course of time it became easier. The class assignments were very helpful for getting the proper understanding. The final project helped to put all the concepts learned in a single plate. Evidently, a very well designed course with an instructor who is ever helpful and always urging for questions.

Student Photo

mohammed Raihan

Posted On: 18-Oct-2021

In this Course I meet lots of Smart Developer in the Dev SKill Platform . Arnab Vaia always inspire us to write clean code . He taught us lots of best practices and He not only teach us React js but also he always show a comparison between what we should use , what we shouldn't and if we use those things what happen to the Application . After The course i feel confident about React js and His teaching style is also amazing . He also taught us to visualize the data flow between parent component to child components. If anyone want's to learn React js from a Great developer , this course will be the path way to become a great developer.

Student Photo

Rasif Tahmid Islam

Posted On: 07-Oct-2021

Thanks Arnab bhai for taking this course. I had no prior knowledge of react before this course. But Arnab bhai made it easy for me to understand it's basic features like class components, functional components, react life cycle, hooks, react-redux etc. I am very thankful to dev skill for arranging such a well organized course plan.

Student Photo

Md. Sirajum Munir Prince

Posted On: 27-Sep-2021

Before enrolling into this course, I hade zero knowledge about React, and was pretty abysmal in JavaScript. Mr. Arnab Dhar, who is one of the most humble and friendly instructors I have ever been taught by, with his vast experience, knew exactly how to engage a novice like me into the course, and could inspire me to put my cent percent effort. The topics that are covered in this course are the core concepts of React, which are more than enough for an enthusiast to enter into React jobs. Although I could not put my all-out effort due to my tight work schedule, I am motivated enough to continue my learning to work as a React developer.

Student Photo

Farhan Galib

Posted On: 26-Sep-2021

This course is really very helpful for those who want to learn react from scratch. It would be better to have knowledge of the JavaScript language before starting the course. And our instructor is very patient, friendly, and helpful. He is basically hungry for questions. You can ask any kind of questions and he will not let you down. Besides his way of teaching is very efficient.

Student Photo

Hassan Sabit

Posted On: 22-Sep-2021

Firstly I'd like to mention that, this was my first paid course ever, The reason why I enrolled for a paid course was totally paid off and totally worth it, The instructor was very helpful and friendly and taught us a lot of things the easiest way possible. Before enrolling in this course I knew nothing about React, But after the course, I feel really boosted. I'd really recommend this course to everyone who is thinking about doing a paid course for learning reactJs.

Student Photo

Foysal Ahammed

Posted On: 22-Sep-2021

এই কোর্স সত্যি অনেক ভালো এবং কোর্স আউটলাইন সবকিছুই ভালো। কিন্তু আমার মনে যারা এই কোর্স শুরু করতে চান অবশ্যই JavaScript মোটামোটিই ভালো অভিজ্ঞতা থাকতে হবে । যদি এই কোর্স আপনাকে সবই কিছুই মোটামোটি দেখাবে , তারপর আপনার React সম্পর্কে আগে থেকে কিছুটা অভিজ্ঞতা থাকলে ভালো হবে । তাহলে আপনি সহজে বুঝতে পারবেন । "INSTRUCTOR" সে একজন অসাধারন লোক । আপনি তার কাছ থেকে ভাই এবং বন্ধুত্ব দুইটা পাবেন । কিন্তু শিখার দায়িত্ব আপনার। আপনাকে ওনার কাছ থেকে খুঁজে নিয়ে শিখতে হবে। সবশেষ ধন্যবাদ । DevSkill and DevSkill Team

Student Photo

Sheikh Swapnil Musa

Posted On: 23-May-2021

It was really an interesting course and the instructor made every topic so clear that it never was tough to understand those concepts. Arnab vai, the instructor, is really much experienced in ReactJS and related technologies who always had answers to our questions. Lastly, it was an amazing course for learning ReactJS.

Student Photo

Tanvir Ahmed

Posted On: 20-May-2021

About the course - I think the course structure and the topics covered are good enough to learn and understand how a standard react application works. However I personally felt like topics like Redux and Hooks should be given more priority and more complex real time examples should be integrated. About the instructor - Arnab bhaia has been great with us, He was always co-operative, never undermined anyone for asking any kind of question, encouraged to ask even more questions, Welcomed any dev questions with open arms on not only course material but outside the course materials as well.

Student Photo

Jahangir Ahmed

Posted On: 13-May-2021

রিয়েক্টের বেসিক থেকে আডভান্স লেভেলের অনেক গুলো টপিকস কাভার করা হয়েছে কোর্সেটিতে। যা একজন রিয়েক্ট ডেভেলাপারের জন্য খুবই দরকার। কোর্সের ইনসট্রাক্টর খুবই ফ্রেন্ডলি হওয়ায় প্রতিটা টপিকস ভালভাবে আয়ত্তে আনা সম্ভব হয়েছে।

Read More Feedback
Back to top