SlideShare a Scribd company logo
1 of 8
Download to read offline
Page
1
Mastering React with Redux
About the Course
The Mastering React with Redux course is primarily designed for UI Developer(s)/Web Developer(s) who want to learn
how to develop high performance, event-driven, real-time and scalable applications.
In this course, you will learn the JavaScript, ES6, React, React Router, Redux, Middleware, and Gulp fundamental like
objects, classes, functions, components, routing, State and Lifecycle, JSX, Forms, data flow, actions and much more.
Course objective
At the completion of this course, attendees will be able to;
• Describe JavaScript and ES6 concepts like objects, classes, arrow function.
• Explore React basic and advanced in-depth concepts
• Create components, routing and forms validations etc.
• Explore Redux basic and advanced in-depth concepts
• Create REST Services using Express
• Consume REST API
• Secure application based on user roles
• Scale SPA for Phone, Tablets, Laptop & Desktop using Bootstrap
• Use JS Task runner like Gulp.
• Publish their App on cloud server Heroku.
Who can do this course?
All professionals who are keen to develop high performance web applications should go for this course.
Pre-requisites
Anyone who wants to learn React with Redux should have a basic knowledge of programming.
Software/Tools
Visual Studio Code, Node.js, React CLI
Page
2
Course Curriculum
Module 1
JavaScript and ES6
• Understanding JavaScript
• Understanding ES6
• JavaScript Data Types – Primitive & Non-Primitive
• Naming a variable
• Number Mathematics
var, let and const
• Using var
• Using let
• Using const
Functions and Arrow Function
• Different types of Functions
• Named Function
• Anonymous Function
• Arrow Function
• Anonymous Function vs. Arrow Function
Objects and Constructor Function
• Creating Object
• Literal Object
• Primitive types as Objects
• Constructor Function
Class and Methods
• ES6 Class
• Class Members
• Templated String
Module 2
Introduction to React
• Introduction to React
• Why React?
• Advantages of React
• React Development Style
Setting Up Environment
• Installing Node.js
• Installing Visual Studio and Visual Studio Code
• Useful VS Extensions for React Development
• Useful VS Code Extensions for Angular Development
Page
3
Get Started with React
• Setting up the React App
• Running the React App
• React Initialization Process
• React Virtual DOM
• React Ecosystem
• React versus other frameworks
JSX
• Introduction to JSX
• JSX for components
• Attributes
• Expressions
• React without JSX
Module 3
React Components
• Render Elements
• Understanding Component
• Creating a Component
• Types of Components
• Functional Components
• Class Components
Advanced React Components
• Component Life-Cycle
• Virtual DOM
• Composition
• Communication between Components
• Reusable Components
Module 4
Data Flow
• Introduction to One Way Data Flow in React
• Props and State
• Passing Data to Child Component
• Handling State of Component
Event and Actions
• Events in React
• Data Binding
• Events and Actions
• Handling Events
• Communication Among Components
Page
4
Module 5
Redux
• Introduction to Redux
• Redux vs. Flux
• Redux Flow Overview
• Redux Setup
Redux Flow
• Actions
• Reducers and Root Reducers
• Store
• Dispatch Actions
• Action creators
Async Actions and Action Flow
• Async Action Creators
• Async Flow
• Promises
Module 6
Routing using React Router
• Understanding Routing
• Introduction to React Router
• Defining Routes
• Routes Handling
• Handling Route Parameters
• Nested Routes
React Forms and Controls
• Introduction to React Forms
• Creating Forms
• Forms Validations
• Custom Validations
Module 7
Introduction to Node
• Understanding Node.js
• Uses of Node.js
• Creating Node.js App
HTTP
• Building a Web Server
• HTTP Request Methods, Headers
• Response Codes and Headers
Page
5
Express Framework
• Understanding Express
• Installing Express
• Creating and Running Express App
REST API with Express
• Introduction to REST
• Creating REST API using Express
• Introduction to Postman
• Testing REST API using Postman REST Client
REST API and Axios
• Introduction to Axios
• Using Axios with React
• Consuming REST API using Axios in React
• Performing CRUD operations
Module 8
Unit Testing
• Introduction to Unit Testing
• React Unit Testing setup
• React Unit Testing frameworks
• Unit Testing with TestUtils
Testing React Components
• Testing Components
• Testing DOM Manipulations
• Testing Properties and State
• Simulating Events
Module 9 (Project)
Discussing Project Architecture
• Understanding Application Architecture
• Discussing Application Entities Properties
• Discussing Relationship among Application Entities
Developing Application Architecture
• Creating Server building blocks
• Creating Client-Side building blocks
Designing DB and REST Service
• Designing Database
• Developing REST API
Developing Frontend using React
• Defining Modules – User, Admin
Page
6
• Defining Routing
• Developing User Login and Signup Page
• Developing User and Admin Dashboard
Module 10 (Project)
Security
• Implementing Token based Authentication
• Managing User session
• Implementing Authorization
Route Protection
• Protecting a Route from Unauthorized Access
• Need of Route Protection
Category and Product Listing
• Category CRUD Operations
• Product CRUD Operations
Shopping Cart
• Creating Shopping Cart
• Adding Products to Shopping Cart
• Removing Products from Shopping Cart
Module 11 (Project)
Gulp - JavaScript Task Runner
• Understanding Gulp
• Using Gulp to build app
Cloud Deployment
• Deploying using GitHub
• React Hosting Options
• Hosting React App on cloud server Heroku
Project Details
Description
You will learn how to develop an online book store site. The site will show the list of products to User/Customer. A user
can search and purchase books. He can see the previous order history. Here, admin will be responsible for managing books
and their categories.
The application will use React recommended architecture with extensible approach. We would be using payment gateway
to do online payment and finally publishing it.
Page
7
Project Architecture
The primary goal of this architecture is to share as much code as possible across the web application and further reuse
existing code for mobile apps development if necessary.
This architecture will help you to develop SPA with the recommended design patterns and practices.
What you will learn through project?
• Creating shopping cart using React.
• Integrating payment gateway.
• Validating data at client side and server side.
• Using Node's Package Manager – NPM.
• Scaling web app for Phone, Tablets, and Laptop & Desktop.
• Securing you application based on user roles.
• Using JS Task runner like Gulp.
• Deploying your app on Github.
• Publishing your app on cloud server.
Contact Us
• For more information about the course, visit: www.dotnettricks.com/training/masters-program/react-redux
• Feel free to call us at +91 9999 123 502 or email us at info@dotnettricks.com

