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.

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

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

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.

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.

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

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

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.

Conditional Rendering

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

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.

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

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.

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.

Form and Form Validation

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

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.

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

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

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

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

Advance Hooks

There some other hooks in ReactJs and we will have a brief overview of those hooks.

- useMemo
- useCallback
- useLayout
- useReducer

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

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.

I recently completed the React Js course designed for beginners to mid-level developers, and I must say it was an excellent experience. The instructor, Arnab Dhar, did an exceptional job of guiding us from the fundamentals to the more advanced topics in React Js. The course was well-structured and covered everything from states and props, advanced react hooks, Redux and context. As a beginner, I appreciated the pace and depth of the course, and I was able to grasp the concepts easily. The course also emphasized the importance of dedicating time from our daily routine to explore and deepen our knowledge of React Js, which I found to be extremely valuable. Finally, the collaborative final project would be a great opportunity for us to put our skills into practice and produce better results by working together. Overall, I would highly recommend this React Js course to anyone looking to start their journey in React Js, whether they're a beginner or mid-level programmer.

Mizanur Rahman

ReactJs - The Complete Guide Batch: 4

Assalamu alaikum, This is monirul islam , a member of ReactJs - The Complete Guide Batch: 4 . This is my first course at DevSkill . I hope I will be able to join many other courses in DevSkill in future inshaallah. Now come to main topic, I was very poor in frontend development , this is why i participate in this course, So i needed some basic to advanced classes what i got from this course. I am happy to finish this course very well. Arnob dhar vaiya is outstanding and very helpful person. He helped us any kind of problems what i faced in the course. There is a topic can included in this course is MERN development. If MERN development 2 or 3 classes would be included in this course then it could be more effective for us. That's end from me, thank you.

Monirul Islam

ReactJs - The Complete Guide Batch: 4

The instructor was really helpful. The basics were covered thoroughly and there were a lot of assignments. Course content was a bit short though. For people unfamiliar with frontend it will be tough to grasp all the concepts.

Fazle rabbi

ReactJs - The Complete Guide Batch: 4

I am happy with the course outcome. I have learned React from the very basic. The trainer was skilled and helpful. Overall it was a good ReactJS course.

Sakhawat Hossain

ReactJs - The Complete Guide Batch: 4

The instructor was really helpful and friendly. I started from scratch. Did not have really good footing over js, or CSS. The instructor helped all of us with also this. The overall Teaching process was really good. Gave us a really good idea of the basics of react

Tanbin Akter Mitaly

ReactJs - The Complete Guide Batch: 3