Bdtask Academy Courses Details

  • Home
  • Frontend Development with ReactJS Courses Details

About this Course

Reactjs is the most popular JavaScript library you can use and learn these days to build modern, reactive user interfaces for the web.

This course teaches you Reactjs library in-depth, from the ground up, step by step by diving into all the core basics, exploring tons of examples and also introducing you to advanced concepts as well.

Along the way, we will build a massive e-commerce application using React, Redux, React Hooks, React Suspense, React Router, Context API, Redux-Saga, Stripe API and more.

The curriculum is going to be very hands on as we walk you from start to finish of releasing a professional React project all the way into production. We will start from the very beginning by teaching you React Basics and then going into advanced topics so you can make good decisions on architecture and tools on any of your future ReactJS projects. You'll get all the theory, tons of examples and demos, assignments and exercises and tons of important knowledge that is skipped by most other resources.

This course starts with zero knowledge assumed! All you need is basic web development and JavaScript knowledge. Though the course even includes a brief JavaScript refresher to ensure that we're all on the same path.Check out the full curriculum and confirm your enrollment.

What Will I Learn?

  • Build amazing single page applications with React JS and Redux
  • Learn the latest features in React including Hooks, Context API, Suspense, React Lazy + more
  • LeBecome the top 10% ReactJS Developer
  • Use Redux, Redux Thunk and Redux Saga in your applications
  • Set up authentication and user accounts
  • Learn to lead React projects by making good architecture
  • Learn CSS in JS
  • Converting apps to Progressive Web Apps
  • Handling online payments with Stripe API
  • Master the latest ecosystem of a React Developer from scratch
  • Routing with React Router
  • Using the latest ES6/ES7/ES8/ES9/ES10/ES11 JavaScript to write clean code

Course Details

  • HTML Crash Course
  • Introduction to HTML
  • Document Structure
  • Creating a new page
  • Inline Elements
  • Nesting
  • Attributes and Links
  • Images
  • Lists

  • CSS Crash Course
  • Introduction to CSS - Syntax basics
  • Inheritance
  • The box model
  • Organizing our content with semantic HTML
  • Classes and IDs
  • Spans and Divs
  • Centering content
  • Creating columns
  • Background Images
  • Relative file paths

  • Build a project with HTML & CSS
  • Starting off with a blank file
  • Adding lists to a page
  • Adding Image
  • Adding some style to our page
  • Layout Designing
  • Creating columns

  • JavaScript Fundamentals (Part 1)
  • A Brief Introduction to JavaScript
  • Linking a JavaScript File
  • Values and Variables
  • Data Types
  • let, const and var
  • Strings and Template Literals

  • JavaScript Fundamentals (Part 2)
  • Taking Decisions: if / else Statements
  • Type Conversion and Coercion
  • Truthy and Falsy Values
  • Boolean Logic
  • Logical Operators
  • The switch Statement
  • Statements and Expressions

  • JavaScript Fundamentals (Part 3)
  • Functions
  • Function Declarations vs. Expressions
  • Arrow Functions
  • Basic Array Operations (Methods)
  • Introduction to Objects
  • Object Methods
  • Iteration The for Loop
  • The while Loop

  • Building a todo app with Vanilla JavaScript
  • Build a form to add tasks
  • Insert tasks and show them
  • Save data into local storage
  • Get Data from Local storage and show them

  • ReactJS Introduction
  • React Basics
  • Why use React?
  • ReactDOM & JSX
  • ReactDOM & JSX Practice
  • React Functional Components
  • React Parent/Child Components
  • Styling React with CSS Classes

  • Setting up Developer environment
  • Visual Studio Code configuration
  • npm
  • Prettier
  • ESLint
  • Git
  • Parcel
  • Babel

  • Understanding the Base Features & Syntax
  • Understanding JSX & it's restrictions
  • Understanding Functional Component & Reusing them
  • Working with Props & unsderstand the "children"
  • Understanding & Using State
  • Handling Events with Methods
  • State Manipulation
  • Stateless vs Stateful Components
  • Passing Method References Between Components
  • Working with Styles in multiple ways
  • Assignment - Card Project

  • React Hooks
  • Hooks Intro
  • useState() Part 1 - Creating State
  • useState() Part 2 - Changing State
  • useState() Part 3 - Changing More Complex State
  • useEffect() Part 1
  • useEffect() Part 2
  • React Project Ideas for Practicing

  • Building a simple Card project

  • Building a blog project

  • Advanced React Hooks
  • useCallback
  • useMemo
  • useRef

  • Todo App With ReactJS

  • A Real World App:
  • Convert an HTML template into ReactJS

  • Build a movie search App
  • How To Get Your Movie DB API Key
  • Add Base Styles to Our App
  • Create Movie Card Component
  • Style the Search Movies Component
  • Create the Search Movies Function
  • Manage State with React useState Hook
  • Display Movie Information
  • Style the Movie Cards

  • What is ES6, ES7+
  • Arrow Functions
  • Exports and Imports
  • Classes, Properties and Methods
  • The Spread & Rest Operator
  • Destructuring Objects and Arrays
  • Reference and Primitive Types Refresher And more

  • Build a shopping cart with vanilla JavaScript

  • Advanced JavaScript
  • Asynchronous JavaScript, AJAX and APIs
  • Welcome to Callback Hell
  • Promises and the Fetch API
  • Consuming Promises
  • Chaining Promises
  • Handling Rejected Promises

  • Discussion on Higher Order Components
  • Using PropTypes
  • Use of useRef() Hook
  • Understanding Prop Chain Problem
  • Use of Context API

  • Building Form with Bootstrap
  • Managing the User Input State
  • Adding Validation & Resetting Logic
  • Adding a Users List Component
  • Managing a List Of Users via State
  • Adding The "ErrorModal" Component
  • Managing the Error State

  • Building a Shopping Cart APP (Part 1)
  • "Header", "Cart", & "Button" Component
  • "Products" Component
  • Individual Product Items & Displaying Them
  • Add new Product

  • Building a Shopping Cart APP (Part 2)
  • Working on the "Shopping Cart" Component
  • Adding a Modal via a React Portal
  • Managing Cart & Modal State
  • Adding a Cart Context
  • Using the Context
  • Adding a Cart Reducer
  • Working with Refs & Forward Refs
  • Display Cart Items
  • Making Items Removable

  • Authentication to React APP
  • User Signup
  • User Login
  • Managing The Auth State
  • Using The Token For Requests To Protected Resources
  • Redirecting The User & Logout
  • Protecting Frontend Pages
  • Persisting The User Authentication Status

  • Real life project
  • Shopping cart

  • State Management with Context API
  • Introducing React Context (Context API)
  • Why and When should we use Context API
  • Build a shopping cart project with Context API

  • State Management with Redux (An Alternative To The Context API)
  • Redux vs Context API
  • How Redux Works
  • Diving into Redux
  • Build a shopping cart project with React Redux

  • Build a project with Ant Design ReactJS Framework
Show more

Related Course

Flutter

A Complete Guide Flutter Framework for building native iOS and Android apps

Web Design

Professional creative web Design Course

Python

Learn Python programming from scratch with hands-on exercises

Web Development

Become a Certified HTML, CSS, JavaScript Web Developer

Market Place

  • Freelancer

  • Upwork

  • Fiverr