More Related Content

What's hot

Share point saturday presentation 9 29-2012-2
Share point saturday presentation 9 29-2012-2Share point saturday presentation 9 29-2012-2
Share point saturday presentation 9 29-2012-2Derek Gusoff
 
Rishabh Technology and Tools Overview (1)
Rishabh Technology and Tools Overview (1)Rishabh Technology and Tools Overview (1)
Rishabh Technology and Tools Overview (1)D Trivedi
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsKranthi Lakum
 
ASP.NET MVC and ajax
ASP.NET MVC and ajax ASP.NET MVC and ajax
ASP.NET MVC and ajax Brij Mishra
 
Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019András Popovics
 
ASP .Net Core SPA Templates
ASP .Net Core SPA TemplatesASP .Net Core SPA Templates
ASP .Net Core SPA TemplatesEamonn Boyle
 
Sviluppare app per office
Sviluppare app per officeSviluppare app per office
Sviluppare app per officeFabio Franzini
 
Portal and Intranets
Portal and Intranets Portal and Intranets
Portal and Intranets Redar Ismail
 
SharePoint Saturday The Conference DC - How the bcs saved my marriage
SharePoint Saturday The Conference DC - How the bcs saved my marriageSharePoint Saturday The Conference DC - How the bcs saved my marriage
SharePoint Saturday The Conference DC - How the bcs saved my marriageLiam Cleary [MVP]
 
Mobile gotcha
Mobile gotchaMobile gotcha
Mobile gotchaphegaro
 
SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5Jon Galloway
 
SharePoint Saturday The Conference DC - How the client object model saved the...
SharePoint Saturday The Conference DC - How the client object model saved the...SharePoint Saturday The Conference DC - How the client object model saved the...
SharePoint Saturday The Conference DC - How the client object model saved the...Liam Cleary [MVP]
 
