React for Front-End Developers Training
About Us
Learn to leverage the power of React in this hands-on, project-based course. This online ReactJS course will take you from the absolute basics to building scalable, sophisticated web applications. You’ll learn all the latest ReactJS concepts - Redux, React Router, server-side rendering, JSX, events, Webpack, and much more with practical examples. The objective of this ReactJS certification training course is to make you a successful web developer with mastery over React. Get started with SnippetBucket technologies ReactJS training today to turn your ideas into reality! for one person. If it’s genuine for the one, it’s genuine for the rest.
Duration Time
1 month Training
What you'll learn
Learn all the React fundamentals you need to know to get you above the ground
Get your hands dirty writing and running real React code
Learn to integrate your React frontend with a Firebase backend
See how React pairs with Typescript to make more possible
Use React Tracked to develop a small web app with global staters.
Module - 1
The Road To React- theone with hook
1 Fundamentals of React
Entering React after learning JavaScript
Ternary Operator in React
Object Destructuring & Spread Operators
Arrow Functions in React
Higher-Order Functions in React
Map, Reduce & Filter in React
Modularity & Import/Export in React
Named & Default Exports
Libraries in React
Meet the First React Component
React JSX
Lists in React
React Props
React State
React Advanced State
React Impossible States
Meet Another React Component
React Component Instantiation
React DOM
React Component Definition (Advanced)
Handler Function in JSX
Callback Handlers in JSX
Inline Handler in JSX
Lifting State in React
React Controlled Components
Props Handling (Advanced)
React Side-Effects
React Custom Hooks (Advanced)
React Fragments
Reusable React Component
React Component Composition
React Asynchronous Data
React Conditional Rendering
Data Fetching with React
Data Re-Fetching in React
Memoized Handler in React (Advanced)
Explicit Data Fetching with React
Third-Party Libraries in React
Async/Await in React (Advanced)
Forms in React
2 React Legacy
React Class Components
React Class Components: State
Imperative React
3 Styling in React
CSS in React
CSS modules in React
SVGS in React
4 React Maintenance
Performance - Avoiding First Render Computation
Performance - Avoiding Heavy Computation
Unit Testing to Integration Testing
React Project Structure
5 Fun Challenges
Challenge: Sorting
Solution Review: Sorting
Challenge: Reverse Sort
Solution Review: Reverse Sort
Challenge: Remember Last Searches
Solution Review: Remember Last Searches
Challenge: Avoiding Duplicates
Solution Review: Avoiding Duplicates
Challenge: Paginated Fetch
Solution Review: Paginated Fetch
Module 2
Integrating Firebase With React
1 Introduction to Firebase
What is Firebase?
Why Use Firebase in React?
Initializing the Application
Verify: Setup
React Router for Firebase
Verify: Routing
2 Firebase in React Setup
Setting Up the Environment
Firebase Authentication
Firebase Database
Firebase Hosting
Creating a React App
Project Configuration
Initializing Firebase
Exercise 1: Adding Firebase!
Provide Firebase in React
Exercise 2: Firebase in React!
3 Firebase Interface
Firebase's Authentication API
Exercise 3: Firebase Authentication
Sign Up with React and Firebase
Sign-Up Form Validation
Higher-Order Components
Final Touches
Exercise 4: Sign Up with Firebase
Sign In with React and Firebase
Exercise 5: Sign In with Firebase
Sign Out with React and Firebase
Exercise 6: Sign Out with Firebase
4 Session Handling
Session Handling with Firebase/React
Exercise 7: Session Handling
Session Handling with Higher-Order Components
Exercise 8: Optimized Session Handling
5 Password Features with Firebase
Password Reset
Password Change
Exercise 9: Password Reset and Change
6 Firebase Authorization in React
Protected Routes in React with Authorization
Exporting the Higher-Order Component
Final Enhancements
Exercise 10: Protected Routes
7 Firebase Real-time Database
Firebase Real-time Database in React
Exercise 11: Real-time Database!
Manage Users with Firebase's Real-time Database in React
Exercise 12: Our Final App!
Module 3
Using TypeScript With React
1 Why Typescript?
Understanding TypeScript
Understanding the benefits of TypeScript with React
2 Using Basic Types
Understanding the types in JavaScript
Using type annotations
Understanding type inference
Understanding the any type
Understanding and using the void type
Using the never type
Using the unknown type
Using type assertions
3 Creating Types
Creating a strongly-typed array
Creating a strongly-typed tuple
Creating a strongly-typed object
Creating type aliases
Creating interfaces
Creating union types
Creating intersection types
Understanding type compatibility
4 Working with Generic Types
Using some standard generic types
Creating generic functions
Creating generic interfaces
Creating generic type aliases
Creating generic classes
5 Creating Strongly-typed Function Component Props
Specifying a type for function component props
Specifying a prop as optional
Specifying a default for a function component prop
Specifying a type for an object prop
Specifying a type for a function pro
6 Creating Strongly-typed Function Component State
Creating strongly-typed function component states with useState
Creating strongly-typed function component state with useReducer
7 Creating Strongly-typed Class Components
Creating strongly-typed class props
Creating strongly-typed class state
Using access modifie
8 Creating Strongly-typed Component Events and Event Handlers
Creating strongly-typed event handlers
Creating strongly-typed events
9 Creating Strongly-typed Context
Creating a simple strongly-typed context for function components
Creating a complex strongly-typed context for function components
Consuming a context in a strongly-typed class component
10 Creating Strongly-typed Refs
Creating strongly-typed refs in function components
Creating strongly-typed refs in class components
11 Creating React Projects with TypeScript using Create React App
Creating a basic project
Configuring linting and adding autoformatting
Running tests and producing a production-ready buil
12 Creating a React and TypeScript Project Manually
Creating a basic project
Adding React and TypeScript
Adding Babel
Adding code linting and autoformatting
Adding Webpack
Adding npm scripts
Module 4
React Trecked :Creating Web Apps With Global State
1 Creating a Counter App only with React Context
Creating a Counter App with useState
Creating a Counter App with useReducer
2 Introducing React Tracked to the Counter App
Understanding Render Optimization
Modifying the Counter App with React Tracked
3 Developing ToDo App with React Tracked and useReducer
Initial State and Reducer
TodoList Component
TodoItem Component
NewTodo Component
App Component and File Structu
4 Developing ToDo App with React Tracked, useState and Immer
Simple Store with useState
useTodoList Hook
useAddTodo Hook
useDeleteTodo Hook
useToggleTodo Hook
useQuery Hook
TodoList Component
TodoItem Component
NewTodo Component
App Component and File Structure
Quick enquiry
Ask us on Whatsapp Chat.