Pre-Course Survey

Discussion Forum: React & Redux

Getting Started

Full Stack Web Development

3 Topics

01. What is Full Stack Web Development

02. Library and Framework

03. React for Front End Development

Setting Up the Environment

2 Topics

01. Installing Visual Studio Code

02. Node.Js and NPM

Version Control with Git

4 Topics

01. Setting Up Git

02. Git Commit

03. More Git Commands

04. Online Git Repositories

8 Topics

05. Spread and Rest Operator

06. Destructuring

07. Array Mapping

08. Import and Export

Diving into React

Intro to React

3 Topics

1. What is React?

2. How Does React Work?

3. What will we learn?

Basic Features and Syntax

15 Topics

01. Writing First React Code

02. Install create-react-app

03. Project Folder Structure Part 1

04. Project Folder Structure Part 2

05. React Component Basic

06. JSX Syntax

07. Writing Class Component

08. Dynamic Functional Component

09. Dynamic Class Component

10. Writing a new Component

11. State of a Component

12. Changing State with JS event

13. Pass Method in props

14. Change state with input elements

15. Styling Components

Component Lists

4 Topics

1. Creating Component List

2. Change state

3. Key of List children

4. Make Lists Flexible

Conditional Rendering

2 Topics

1. Render Conditionally

2. Better Solution

Better Project Structure

5 Topics

1. Clean root Component

2. Import state from external file

3. Make a Component for lists

4. Passing function reference as props

5. Stateless and Stateful Component

Restaurant Project (Basics)

7 Topics

1. Setup Project Folder

2. Component Tree

3. Navigation bar using Reactstrap

4. Creating Menu Component

5. Designing Menu Item

6. DishDetail Component

7. LoadComments Component

Debugging React Apps

2 Topics | 1 Quiz

1. React Developer Tools

2. Debugging inside VS Code

React JS Quiz: Debugging React Apps

React Router and Forms

Component LifeCycle (class components only)

4 Topics | 1 Quiz

1. Component Creation LifeCycle

2. Component Update LifeCycle (by props)

3. Component Update LifeCycle (by state)

4. Updated LifeCycle methods or hooks

React JS Quiz: Component LifeCycle (class components only)

React Router

10 Topics

1. SPA and MPA

2. Preparing project for using Router

3. Setting up React Router Packages

4. Rendering Routes

5. Rendering Components with Routes

6. Router related props

7. Some changes in project

8. Passing Parameter in Route

9. Switch the Routes

10. Redirect Routes

Restaurant Project (Adding Router)

4 Topics

1. Preparing project for Router

2. Designing Navigation Bar

3. Adding Routes

4. Some changes in Menu Component

React Forms

3 Topics

1. Controlled Component

2. Taking care of submitted data

3. Uncontrolled Form

Restaurant Project (Adding Forms)

6 Topics

1. Fixing Redirect issue

2. Contact Form

3. Contact Form Handling

4. Footer Component

5. Load Comments from comments.js

6. Dynamic Title

Redux

Basics of Redux

5 Topics

1. Complexity of Managing State

2. Redux Flow

3. Store and Reducer

4. Dispatching Actions

5. Store Subscription

Restaurant Project (Applying Redux)

10 Topics

1. Reducer for React App

2. Creating store and connecting to React App

3. Accessing Redux Store from Components

4. Dispatching Action from Component

5. Creating CommentForm

6. Updating Redux Store from CommentForm

7. Dispatching Action as Props

8. Dispatching Action as Props (Different way)

9. Combining Multiple Reducers

10. Switching Action Types

Restaurant Project (Advanced Redux)

5 Topics

1. Using Action Creators

2. Applying Middleware

3. Using Fontawesome in Project

4. Using Redux Thunk for Async Code

5. Explaining Redux Thunk

Restaurant Project (React Redux Form)

3 Topics

1. Changing Contact Form

2. Form Validation

3. Placing Form data in Redux Store

Server-side Communication

REST API and JSON Server

7 Topics

1. Client-Server Communication (HTTP)

2. REST API

3. REST API Examples

4. Setting up your own REST API

5. Using REST API from React App

6. Error Handling, POST, PUT, DELETE

7. Handling Responses using State

Restaurant Project (Using REST API)

6 Topics

1. Setting Up JSON Server

2. Fetching Dishes from Server

3. Fetch Comments from Server

4. Post Comment to Server

5. Submit Contact Form to Server

6. Error Handling

Project, Authentication and Deployment

Burger Builder Project

15 Topics

1 Project Setup

2 Creating Navigation Bar

3 Creating Ingredient Component

4 Show Ingredients according to State

5 Controls Component

6 Add and Remove Ingredients

7 Showing Price on Card

8 Show Order Summary

9 Adding Router

10 Adding Redux

11 Creating Checkout Option

12 Saving Orders to Database

13 Improving Checkout Component

14 Fetching the Orders

15 Completing Orders Component

Adding Authentication to Burger Builder

10 Topics

1 Creating the Auth Form using Formik

2 Adding Validation

3 Switching Between Sign Up and Login

4 Authentication through Firebase

5 Using Redux for Authentication Token

6 Using Local Storage to Store token

7 Adding Logout Option

8 Adding Spinner

9 Error Handling

10 Showing User Specific Orders

Deploying the Burger Builder Project

2 Topics

1. Project Setup for Deployment

2. Deploying to firebase

Bonus Lectures

React Hooks

4 Topics

1. useState() Function

2. Using Array Destructuring

3. Rules of Using Hooks

4. useEffect() Function

React Animation

3 Topics

1. Using Transition Component

2. Timing and Event

3. Using CSSTransition

User Feedback on This Course

Previous Topic

Next Topic

03. Arrow Function

React for Frontend Development with Redux ES6 Refresher 03. Arrow Function

Lesson Progress

0% Complete

// Normal 
function retSome(num) {
  return num*num;
}

// Arrow Function
let saySomething = num => num*num;


console.log(saySomething(25));

Previous Topic

Back to Lesson

Next Topic