Angular js for enteprise application
Angular js for enteprise applicationAngular js for enteprise application
Angular js for enteprise applicationvu van quyet
 
4. Introduction to ASP.NET MVC - Part I
4. Introduction to ASP.NET MVC - Part I4. Introduction to ASP.NET MVC - Part I
4. Introduction to ASP.NET MVC - Part IRohit Rao
 
Progressive web applications development
Progressive web applications developmentProgressive web applications development
Progressive web applications developmentKhairul Anwar Sedek
 
Using the Cascade Server Web Service API, by Artur Tomusiak
Using the Cascade Server Web Service API, by Artur TomusiakUsing the Cascade Server Web Service API, by Artur Tomusiak
Using the Cascade Server Web Service API, by Artur Tomusiakhannonhill
 
Come riprogettare le attuali farm solution di share point con il nuovo modell...
Come riprogettare le attuali farm solution di share point con il nuovo modell...Come riprogettare le attuali farm solution di share point con il nuovo modell...
Come riprogettare le attuali farm solution di share point con il nuovo modell...Fabio Franzini
 

What's hot (20)

Share point saturday presentation 9 29-2012-2
Share point saturday presentation 9 29-2012-2Share point saturday presentation 9 29-2012-2
Share point saturday presentation 9 29-2012-2
 
Rishabh Technology and Tools Overview (1)
Rishabh Technology and Tools Overview (1)Rishabh Technology and Tools Overview (1)
Rishabh Technology and Tools Overview (1)
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
ASP.NET MVC and ajax
ASP.NET MVC and ajax ASP.NET MVC and ajax
ASP.NET MVC and ajax
 
Spsmi13 charts
Spsmi13 chartsSpsmi13 charts
Spsmi13 charts
 
Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019
 
ASP .Net Core SPA Templates
ASP .Net Core SPA TemplatesASP .Net Core SPA Templates
ASP .Net Core SPA Templates
 
Sviluppare app per office
Sviluppare app per officeSviluppare app per office
Sviluppare app per office
 
Portal and Intranets
Portal and Intranets Portal and Intranets
Portal and Intranets
 
SharePoint Saturday The Conference DC - How the bcs saved my marriage
SharePoint Saturday The Conference DC - How the bcs saved my marriageSharePoint Saturday The Conference DC - How the bcs saved my marriage
SharePoint Saturday The Conference DC - How the bcs saved my marriage
 
Mobile gotcha
Mobile gotchaMobile gotcha
Mobile gotcha
 
SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5
 
SharePoint Saturday The Conference DC - How the client object model saved the...
SharePoint Saturday The Conference DC - How the client object model saved the...SharePoint Saturday The Conference DC - How the client object model saved the...
SharePoint Saturday The Conference DC - How the client object model saved the...
 
Semantic editor
Semantic editorSemantic editor
Semantic editor
 
Angular js for enteprise application
Angular js for enteprise applicationAngular js for enteprise application
Angular js for enteprise application
 
AAD with MVC App
AAD with MVC AppAAD with MVC App
AAD with MVC App
 
4. Introduction to ASP.NET MVC - Part I
4. Introduction to ASP.NET MVC - Part I4. Introduction to ASP.NET MVC - Part I
4. Introduction to ASP.NET MVC - Part I
 
Progressive web applications development
Progressive web applications developmentProgressive web applications development
Progressive web applications development
 
Using the Cascade Server Web Service API, by Artur Tomusiak
Using the Cascade Server Web Service API, by Artur TomusiakUsing the Cascade Server Web Service API, by Artur Tomusiak
Using the Cascade Server Web Service API, by Artur Tomusiak
 
Come riprogettare le attuali farm solution di share point con il nuovo modell...
Come riprogettare le attuali farm solution di share point con il nuovo modell...Come riprogettare le attuali farm solution di share point con il nuovo modell...
Come riprogettare le attuali farm solution di share point con il nuovo modell...
 

Similar to Mastering react with redux

Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...MskDotNet Community
 
Mastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksGaurav Singh
 
React js Online Training
React js Online TrainingReact js Online Training
React js Online TrainingLearntek1
 
React-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsxReact-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsxKulbir4
 
