SlideShare a Scribd company logo
3
Most read
4
Most read
11
Most read
React JS
with TypeScript
a MERN & Full Stack Course
React JS
with TypeScript
By NAVEEN SAGGAM
Founder UiBrains Technologies
What is React JS
 It’s an open source library to build Rich User Interfaces
 Used to develop Single Page Applications
 Developed & Maintained by Facebook
 Released in 2013
 Current version 17.0.0 (Oct, 2020)
 Most popular front end library as of today along with Angular
Pre-Requisites
 Basic Knowledge on HTML
 Basic Concepts on CSS
 Good Understanding of JavaScript with Functions & ES6 Features
 Bootstrap knowledge is added advantage
 Visit : UiBrains Technologies YouTube Channel for above tech Stack.
React JS Learning Plan
React Core
Module
React
Hooks
Redux ,
Thunk
Node ,
Express ,
MongoDB
Material UI
Prime
React
Compone
nts
Final Major
Projects
React JS Core Module
 Creation of First Application using react-app & folder structure
 Creation of custom component with class & functional
 Applying styles using CSS , Inline , Internal , External
 Adding Bootstrap to React JS Application & Examples
 Manage Props & States in Custom Components
 Events Handlings in React JS with Examples
 Form Handlings in React JS with Examples
 Conditional & List Rendering in React JS
 Components Life-Cycle in React JS
 Context API in React JS
 HTTP Calls in React JS using Axios
 React Routing Concept & Examples
 Big Basket Application using React JS
React JS Hooks
 Hooks are a new addition in React 16.8. They let you use state and other
React features without writing a class
 Introduction to React Hooks
 useState Hook
 useEffect Hook
 useRef Hook
 useContext Hook
 useReducer Hook
 Big Basket Application Using Hooks
Redux , Thunk , Saga
 Introduction to plain Redux with Examples
 Using multiple Reducers
 Implement Redux with React JS with examples
 useSelector() , useDispatch() Examples
 Redux-Logger Configuration
 Redux-Dev Tools Configuration for Debugging
 Redux-Thunk Configuration & Examples
 Introduction to React Saga
 Big Basket Application with Hooks & Redux
Introduction to Material UI
 React components for faster and easier web development. Build your own
design system, or start with Material Design
 Layout Components
 Input Components
 Navigation Components
 Data Display Components
Introduction to Prime React
 The ultimate collection of design-agnostic, flexible and accessible
React UI Components.
 Input Components
 Buttons
 Data Components
 Panels in Prime React
Unit Testing with React JS
 Introduction to Unit Testing
 Introduction to Test Driven Development
 Integration of JEST Framework with React
 Generation of Test Coverage Reports
 Integration of other Testing libraries
Server Side Integration
 Implementation of Node JS Server with Routing
 Implementation of Express JS with Routing
 Introduction to REST API and Development
 Integration of Mongo DB with local & Cloud
 Developing Models with Mongoose Library
Final Project – 1
(React Kart – an Online Shopping App)
 Bootstrap Layout with Responsive side nav with Full Page landing page
 Implementation of React Routing & Navigation for various links
 JSON Web Token (JWT) based Authentication
 Image upload functionality for products
 Server side with Node , Express JS with Mongo DB integration
 Backend Data modeling with Mongoose
 Stripe Payments integration for products purchase
 Final Application Deployment to Heroku App
 Future implementations of the projects
Final Project – 2
(React Social – a Social Media Application)
 Bootstrap Layout with Responsive side nav with Full Page landing page
 Implementation of React Routing & Navigation for various links
 JSON Web Token (JWT) based Authentication
 Server side with Node , Express JS with Mongo DB integration
 Backend Data modeling with Mongoose
 Final Application Deployment to Heroku App
 Future implementations of the projects
Real
Images
Other Applications
Course Information (05-RCJS-EVNG)
 Total Duration 50days (100 hrs.)
 Live & Hands-on Training on Each Technology
 Covers basics to Advanced level with App Development
 Daily videos , Files , Slides Sharing for Practice
 Class Timings 6PM – 8PM IST(Daily 2hrs)
 Monday - Saturday (Sunday Holiday)
 Course Fee : 6000 INR for (Indian) -> screen shot + email + batch code
 100 US-Dollars for (Others)
 Google pay / Phone Pay / Paytm : +91-98 44 80 45 33
 naveen.uibrains@gmail.com
Software Installation
UiBrains
 Notepad++
 Node JS
 Mongo DB
 Insomnia / Postman
 Heroku
 Git
 TypeScript
 Editors (WebStorm / Visual Studio Code)
Any Queries ?

More Related Content

Similar to React JS online training with Typescript. A MERN stack tutorial. (20)

PDF
Why React is the Future of Front-End Development.pdf
Elightwalk Technology PVT. LTD.
 
PDF
Review on React JS
ijtsrd
 
PDF
React.js vs angular.js a comparison
Narola Infotech
 
DOCX
Vishnu(java)
venkata vishnu
 
