SlideShare uma empresa Scribd logo
1 de 8
Baixar para ler 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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...
 

Semelhante a 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
 

Semelhante a 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
 

Mais de 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
 

Mais de 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
 

Último

How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPCeline George
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for BeginnersSabitha Banu
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...Postal Advocate Inc.
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxlancelewisportillo
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Mark Reed
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationRosabel UA
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management systemChristalin Nelson
 
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfVirtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfErwinPantujan2
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
Global Lehigh Strategic Initiatives (without descriptions)
Global Lehigh Strategic Initiatives (without descriptions)Global Lehigh Strategic Initiatives (without descriptions)
Global Lehigh Strategic Initiatives (without descriptions)cama23
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxiammrhaywood
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 

Último (20)

How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for Beginners
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
 
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptxYOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translation
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management system
 
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfVirtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
Global Lehigh Strategic Initiatives (without descriptions)
Global Lehigh Strategic Initiatives (without descriptions)Global Lehigh Strategic Initiatives (without descriptions)
Global Lehigh Strategic Initiatives (without descriptions)
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 

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