Amit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JSAmit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JSAmit Kumar
 
Full Stack Developer Course | Infinite Graphix Technologies
Full Stack Developer Course | Infinite Graphix TechnologiesFull Stack Developer Course | Infinite Graphix Technologies
Full Stack Developer Course | Infinite Graphix TechnologiesInfinite Graphix Technologies
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and ReactMike Melusky
 
Best React js Training course in Bangalore
Best React js Training course in BangaloreBest React js Training course in Bangalore
Best React js Training course in BangaloreAvinash Kumar
 
Bala Sr Java Developer
Bala  Sr Java DeveloperBala  Sr Java Developer
Bala Sr Java DeveloperJava Dev
 
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...Simplilearn
 
pranayJ
pranayJpranayJ
pranayJPray B
 
Mastering asp.net mvc - Dot Net Tricks
Mastering asp.net mvc - Dot Net TricksMastering asp.net mvc - Dot Net Tricks
Mastering asp.net mvc - Dot Net TricksGaurav Singh
 
Exploring the Best Node.js Frameworks_.pptx
Exploring the Best Node.js Frameworks_.pptxExploring the Best Node.js Frameworks_.pptx
Exploring the Best Node.js Frameworks_.pptxPriyankShah174006
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 

Similar to Mastering react with redux (20)

Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
 
Mastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net Tricks
 
React js Online Training
React js Online TrainingReact js Online Training
React js Online Training
 
React-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsxReact-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsx
 
Amit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JSAmit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JS
 
Full Stack Developer Course | Infinite Graphix Technologies
Full Stack Developer Course | Infinite Graphix TechnologiesFull Stack Developer Course | Infinite Graphix Technologies
Full Stack Developer Course | Infinite Graphix Technologies
 
Chalam_JAVA_Portal
Chalam_JAVA_PortalChalam_JAVA_Portal
Chalam_JAVA_Portal
 
Sai Sharan_UI_Resume
Sai Sharan_UI_ResumeSai Sharan_UI_Resume
Sai Sharan_UI_Resume
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
 
Best React js Training course in Bangalore
Best React js Training course in BangaloreBest React js Training course in Bangalore
Best React js Training course in Bangalore
 
Rahul_Resume
Rahul_ResumeRahul_Resume
Rahul_Resume
 
Bala Sr Java Developer
Bala  Sr Java DeveloperBala  Sr Java Developer
Bala Sr Java Developer
 
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...
 
pranayJ
pranayJpranayJ
pranayJ
 
Mastering asp.net mvc - Dot Net Tricks
Mastering asp.net mvc - Dot Net TricksMastering asp.net mvc - Dot Net Tricks
Mastering asp.net mvc - Dot Net Tricks
 
Exploring the Best Node.js Frameworks_.pptx
Exploring the Best Node.js Frameworks_.pptxExploring the Best Node.js Frameworks_.pptx
Exploring the Best Node.js Frameworks_.pptx
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
Himanshu_Resume
Himanshu_ResumeHimanshu_Resume
Himanshu_Resume
 
Resume
ResumeResume
Resume
 

More from Gaurav Singh

Aws architect certification training -Dot Net Tricks
Aws architect certification training -Dot Net TricksAws architect certification training -Dot Net Tricks
Aws architect certification training -Dot Net TricksGaurav Singh
 
Aws cloud practitioner training - Dot Net Tricks
Aws cloud practitioner training - Dot Net TricksAws cloud practitioner training - Dot Net Tricks
Aws cloud practitioner training - Dot Net TricksGaurav Singh
 
Mastering azure devOps - Dot Net Tricks
Mastering azure devOps - Dot Net TricksMastering azure devOps - Dot Net Tricks
Mastering azure devOps - Dot Net TricksGaurav Singh
 
Mastering microservices - Dot Net Tricks
Mastering microservices - Dot Net TricksMastering microservices - Dot Net Tricks
Mastering microservices - Dot Net TricksGaurav Singh
 
Microsoft certified azure developer associate
Microsoft certified azure developer associateMicrosoft certified azure developer associate
Microsoft certified azure developer associateGaurav Singh
 

More from Gaurav Singh (6)