PDF
MERN/MEAN Full Stack Developer Course with AI & IoT Integrated
TechEntry
 
PDF
Integrating Python with NodeJS and React Powerful Combination for Web Develop...
DarshanaMallick
 
PPTX
angular.pptx
ChandraPrakash287820
 
PPTX
Getting Started With React Native Presntation
Knoldus Inc.
 
PPTX
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
PDF
aniruddha_adak_full_stack_developer_resume.pdf
a1ha3kloveonpvt
 
PDF
why_choose_react_js_development_for_building_websites_in_2023.pdf
sarah david
 
PDF
React JS Online Course Training in NareshIT
TejaswiniNareshIT
 
PPT
The Best Guide to Know What, Why, When to Use Is ReactJS
WeblineIndia
 
PPTX
React ppt
Naresh Thamizharasan
 
DOC
Rajiv ranjan resume-us
Rajiv Ranjan
 
PDF
AngularJS Vs ReactJS_ What’s The Difference_.pdf
Onviqa Pvt. Ltd.
 
PPTX
React-JS.pptx
jatinkumarchhabra101
 
PDF
React Training.pdf
kishorebrolly123
 
PDF
MERN Stack Developer Course Syllabus
NxtWave
 
Why React is the Future of Front-End Development.pdf
Elightwalk Technology PVT. LTD.
 
Review on React JS
ijtsrd
 
React.js vs angular.js a comparison
Narola Infotech
 
Vishnu(java)
venkata vishnu
 
MERN/MEAN Full Stack Developer Course with AI & IoT Integrated
TechEntry
 
Integrating Python with NodeJS and React Powerful Combination for Web Develop...
DarshanaMallick
 
angular.pptx
ChandraPrakash287820
 
Getting Started With React Native Presntation
Knoldus Inc.
 
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
aniruddha_adak_full_stack_developer_resume.pdf
a1ha3kloveonpvt
 
why_choose_react_js_development_for_building_websites_in_2023.pdf
sarah david
 
React JS Online Course Training in NareshIT
TejaswiniNareshIT
 
The Best Guide to Know What, Why, When to Use Is ReactJS
WeblineIndia
 
Rajiv ranjan resume-us
Rajiv Ranjan
 
AngularJS Vs ReactJS_ What’s The Difference_.pdf
Onviqa Pvt. Ltd.
 
React-JS.pptx
jatinkumarchhabra101
 
React Training.pdf
kishorebrolly123
 
MERN Stack Developer Course Syllabus
NxtWave
 

Recently uploaded (20)

PPTX
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
PDF
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
PDF
The Different Types of Non-Experimental Research
Thelma Villaflores
 
PPTX
SPINA BIFIDA: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
PPTX
A PPT on Alfred Lord Tennyson's Ulysses.
Beena E S
 
PPTX
I AM MALALA The Girl Who Stood Up for Education and was Shot by the Taliban...
Beena E S
 
PDF
0725.WHITEPAPER-UNIQUEWAYSOFPROTOTYPINGANDUXNOW.pdf
Thomas GIRARD, MA, CDP
 
