Program Overview:
Dooey React.js Training Course will help you master the fundamentals of React—an
important web framework for developing user interfaces—including JSX, props, state, and
events. This training course dives into Redux, covering topics like reducers, actions, and the
state tree.
Program Features:
- 52 hours of Blended Learning
- 30 hours of instructor-led training
- One real-life course-end project
- Flexibility to choose classes
- Industry-recognized course completion certificate
Delivery Mode:
Blended – Online self-paced learning and live virtual classroom
Prerequisites:
For this course, you need to have experience with building front-end web applications with
HTML, CSS, and JavaScript.
Target Audience:
This React.js certification course is designed for web developers who design and build
UI/UX solutions for mobile and web apps and want to design with React as efficiently as
possible using a JavaScript library.
Key Learning Outcomes:
At the end of this course, you will:
- Know how to build amazing single-page applications with React and Redux
- Learn and apply fundamental concepts behind structuring Redux applications
- Realize and appreciate the power of building composable components
- Understand and use NPM, Babel, and ES6 JavaScript syntax
Certification Details and Criteria:
- Complete at least 85 percent of the course or attend one complete batch
- Successful completion and evaluation of any one of the projects
Live Virtual Class Curriculum
Lesson 01 – ES6
- Introduction
- Array Helper Methods
- Let and Const
- Template Literals
- Arrow Functions
- Default Function Parameters
- Rest and Spread
- Destructuring
- Classes
- Promises
- Fetch
Lesson 02 – Fundamentals of React
- Why React?
- Rendering UI
- Components
- Component Lifecycle Events
- Forms
- Component Interaction
- React Router
Lesson 03 – Introduction to Redux
- Why Redux?
- Core Concepts of Redux
Lesson 04 – React & Redux
- The React Redux Node Package
- Provider Component
- Connecting React Components with Redux Store
- Reducer Composition
- Normalization: Points to Keep in Mind When Designing a Redux Store
- Redux Middleware
Self-Paced Curriculum
Lesson 01 – Course Introduction
- Welcome To The Course
- Course & Projects Outline
Lesson 02 – Getting Started
- What Is React
- Environment Setup
- ES6 Refresher – Part 1
- ES6 Refresher – Part 2
- ES6 Refresher – Part 3
- Create React App vs Manual Setup
- Installing & Using The CLI
- A Look At The Initial React Files & How They Work
Lesson 03 – Components, JSX & Props
- Thinking In Components
- What Is JSX
- JSX Expressions
- Creating Your First Component
- Functional Components
- Working With Props
- Typechecking With PropTypes
- CSS In React
- Adding Bootstrap
Lesson 04 – State & The Context API
- Changing State From Another Component
- Using The Context API & Provider State
- Adding A Context Reducer For Actions
- Creating State
- Events In React
- Changing State
Lesson 05 – Working With Forms
- Creating A Form With State
- Controlled Components & onChange
- TextInputGroup Component For DRY Code
- Uncontrolled Components & Refs
- Form Submit Action To Context
- Error Checking & Display
Lesson 06 – React Router v4
- React Router Setup
- Links, Params & Redirect
- 404 Not Found Page
Lesson 07 – Lifecycle, HTTP & Deployment
- Lifecycle Methods
- GET Requests
- POST & DELETE Requests
- Using AsyncAwait
- EditContact Component & Fetch Contact
- PUT Request & Update Action
- Deploy To Github Pages
Lesson 08 – Learning Redux
- A Note On Redux
- App Starting Point For Redux
- Redux Store Setup & Contact Reducer
- Connecting Components & Dispatching Actions
- Creating A Separate Actions File
- Delete & Add Contact Action
Lesson 09 – Redux Thunk & HTTP
- GET Request Dispatch
- POST & DELETE Request Dispatch
- Get Single Contact For Edit
- PUT Request & Dispatch
- Deploy To Apache
Lesson 10 – Client Panel Firebase Project – Part 1
- App Intro & Demo
- FirebaseFirestore Setup
- Setup & AppNavbar Component
- Dashboard, Sidebar & Clients Component
- React-Redux-Firebase Setup
- Connect Clients Component To Firestore
- Add Client To Firestore
- Client Details Component
- Balance Update & Delete
- Edit Client In Firestore
Lesson 11 – Client Panel Firebase Project – Part 2
- Login Functionality
- Logout & Navbar Update
- Route Protection
- Notify State & Alert Component
- Settings Reducer & Actions
- Settings Component
- Persist Settings To LocalStorage
- Implementing Settings
- Register Functionality
- Deploy To Firebase
Course End Project:
Project 1: Building an event finder app in React
Build a React app where users can view and promote upcoming events, set up a JSON server
for testing until backend APIs are ready and finally manage the state using Redux.
