All exams are online now due to COVID related precautions | Download the app or write to us at info@vskills.in

ReactJs Table of Content


Table of Content
 


Video Module 01 – Welcome

  • Welcome & Asking Good Questions
  • ‘Why should I learn React?’

Video Module 02 – Setting up Your Environment

  • Section Intro: Setting up Your Environment
  • Installing Visual Studio Code
  • Installing Node.js & Yarn

Video Module 03 – Hello React

  • Section Intro: Hello React
  • Setting up a Web Server
  • Hello React
  • Setting up Babel
  • Exploring JSX
  • JSX Expressions
  • Conditional Rendering in JSX
  • ES6 Aside: const and let
  • ES6 Aside: Arrow Functions
  • ES6 Aside: Arrow Functions Part II
  • Events and Attributes
  • Manual Data Binding
  • Forms and Inputs
  • Arrays in JSX
  • Picking an Option
  • Build It: Visibility Toggle

Video Module 04 – React Components

  • Section Intro: React Components
  • Thinking in React
  • ES6 Classes: Part I
  • ES6 Classes: Part II
  • Creating a React Component
  • Nesting Components
  • Component Props
  • Events & Methods
  • Method Binding
  • What Is Component State?
  • Adding State to Counter App: Part I
  • Adding State to Counter App: Part II
  • Alternative setState Syntax
  • Build It: Adding State to VisibilityToggle
  • Indecision State: Part I
  • Indecision State: Part II
  • Summary: Props vs. State

Video Module 05 – Stateless Functional Components

  • Section Intro: Stateless Functional Components
  • The Stateless Functional Component
  • Default Prop Values
  • React Dev Tools
  • Removing Individual Options
  • Lifecycle Methods
  • Saving and Loading Options Data
  • Saving and Loading the Count

Video Module 06 – Webpack

  • Section Intro: Webpack
  • What Is Webpack?
  • Avoid Global Modules
  • Installing & Configuring Webpack
  • ES6 import/export
  • Default Exports
  • Importing npm Modules
  • Setting up Babel with Webpack
  • One Component per File
  • Source Maps with Webpack
  • Webpack Dev Server
  • ES6 class properties

Video Module 07 – Using a Third-Party Component

  • Section Intro: Using a Third-Party Component
  • Passing Children to Component
  • Setting up React-Modal
  • Bonus: Refactoring Other Stateless Functional Components

Video Module 08 – Styling React

  • Section Intro: Styling React
  • Setting up Webpack with SCSS
  • Architecture and Header Styles
  • Reset That $#!*
  • Theming with Variables
  • Big Button & Options List
  • Styling the Options List
  • Styling Option Item
  • Styling React-Modal
  • Mobile Considerations
  • Bonus: Favicon

Video Module 09 – React-Router

  • Section Intro: React Router
  • Server vs. Client Routing
  • Setting Up Budget App
  • React-Router 101
  • Setting up a 404
  • Linking Between Routes
  • Organizing Our Routes
  • Query Strings and URL Parameters
  • Build It: Router for Portfolio Site

Video Module 10 – Redux

  • Section Intro: Redux
  • Why Do We Need Something Like Redux?
  • Setting up Redux
  • Dispatching Actions
  • Subscribing and Dynamic Actions
  • ES6 Object Destructuring
  • ES6 Array Destructuring
  • Refactoring and Organizing
  • Reducers
  • Working with Multiple Reducers
  • ES6 Spread Operator in Reducers
  • Spreading Objects
  • Wrapping up Our Reducers
  • Filtering Redux Data
  • Sorting Redux Data

Video Module 11 – React with Redux

  • Section Intro: Connecting React and Redux
  • Organizing Redux
  • The Higher Order Component
  • Connecting Store and Component with React-Redux
  • Rendering Individual Expenses
  • Controlled Inputs for Filters
  • Dropdown for Picking SortBy
  • Creating Expense Add/Edit Form
  • Setting up a Date Picker
  • Wiring up Add Expense
  • Wiring up Edit Expense
  • Redux Dev Tools
  • Filtering by Dates

Video Module 12 – Testing Your Application

  • Section Intro: Testing React Components
  • Setting up Jest
  • Testing Expenses Action Generators
  • Testing Filters Action Generators
  • Testing Expenses Selector
  • Testing Filters Reducer
  • Testing Expenses Reducer
  • Snapshot Testing
  • Enzyme
  • Snapshot Testing with Dynamic Components
  • Mocking Libraries with Jest
  • Testing User Interaction
  • Test Spies
  • Testing AddExpensePage
  • Testing EditExpensePage
  • Testing ExpenseListFilters
  • Testing ExpenseListFilters: Part II

Video Module 13 – Deploying Your Apps

  • Section Intro: Deploying Your Apps
  • Installing Git
  • What is Git?
  • Integrating Git into Our Project
  • Setting up SSH and Github
  • Production Webpack
  • Creating Separate CSS Files
  • A Production Web Server with Express
  • Deploying with Heroku
  • Regular vs Development Dependencies
  • New Feature Workflow
  • Build It: Adding Total Selector
  • Build It: Adding Summary Component

Video Module 14 – Firebase 101

  • Section Intro: Firebase 101
  • Getting Firebase
  • Writing to the Database
  • ES6 Promises
  • Promises with Firebase
  • Removing Data from Firebase
  • Updating Data
  • Fetching Data from Firebase
  • Array Data in Firebase: Part I
  • Array Data in Firebase: Part II

Video Module 15 – Firebase with Redux

  • Section Intro: Firebase with Redux
  • Asynchronous Redux Actions
  • Testing Async Redux Actions: Part I
  • Testing Async Redux Actions: Part II
  • Creating a Separate Test Database
  • Heroku Environment Variables
  • Fetching Expenses: Part I
  • Fetching Expenses: Part II
  • Remove Expense
  • Update Expense

Video Module 16 – Firebase Authentication

  • Section Intro: Firebase Authentication
  • Login Page and Google Authentication
  • Logging Out
  • Redirecting Login or Logout
  • The Auth Reducer
  • Private Only Routes
  • Public Only Routes
  • Private Firebase Data
  • Data Validation and Deployment

Video Module 17 – Styling Expensify App

  • Section Intro: Styling Expensify App
  • Styling Login Page
  • Styling Buttons
  • Styling Summary Area
  • Styling List Filters
  • Styling Inputs
  • Styling Expense Form
  • Styling Expenses List: Part I
  • Styling Expenses List: Part II
  • Adding Loader
  • Babel Polyfill
  • Final Deployment

Video Module 18 – What Now?

  • Section Into: What Now?
  • Creating the Final Boilerplate
  • Expensify App Enhancements
  • Indecision App Enhancements
  • New App Idea: Blog
  • Until Next Time

Video Module 19 – [New!] Hooks, Context, Fragments, and More

  • Section Intro
  • Using Create React App
  • The useState Hook
  • useState vs. setState
  • Complex State with useState
  • The useEffect Hook
  • useEffect Dependencies
  • Cleaning up Effects
  • The useReducer Hook
  • The Context API & useContext Hook: Part I
  • The Context API & useContext Hook: Part II
  • Fragments
  • Creating Custom Hooks


Apply for certification

https://www.vskills.in/certification/web-development/reactjs-certification