PDF
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - GLOBAL SUCCESS - CẢ NĂM - NĂM 2024 (VOCABULARY, ...
Nguyen Thanh Tu Collection
 
PDF
The-Ever-Evolving-World-of-Science (1).pdf/7TH CLASS CURIOSITY /1ST CHAPTER/B...
Sandeep Swamy
 
PPTX
Unit 2 COMMERCIAL BANKING, Corporate banking.pptx
AnubalaSuresh1
 
PDF
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
PDF
Knee Extensor Mechanism Injuries - Orthopedic Radiologic Imaging
Sean M. Fox
 
PDF
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
PPTX
How to Create a PDF Report in Odoo 18 - Odoo Slides
Celine George
 
PDF
The dynastic history of the Chahmana.pdf
PrachiSontakke5
 
PDF
community health nursing question paper 2.pdf
Prince kumar
 
PDF
Lesson 2 - WATER,pH, BUFFERS, AND ACID-BASE.pdf
marvinnbustamante1
 
PDF
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
PPTX
Universal immunization Programme (UIP).pptx
Vishal Chanalia
 
PPT
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
The Different Types of Non-Experimental Research
Thelma Villaflores
 
SPINA BIFIDA: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
A PPT on Alfred Lord Tennyson's Ulysses.
Beena E S
 
I AM MALALA The Girl Who Stood Up for Education and was Shot by the Taliban...
Beena E S
 
0725.WHITEPAPER-UNIQUEWAYSOFPROTOTYPINGANDUXNOW.pdf
Thomas GIRARD, MA, CDP
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - GLOBAL SUCCESS - CẢ NĂM - NĂM 2024 (VOCABULARY, ...
Nguyen Thanh Tu Collection
 
The-Ever-Evolving-World-of-Science (1).pdf/7TH CLASS CURIOSITY /1ST CHAPTER/B...
Sandeep Swamy
 
Unit 2 COMMERCIAL BANKING, Corporate banking.pptx
AnubalaSuresh1
 
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
Knee Extensor Mechanism Injuries - Orthopedic Radiologic Imaging
Sean M. Fox
 
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
How to Create a PDF Report in Odoo 18 - Odoo Slides
Celine George
 
The dynastic history of the Chahmana.pdf
PrachiSontakke5
 
community health nursing question paper 2.pdf
Prince kumar
 
Lesson 2 - WATER,pH, BUFFERS, AND ACID-BASE.pdf
marvinnbustamante1
 
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
Universal immunization Programme (UIP).pptx
Vishal Chanalia
 
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
Ad

React JS online training with Typescript. A MERN stack tutorial.

  • 1. React JS with TypeScript a MERN & Full Stack Course
  • 2. React JS with TypeScript By NAVEEN SAGGAM Founder UiBrains Technologies
  • 3. What is React JS  It’s an open source library to build Rich User Interfaces  Used to develop Single Page Applications  Developed & Maintained by Facebook  Released in 2013  Current version 17.0.0 (Oct, 2020)  Most popular front end library as of today along with Angular
  • 4. Pre-Requisites  Basic Knowledge on HTML  Basic Concepts on CSS  Good Understanding of JavaScript with Functions & ES6 Features  Bootstrap knowledge is added advantage  Visit : UiBrains Technologies YouTube Channel for above tech Stack.
  • 5. React JS Learning Plan React Core Module React Hooks Redux , Thunk Node , Express , MongoDB Material UI Prime React Compone nts Final Major Projects
  • 6. React JS Core Module  Creation of First Application using react-app & folder structure  Creation of custom component with class & functional  Applying styles using CSS , Inline , Internal , External  Adding Bootstrap to React JS Application & Examples  Manage Props & States in Custom Components  Events Handlings in React JS with Examples  Form Handlings in React JS with Examples  Conditional & List Rendering in React JS  Components Life-Cycle in React JS  Context API in React JS  HTTP Calls in React JS using Axios  React Routing Concept & Examples  Big Basket Application using React JS
  • 7. React JS Hooks  Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class  Introduction to React Hooks  useState Hook  useEffect Hook  useRef Hook  useContext Hook  useReducer Hook  Big Basket Application Using Hooks
  • 8. Redux , Thunk , Saga  Introduction to plain Redux with Examples  Using multiple Reducers  Implement Redux with React JS with examples  useSelector() , useDispatch() Examples  Redux-Logger Configuration  Redux-Dev Tools Configuration for Debugging  Redux-Thunk Configuration & Examples  Introduction to React Saga  Big Basket Application with Hooks & Redux
  • 9. Introduction to Material UI  React components for faster and easier web development. Build your own design system, or start with Material Design  Layout Components  Input Components  Navigation Components  Data Display Components
  • 10. Introduction to Prime React  The ultimate collection of design-agnostic, flexible and accessible React UI Components.  Input Components  Buttons  Data Components  Panels in Prime React
  • 11. Unit Testing with React JS  Introduction to Unit Testing  Introduction to Test Driven Development  Integration of JEST Framework with React  Generation of Test Coverage Reports  Integration of other Testing libraries
  • 12. Server Side Integration  Implementation of Node JS Server with Routing  Implementation of Express JS with Routing  Introduction to REST API and Development  Integration of Mongo DB with local & Cloud  Developing Models with Mongoose Library
  • 13. Final Project – 1 (React Kart – an Online Shopping App)  Bootstrap Layout with Responsive side nav with Full Page landing page  Implementation of React Routing & Navigation for various links  JSON Web Token (JWT) based Authentication  Image upload functionality for products  Server side with Node , Express JS with Mongo DB integration  Backend Data modeling with Mongoose  Stripe Payments integration for products purchase  Final Application Deployment to Heroku App  Future implementations of the projects
  • 14. Final Project – 2 (React Social – a Social Media Application)  Bootstrap Layout with Responsive side nav with Full Page landing page  Implementation of React Routing & Navigation for various links  JSON Web Token (JWT) based Authentication  Server side with Node , Express JS with Mongo DB integration  Backend Data modeling with Mongoose  Final Application Deployment to Heroku App  Future implementations of the projects
  • 17. Course Information (05-RCJS-EVNG)  Total Duration 50days (100 hrs.)  Live & Hands-on Training on Each Technology  Covers basics to Advanced level with App Development  Daily videos , Files , Slides Sharing for Practice  Class Timings 6PM – 8PM IST(Daily 2hrs)  Monday - Saturday (Sunday Holiday)  Course Fee : 6000 INR for (Indian) -> screen shot + email + batch code  100 US-Dollars for (Others)  Google pay / Phone Pay / Paytm : +91-98 44 80 45 33  [email protected]
  • 18. Software Installation UiBrains  Notepad++  Node JS  Mongo DB  Insomnia / Postman  Heroku  Git  TypeScript  Editors (WebStorm / Visual Studio Code)