SlideShare a Scribd company logo
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-2
Derek 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 Apps
Kranthi Lakum
 
ASP.NET MVC and ajax
ASP.NET MVC and ajax ASP.NET MVC and ajax
ASP.NET MVC and ajax
Brij Mishra
 
Spsmi13 charts
Spsmi13 chartsSpsmi13 charts
Spsmi13 charts
Derek Gusoff
 
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
András Popovics
 
ASP .Net Core SPA Templates
ASP .Net Core SPA TemplatesASP .Net Core SPA Templates
ASP .Net Core SPA Templates
Eamonn Boyle
 
Sviluppare app per office
Sviluppare app per officeSviluppare app per office
Sviluppare app per office
Fabio 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 marriage
Liam Cleary [MVP]
 
Mobile gotcha
Mobile gotchaMobile gotcha
Mobile gotcha
phegaro
 
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
Jon 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]
 
Semantic editor
Semantic editorSemantic editor
Semantic editor
Henri Bergius
 
Angular js for enteprise application
Angular js for enteprise applicationAngular js for enteprise application
Angular js for enteprise application
vu van quyet
 
AAD with MVC App
AAD with MVC AppAAD with MVC App
AAD with MVC App
Sasha Rosenbaum
 
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
Rohit Rao
 
Progressive web applications development
Progressive web applications developmentProgressive web applications development
Progressive web applications development
Khairul 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 Tomusiak
hannonhill
 
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

Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
SANTOSH PATTNAIK
 
Дмитрий Тежельников «Разработка вэб-решений с использованием 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 Tricks
Gaurav Singh
 
React-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsxReact-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsx
Kulbir4
 
React js Online Training
React js Online TrainingReact js Online Training
React js Online Training
Learntek1
 
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
Amit 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 Technologies
Infinite Graphix Technologies
 
Chalam_JAVA_Portal
Chalam_JAVA_PortalChalam_JAVA_Portal
Chalam_JAVA_Portal
chalamaiah thiruveedhi
 
Sai Sharan_UI_Resume
Sai Sharan_UI_ResumeSai Sharan_UI_Resume
Sai Sharan_UI_Resume
Sai Sharan Madisetty
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
Mike 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 Bangalore
Avinash Kumar
 
Rahul_Resume
Rahul_ResumeRahul_Resume
Rahul_Resume
Rahul Kaduskar
 
Bala Sr Java Developer
Bala  Sr Java DeveloperBala  Sr Java Developer
Bala Sr Java Developer
Java 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
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 
pranayJ
pranayJpranayJ
pranayJ
Pray 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 Tricks
Gaurav 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_.pptx
PriyankShah174006
 
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
Alan Hecht
 
Himanshu_Resume
Himanshu_ResumeHimanshu_Resume
Himanshu_Resume
Himanshu Jain
 

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-9028522.ppsx
React-Js-Online-Training-9028522.ppsxReact-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsx
 
React js Online Training
React js Online TrainingReact js Online Training
React js Online Training
 
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...
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
 
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
 

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 Tricks
Gaurav 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 Tricks
Gaurav Singh
 
Mastering azure devOps - Dot Net Tricks
Mastering azure devOps - Dot Net TricksMastering azure devOps - Dot Net Tricks
Mastering azure devOps - Dot Net Tricks
Gaurav Singh
 
Mastering microservices - Dot Net Tricks
Mastering microservices - Dot Net TricksMastering microservices - Dot Net Tricks
Mastering microservices - Dot Net Tricks
Gaurav Singh
 
Microsoft certified azure developer associate
Microsoft certified azure developer associateMicrosoft certified azure developer associate
Microsoft certified azure developer associate
Gaurav Singh
 
Yoga
YogaYoga

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

B. Ed Syllabus for babasaheb ambedkar education university.pdf
B. Ed Syllabus for babasaheb ambedkar education university.pdfB. Ed Syllabus for babasaheb ambedkar education university.pdf
B. Ed Syllabus for babasaheb ambedkar education university.pdf
BoudhayanBhattachari
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
EduSkills OECD
 
Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47
MysoreMuleSoftMeetup
 
Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"
National Information Standards Organization (NISO)
 