Aws architect certification training -Dot Net Tricks
Aws architect certification training -Dot Net TricksAws architect certification training -Dot Net Tricks
Aws architect certification training -Dot Net Tricks
 
Aws cloud practitioner training - Dot Net Tricks
Aws cloud practitioner training - Dot Net TricksAws cloud practitioner training - Dot Net Tricks
Aws cloud practitioner training - Dot Net Tricks
 
Mastering azure devOps - Dot Net Tricks
Mastering azure devOps - Dot Net TricksMastering azure devOps - Dot Net Tricks
Mastering azure devOps - Dot Net Tricks
 
Mastering microservices - Dot Net Tricks
Mastering microservices - Dot Net TricksMastering microservices - Dot Net Tricks
Mastering microservices - Dot Net Tricks
 
Microsoft certified azure developer associate
Microsoft certified azure developer associateMicrosoft certified azure developer associate
Microsoft certified azure developer associate
 
Yoga
YogaYoga
Yoga
 

Recently uploaded

“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitolTechU
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...jaredbarbolino94
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfMr Bounab Samir
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPCeline George
 
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxCELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxJiesonDelaCerna
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
Meghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentMeghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentInMediaRes1
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxEyham Joco
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
MICROBIOLOGY biochemical test detailed.pptx
MICROBIOLOGY biochemical test detailed.pptxMICROBIOLOGY biochemical test detailed.pptx
MICROBIOLOGY biochemical test detailed.pptxabhijeetpadhi001
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementmkooblal
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfMahmoud M. Sallam
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
Blooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxBlooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxUnboundStockton
 

Recently uploaded (20)

“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERP
 
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxCELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptx
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Meghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentMeghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media Component
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptx
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
MICROBIOLOGY biochemical test detailed.pptx
MICROBIOLOGY biochemical test detailed.pptxMICROBIOLOGY biochemical test detailed.pptx
MICROBIOLOGY biochemical test detailed.pptx
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of management
 
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
 
Pharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdfPharmacognosy Flower 3. Compositae 2023.pdf
Pharmacognosy Flower 3. Compositae 2023.pdf
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
Blooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docxBlooming Together_ Growing a Community Garden Worksheet.docx
Blooming Together_ Growing a Community Garden Worksheet.docx
 

