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
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
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
Working with Lists and Conditionals
- Module Introduction
- Rendering Content Conditionally
- Handling Dynamic Content “The JavaScript Way”
- Outputting Lists (Intro)
- Outputting Lists
- Lists & State
- Updating State Immutably
- Lists & Keys
- Flexible Lists
- Wrap Up
- Time to Practice – Lists & Conditionals
- Useful Resources & Links
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
Debugging React Apps
- Module Introduction
- Understanding Error Messages
- Finding Logical Errors by using Dev Tools & Sourcemaps
- Working with the React Developer Tools
- Using Error Boundaries (React 16+)
- Wrap Up
- Useful Resources & Links
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
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
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
Burger Builder Project: Accessing a Server
- Module Introduction
- Firebase & The Right Database
- Creating the Firebase Project
- Creating the Axios Instance
- Sending a POST Request
- Displaying a Spinner while Sending a Request
- Handling Errors
- Retrieving Data from the Backend
- Removing Old Interceptors
- Useful Resources & Links
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
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
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
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
Adding Redux to our Project
- Module Introduction
- Installing Redux and React Redux
- Basic Redux Setup
- Finishing the Reducer for Ingredients
- Connecting the Burger Builder Container to our Store
- Working on the Total Price Calculation
- Redux & UI State
- Adjusting Checkout and Contact Data
- Wrap Up
- Useful Resources & Links
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
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
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
Improving our Burger Project
- Module Introduction
- Fixing the Redirect to the Frontpage
- Using updateObject in the Entire App
- Sharing the Validation Method
- Using Environment Variables
- Removing console.log()s
- Adding Lazy Loading
- Wrap Up
- Useful Resources & Links
Testing
- Module Introduction
- What is Testing?
- Required Testing Tools
- What To Test?
- Writing our First Test
- Testing Components Continued
- Jest and Enzyme Documentations
- Testing Components Correctly
- Testing Containers
- How to Test Redux
- Wrap Up
- Useful Resources & Links
Deploying the App to the Web
- Module Introduction
- Deployment Steps
- Building the Project
- Example: Deploying on Firebase
- Wrap Up
- Useful Resources & Links
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
Bonus: Next.js
- Module Introduction
- Understanding Server Side Rendering
- Setting Up a Project
- Understanding the Basics
- Next.js & Components & Pages
- Styling our App in Next.js
- Handling (404) Errors
- Deploying our App
- Useful Resources & Links
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
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
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
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
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
Bonus: Building the Burger CSS
- Building the Burger CSS Code
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!

Cart

Learn React Js, Professional Training Course with Internship

Getting Started

Refreshing Next Generation JavaScript (Optional)

Understanding the Base Features & Syntax

Working with Lists and Conditionals

Styling React Components & Elements

Debugging React Apps

Diving Deeper into Components & React Internals

A Real App: The Burger Builder (Basic Version)

Reaching out to the Web (Http / Ajax)

Burger Builder Project: Accessing a Server

Multi-Page-Feeling in a Single-Page-App: Routing

Adding Routing to our Burger Project

Forms and Form Validation

Redux

Adding Redux to our Project

Redux Advanced

Redux Advanced: Burger Project

Adding Authentication to our Burger Project

Improving our Burger Project

Testing

Deploying the App to the Web

Bonus: Working with Webpack

Bonus: Next.js

Bonus: Animations in React Apps

Bonus: A Brief Introduction to Redux Saga

React Hooks

Using Hooks in the Burger Builder

Bonus: Replacing Redux with React Hooks

Bonus: Building the Burger CSS

Next Steps and Course Roundup

Leave a Reply Cancel reply

Subscribe to Newsletter

Modal title