- Home
- Courses
- Web Development
- Learn React Js, Professional Training Course with Internship
-
Getting Started
-
Introduction
-
What is React?
-
Join our Online Learning Community
-
Real-World SPAs & React Web Apps
-
Writing our First React Code
-
Why Should we Choose React?
-
React Alternatives
-
Understanding Single Page Applications and Multi Page Applications
-
Course Outline
-
How to get the Most out of This Course
-
Useful Resources & Links
-
Introduction
-
Refreshing Next Generation JavaScript (Optional)
-
Module Introduction
-
Understanding “let” and “const”
-
Arrow Functions
-
Exports and Imports
-
Understanding Classes
-
Classes, Properties and Methods
-
The Spread & Rest Operator
-
Destructuring
-
Reference and Primitive Types Refresher
-
Refreshing Array Functions
-
Wrap Up
-
Next-Gen JavaScript – Summary
-
JS Array Functions
-
Module Introduction
-
Understanding the Base Features & Syntax
-
Module Introduction
-
The Build Workflow
-
Using Create React App
-
Understanding the Folder Structure
-
Understanding Component Basics
-
Understanding JSX
-
JSX Restrictions
-
Creating a Functional Component
-
Components & JSX Cheat Sheet
-
Working with Components & Re-Using Them
-
Outputting Dynamic Content
-
Working with Props
-
Understanding the “children” Prop
-
Understanding & Using State
-
Props & State
-
Handling Events with Methods
-
To Which Events Can You Listen?
-
Manipulating the State
-
Function Components Naming
-
Using the useState() Hook for State Manipulation
-
Stateless vs Stateful Components
-
Passing Method References Between Components
-
Adding Two Way Binding
-
Adding Styling with Stylesheets
-
Working with Inline Styles
-
Time to Practice – The Base Syntax
-
Useful Resources & Links
-
Module Introduction
-
Working with Lists and Conditionals
-
Styling React Components & Elements
-
Module Introduction
-
Outlining the Problem Set
-
Setting Styles Dynamically
-
Setting Class Names Dynamically
-
Adding and Using Radium
-
Using Radium for Media Queries
-
Introducing Styled Components
-
More on Styled Components
-
Styled Components & Dynamic Styles
-
Working with CSS Modules
-
CSS Modules & Media Queries
-
More on CSS Modules
-
Useful Resources & Links
-
Module Introduction
-
Debugging React Apps
-
Diving Deeper into Components & React Internals
-
Module Introduction
-
Splitting an App Into Components
-
Comparing Stateless and Stateful Components
-
Class-based vs Functional Components
-
Class Component Lifecycle Overview
-
Component Creation Lifecycle in Action
-
Component Update Lifecycle (for props Changes)
-
Component Update Lifecycle (for state Changes)
-
Using useEffect() in Functional Components
-
Controlling the useEffect() Behavior
-
Cleaning up with Lifecycle Hooks & useEffect()
-
Cleanup Work with useEffect() – Example
-
Using shouldComponentUpdate for Optimization
-
Optimizing Functional Components with React.memo()
-
When should you optimize?
-
PureComponents instead of shouldComponentUpdate
-
How React Updates the DOM
-
Rendering Adjacent JSX Elements
-
Windows Users Must Read
-
Using React.Fragment
-
Higher Order Components (HOC) – Introduction
-
Another Form of HOCs
-
Passing Unknown Props
-
Setting State Correctly
-
Using PropTypes
-
Using Refs
-
Refs with React Hooks
-
Understanding Prop Chain Problems
-
Using the Context API
-
ContextType & useContext()
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
A Real App: The Burger Builder (Basic Version)
-
Module Introduction
-
Planning an App in React – Core Steps
-
Planning our App – Layout and Component Tree
-
Planning the State
-
MUST READ: Enabling CSS Modules
-
Setting up the Project
-
Creating a Layout Component
-
Starting Implementation of The Burger Builder Container
-
Adding Prop Type Validation
-
Starting the Burger Component
-
Outputting Burger Ingredients Dynamically
-
Calculating the Ingredient Sum Dynamically
-
Adding the Build Control Component
-
Outputting Multiple Build Controls
-
Connecting State to Build Controls
-
Removing Ingredients Safely
-
Displaying and Updating the Burger Price
-
Adding the Order Button
-
Creating the Order Summary Modal
-
Showing & Hiding the Modal (with Animation!)
-
Implementing the Backdrop Component
-
Implementing the Button Component
-
Adding the Price to the Order Summary
-
Adding a Toolbar
-
Using a Logo in our Application
-
Adding Reusable Navigation Items
-
Creating a Responsive Sidedrawer
-
Working on Responsive Adjustments
-
More about Responsive Adjustments
-
Reusing the Backdrop
-
Improving the App – Introduction
-
Prop Type Validation
-
Improving Performance
-
Using Component Lifecycle Methods
-
Changing the Folder Structure
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Reaching out to the Web (Http / Ajax)
-
Module Introduction
-
Understanding Http Requests in React
-
Understanding our Project and Introducing Axios
-
Creating a Http Request to GET Data
-
Rendering Fetched Data to the Screen
-
Transforming Data
-
Making a Post Selectable
-
Fetching Data on Update (without Creating Infinite Loops)
-
Posting Data to the Server
-
Sending a DELETE Request
-
Fixing a Bug
-
Handling Errors Locally
-
Adding Interceptors to Execute Code Globally
-
Removing Interceptors
-
Setting a Default Global Configuration for Axios
-
Creating and Using Axios Instances
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Burger Builder Project: Accessing a Server
-
Multi-Page-Feeling in a Single-Page-App: Routing
-
Module Introduction
-
Routing and SPAs
-
Setting Up Links
-
Setting Up the Router Package
-
react-router vs react-router-dom
-
Preparing the Project For Routing
-
Setting Up and Rendering Routes
-
Rendering Components for Routes
-
Switching Between Pages
-
Using Links to Switch Pages
-
Using Routing-Related Props
-
The “withRouter” HOC & Route Props
-
Styling the Active Route
-
Passing Route Parameters
-
Extracting Route Parameters
-
Parsing Query Parameters & the Fragment
-
Using Switch to Load a Single Route
-
Navigating Programmatically
-
Additional Information Regarding Active Links
-
Understanding Nested Routes
-
Creating Dynamic Nested Routes
-
Redirecting Requests
-
Conditional Redirects
-
Using the History Prop to Redirect (Replace)
-
Working with Guards
-
Handling the 404 Case (Unknown Routes)
-
Loading Routes Lazily
-
Lazy Loading with React Suspense (16.6)
-
Routing and Server Deployment
-
Time to Practice – Routing
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Adding Routing to our Burger Project
-
Module Introduction
-
Building the Checkout Container
-
Setting Up Routing & Routes
-
Navigating to the Checkout Page
-
Navigating Back & To Next Page
-
Passing Ingredients via Query Params
-
Navigating to the Contact Data Component
-
Order Submission & Passing Data Between Pages
-
Adding an Orders Page
-
Implementing Navigation Links
-
Fetching Orders
-
Outputting the Orders
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Forms and Form Validation
-
Module Introduction
-
Analyzing the App
-
Creating a Custom Dynamic Input Component
-
Setting Up a JS Config for the Form
-
Dynamically Create Inputs based on JS Config
-
Handling User Input
-
Handling Form Submission
-
Adding Custom Form Validation
-
Fixing a Common Validation Gotcha
-
Adding Validation Feedback
-
Improving Visual Feedback
-
Showing Error Messages
-
Handling Overall Form Validity
-
Working on an Error
-
Fixing a Bug
-
Useful Resources & Links
-
Module Introduction
-
Redux
-
Module Introduction
-
Understanding State
-
The Complexity of Managing State
-
Understanding the Redux Flow
-
Setting Up Reducer and Store
-
Dispatching Actions
-
Adding Subscriptions
-
Connecting React to Redux
-
Connecting the Store to React
-
Dispatching Actions from within the Component
-
Time to Practice – Dispatching Actions
-
Passing and Retrieving Data with Action
-
Switch-Case in the Reducer
-
Updating State Immutably
-
Updating Arrays Immutably
-
Immutable Update Patterns
-
Outsourcing Action Types
-
Combining Multiple Reducers
-
Understanding State Types
-
Time to Practice – Redux Basics
-
Combining Local UI State and Redux
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Adding Redux to our Project
-
Redux Advanced
-
Module Introduction
-
Adding Middleware
-
Using the Redux Devtools
-
Executing Asynchronous Code – Introduction
-
Introducing Action Creators
-
Handling Asynchronous Code
-
Restructuring Actions
-
Where to Put Data Transforming Logic?
-
Using Action Creators and Get State
-
Using Utility Functions
-
An Alternative Folder Structure
-
Diving Much Deeper
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Redux Advanced: Burger Project
-
Module Introduction
-
Installing the Redux Devtools
-
Preparing the Folder Structure
-
Creating Action Creators
-
Executing Asynchronous Code
-
Fetching Ingredients Asynchronously
-
Initializing Ingredients in the BurgerBuilder
-
Changing the Order of our Ingredients Manually
-
Adding Order Actions
-
Connecting Contact Data Container & Actions
-
The Order Reducer
-
Working on Order Actions
-
Redirect to Improve UX
-
Combining Reducers
-
Handling Purchases & Updating the UI
-
Resetting the Price after Purchases
-
Fetching Orders (via Redux)
-
Checking our Implemented Functionalities
-
Refactoring Reducers
-
Refactoring Reducers Continued
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Adding Authentication to our Burger Project
-
Module Introduction
-
Understanding Authentication in Single Page Applications
-
Required App Adjustments
-
Adding an Auth Form
-
Adding Actions
-
Getting a Token from the Backend
-
Adding Sign-In
-
Storing the Token
-
Logging Users Out
-
Updating the UI Depending on Auth State
-
Forwarding Unauthenticated Users
-
Redirecting the User to the Checkout Page
-
Persistent Auth State with localStorage
-
Fixing Connect + Routing Errors
-
Ensuring App Security
-
Guarding Routes
-
Displaying User Specific Orders
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Improving our Burger Project
-
Testing
-
Deploying the App to the Web
-
Bonus: Working with Webpack
-
Module Introduction
-
DON’T SKIP: Webpack Versions
-
Introducing Webpack
-
How Webpack works
-
Basic Workflow Requirements
-
Project & npm Setup
-
Creating a Basic Folder & File Structure
-
Creating the Basic React Application
-
Installing Production Dependencies
-
Setting Up the Basic Webpack Config
-
Adding File Rules & Babel
-
Loading CSS Files
-
Loading Images & Injecting into HTML Page
-
Production Workflow & Wrap Up
-
Adding babel-polyfill
-
Useful Resources & Links
-
Module Introduction
-
Bonus: Next.js
-
Bonus: Animations in React Apps
-
Module Introduction
-
Preparing the Demo Project
-
Using CSS Transitions
-
Using CSS Animations
-
CSS Transition & Animations Limitations
-
Using React Transition Group
-
Using the Transition Component
-
Wrapping the Transition Component
-
Animation Timings
-
Transition Events
-
The CSSTransition Component
-
Customizing CSS Classnames
-
Animating Lists
-
Alternative Animation Packages
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Bonus: A Brief Introduction to Redux Saga
-
Module Introduction
-
Installing Redux Saga
-
Creating our First Saga
-
Hooking the Saga Up (to the Store and Actions)
-
Moving Logic from the Action Creator to a Saga
-
Moving More Logic Into Sagas
-
Handling Authentication with a Saga
-
Handling Auto-Sign-In with a Saga
-
Moving the BurgerBuilder Side Effects into a Saga
-
Moving the Orders Side Effects into Sagas
-
Why Sagas can be Helpful
-
Diving Deeper into Sagas
-
Useful Resources & Links
-
Module Introduction
-
React Hooks
-
Introduction
-
What are “React Hooks”?
-
The Starting Project
-
Getting Started with useState()
-
More on useState() & State Updating
-
Array Destructuring
-
Multiple States
-
Rules of Hooks
-
Passing State Data Across Components
-
Time to Practice: Hooks Basics
-
Sending Http Requests
-
UseEffect() & Loading Data
-
Understanding useEffect() Dependencies
-
More on useEffect()
-
What’s useCallback()?
-
Working with Refs & useRef()
-
Cleaning Up with useEffect()
-
Deleting Ingredients
-
Loading Errors & State Batching
-
More on State Batching & State Updates
-
Understanding useReducer()
-
Using useReducer() for the Http State
-
Working with useContext()
-
Performance Optimizations with useMemo()
-
Getting Started with Custom Hooks
-
Sharing Data Between Custom Hooks & Components
-
Using the Custom Hook
-
Wrap Up
-
Introduction
-
Using Hooks in the Burger Builder
-
Introduction
-
Converting <App>
-
Routing with React.lazy()
-
Converting the Layout Component
-
Converting withErrorHandler HOC
-
Adjusting the Order & Checkout Containers
-
Converting the BurgerBuilder Container
-
Adjusting Auth & Logout Components
-
Using React.memo() & More!
-
Setting the right useEffect() Dependencies
-
Working with useSelector() and useDispatch()
-
Wrap Up
-
Useful Resources & Links
-
Introduction
-
Bonus: Replacing Redux with React Hooks
-
Module Introduction
-
Starting Project & Why You Would Replace Redux
-
Alternative: Using the Context API
-
Toggling Favorites with the Context API
-
Context API Summary (and why NOT to use it instead of Redux)
-
Getting Started with a Custom Hook as a Store
-
Finishing the Store Hook
-
Creating a Concrete Store
-
Using the Custom Store
-
Custom Hook Store Summary
-
Optimizing the Custom Hook Store
-
Bonus: Managing Multiple State Slices with the Custom Store Hook
-
Wrap Up
-
Useful Resources & Links
-
Module Introduction
-
Bonus: Building the Burger CSS
-
Next Steps and Course Roundup
-
Module Introduction
-
React Rocks! Where to find more Examples
-
More Inspiration: Real-World Projects Built with React
-
Static React Apps with Gatsby.js
-
Introducing React Native
-
Component Libraries (Example: Material UI)
-
Smaller Apps with Preact
-
Comparing React with Preact
-
Congratulations
-
Bonus: More Content!
-
Module Introduction
This content is protected, please login and enroll in the course to view this content!