Mastering react with redux

  • 1.
  • 2. Page 1 Mastering React with Redux About the Course The Mastering React with Redux course is primarily designed for UI Developer(s)/Web Developer(s) who want to learn how to develop high performance, event-driven, real-time and scalable applications. In this course, you will learn the JavaScript, ES6, React, React Router, Redux, Middleware, and Gulp fundamental like objects, classes, functions, components, routing, State and Lifecycle, JSX, Forms, data flow, actions and much more. Course objective At the completion of this course, attendees will be able to; • Describe JavaScript and ES6 concepts like objects, classes, arrow function. • Explore React basic and advanced in-depth concepts • Create components, routing and forms validations etc. • Explore Redux basic and advanced in-depth concepts • Create REST Services using Express • Consume REST API • Secure application based on user roles • Scale SPA for Phone, Tablets, Laptop & Desktop using Bootstrap • Use JS Task runner like Gulp. • Publish their App on cloud server Heroku. Who can do this course? All professionals who are keen to develop high performance web applications should go for this course. Pre-requisites Anyone who wants to learn React with Redux should have a basic knowledge of programming. Software/Tools Visual Studio Code, Node.js, React CLI
  • 3. Page 2 Course Curriculum Module 1 JavaScript and ES6 • Understanding JavaScript • Understanding ES6 • JavaScript Data Types – Primitive & Non-Primitive • Naming a variable • Number Mathematics var, let and const • Using var • Using let • Using const Functions and Arrow Function • Different types of Functions • Named Function • Anonymous Function • Arrow Function • Anonymous Function vs. Arrow Function Objects and Constructor Function • Creating Object • Literal Object • Primitive types as Objects • Constructor Function Class and Methods • ES6 Class • Class Members • Templated String Module 2 Introduction to React • Introduction to React • Why React? • Advantages of React • React Development Style Setting Up Environment • Installing Node.js • Installing Visual Studio and Visual Studio Code • Useful VS Extensions for React Development • Useful VS Code Extensions for Angular Development
  • 4. Page 3 Get Started with React • Setting up the React App • Running the React App • React Initialization Process • React Virtual DOM • React Ecosystem • React versus other frameworks JSX • Introduction to JSX • JSX for components • Attributes • Expressions • React without JSX Module 3 React Components • Render Elements • Understanding Component • Creating a Component • Types of Components • Functional Components • Class Components Advanced React Components • Component Life-Cycle • Virtual DOM • Composition • Communication between Components • Reusable Components Module 4 Data Flow • Introduction to One Way Data Flow in React • Props and State • Passing Data to Child Component • Handling State of Component Event and Actions • Events in React • Data Binding • Events and Actions • Handling Events • Communication Among Components
  • 5. Page 4 Module 5 Redux • Introduction to Redux • Redux vs. Flux • Redux Flow Overview • Redux Setup Redux Flow • Actions • Reducers and Root Reducers • Store • Dispatch Actions • Action creators Async Actions and Action Flow • Async Action Creators • Async Flow • Promises Module 6 Routing using React Router • Understanding Routing • Introduction to React Router • Defining Routes • Routes Handling • Handling Route Parameters • Nested Routes React Forms and Controls • Introduction to React Forms • Creating Forms • Forms Validations • Custom Validations Module 7 Introduction to Node • Understanding Node.js • Uses of Node.js • Creating Node.js App HTTP • Building a Web Server • HTTP Request Methods, Headers • Response Codes and Headers
  • 6. Page 5 Express Framework • Understanding Express • Installing Express • Creating and Running Express App REST API with Express • Introduction to REST • Creating REST API using Express • Introduction to Postman • Testing REST API using Postman REST Client REST API and Axios • Introduction to Axios • Using Axios with React • Consuming REST API using Axios in React • Performing CRUD operations Module 8 Unit Testing • Introduction to Unit Testing • React Unit Testing setup • React Unit Testing frameworks • Unit Testing with TestUtils Testing React Components • Testing Components • Testing DOM Manipulations • Testing Properties and State • Simulating Events Module 9 (Project) Discussing Project Architecture • Understanding Application Architecture • Discussing Application Entities Properties • Discussing Relationship among Application Entities Developing Application Architecture • Creating Server building blocks • Creating Client-Side building blocks Designing DB and REST Service • Designing Database • Developing REST API Developing Frontend using React • Defining Modules – User, Admin
  • 7. Page 6 • Defining Routing • Developing User Login and Signup Page • Developing User and Admin Dashboard Module 10 (Project) Security • Implementing Token based Authentication • Managing User session • Implementing Authorization Route Protection • Protecting a Route from Unauthorized Access • Need of Route Protection Category and Product Listing • Category CRUD Operations • Product CRUD Operations Shopping Cart • Creating Shopping Cart • Adding Products to Shopping Cart • Removing Products from Shopping Cart Module 11 (Project) Gulp - JavaScript Task Runner • Understanding Gulp • Using Gulp to build app Cloud Deployment • Deploying using GitHub • React Hosting Options • Hosting React App on cloud server Heroku Project Details Description You will learn how to develop an online book store site. The site will show the list of products to User/Customer. A user can search and purchase books. He can see the previous order history. Here, admin will be responsible for managing books and their categories. The application will use React recommended architecture with extensible approach. We would be using payment gateway to do online payment and finally publishing it.
  • 8. Page 7 Project Architecture The primary goal of this architecture is to share as much code as possible across the web application and further reuse existing code for mobile apps development if necessary. This architecture will help you to develop SPA with the recommended design patterns and practices. What you will learn through project? • Creating shopping cart using React. • Integrating payment gateway. • Validating data at client side and server side. • Using Node's Package Manager – NPM. • Scaling web app for Phone, Tablets, and Laptop & Desktop. • Securing you application based on user roles. • Using JS Task runner like Gulp. • Deploying your app on Github. • Publishing your app on cloud server. Contact Us • For more information about the course, visit: www.dotnettricks.com/training/masters-program/react-redux • Feel free to call us at +91 9999 123 502 or email us at info@dotnettricks.com