A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
Steve Thomason
 
Nutrition Inc FY 2024, 4 - Hour Training
Nutrition Inc FY 2024, 4 - Hour TrainingNutrition Inc FY 2024, 4 - Hour Training
Nutrition Inc FY 2024, 4 - Hour Training
melliereed
 
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptxSWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
zuzanka
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
mulvey2
 
Stack Memory Organization of 8086 Microprocessor
Stack Memory Organization of 8086 MicroprocessorStack Memory Organization of 8086 Microprocessor
Stack Memory Organization of 8086 Microprocessor
JomonJoseph58
 
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skillsspot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
haiqairshad
 
UGC NET Exam Paper 1- Unit 1:Teaching Aptitude
UGC NET Exam Paper 1- Unit 1:Teaching AptitudeUGC NET Exam Paper 1- Unit 1:Teaching Aptitude
UGC NET Exam Paper 1- Unit 1:Teaching Aptitude
S. Raj Kumar
 
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPLAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
RAHUL
 
Pharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brubPharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brub
danielkiash986
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
PECB
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
ssuser13ffe4
 
Standardized tool for Intelligence test.
Standardized tool for Intelligence test.Standardized tool for Intelligence test.
Standardized tool for Intelligence test.
deepaannamalai16
 
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
PsychoTech Services
 
Bonku-Babus-Friend by Sathyajith Ray (9)
Bonku-Babus-Friend by Sathyajith Ray  (9)Bonku-Babus-Friend by Sathyajith Ray  (9)
Bonku-Babus-Friend by Sathyajith Ray (9)
nitinpv4ai
 
How to deliver Powerpoint Presentations.pptx
How to deliver Powerpoint  Presentations.pptxHow to deliver Powerpoint  Presentations.pptx
How to deliver Powerpoint Presentations.pptx
HajraNaeem15
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
Nguyen Thanh Tu Collection
 

Recently uploaded (20)

B. Ed Syllabus for babasaheb ambedkar education university.pdf
B. Ed Syllabus for babasaheb ambedkar education university.pdfB. Ed Syllabus for babasaheb ambedkar education university.pdf
B. Ed Syllabus for babasaheb ambedkar education university.pdf
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
 
Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47
 
Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"
 
A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
 
Nutrition Inc FY 2024, 4 - Hour Training
Nutrition Inc FY 2024, 4 - Hour TrainingNutrition Inc FY 2024, 4 - Hour Training
Nutrition Inc FY 2024, 4 - Hour Training
 
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptxSWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
 
Stack Memory Organization of 8086 Microprocessor
Stack Memory Organization of 8086 MicroprocessorStack Memory Organization of 8086 Microprocessor
Stack Memory Organization of 8086 Microprocessor
 
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skillsspot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
 
UGC NET Exam Paper 1- Unit 1:Teaching Aptitude
UGC NET Exam Paper 1- Unit 1:Teaching AptitudeUGC NET Exam Paper 1- Unit 1:Teaching Aptitude
UGC NET Exam Paper 1- Unit 1:Teaching Aptitude
 
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPLAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
 
Pharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brubPharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brub
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
 
Standardized tool for Intelligence test.
Standardized tool for Intelligence test.Standardized tool for Intelligence test.
Standardized tool for Intelligence test.
 
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
 
Bonku-Babus-Friend by Sathyajith Ray (9)
Bonku-Babus-Friend by Sathyajith Ray  (9)Bonku-Babus-Friend by Sathyajith Ray  (9)
Bonku-Babus-Friend by Sathyajith Ray (9)
 
How to deliver Powerpoint Presentations.pptx
How to deliver Powerpoint  Presentations.pptxHow to deliver Powerpoint  Presentations.pptx
How to deliver Powerpoint Presentations.pptx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
 

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