SlideShare a Scribd company logo
React JS
The following topics will be covered in our
React JS
Online Training:
Copyright @ 2015 Learntek. All Rights Reserved. 2
What is React JS?
• React JS Training- React JS basically is an open-source JavaScript library
which is used for building user interfaces specifically for single page
applications. It’s used for handling view layer for web and mobile apps.
React also allows us to create reusable UI components.
• It can be used with a combination of other JavaScript libraries or
frameworks, such as Angular JS in MVC.
Copyright @ 2015 Learntek. All Rights Reserved. 3
Why React?
▪ Easy to learn
Anyone with a basic previous knowledge in programming can easily
understand React. For react you just need basic knowledge of CSS and
HTML.
▪ Native Approach
React can be used to create mobile applications (React Native). And React
is a follows reusability, meaning extensive code reusability is supported.
Copyright @ 2015 Learntek. All Rights Reserved. 4
…Continues…
▪ Data Binding
React uses one-way data binding and an application architecture called
Flux controls the flow of data to components through one control point –
the dispatcher. It’s easier to debug self-contained components of large
ReactJS apps.
▪ Performance
React does not offer any concept of a built-in container for dependency.
Copyright @ 2015 Learntek. All Rights Reserved. 5
Training Topics
• React Js Training -Who Is This Course For?
• How Is This Course Different from the React and Flux course?
• Why Redux?
Copyright @ 2015 Learntek. All Rights Reserved. 6
Environment Setup
• Environment Overview
• Versions Used in This Course
• Hot Reloading
• Install Node
• Create package.json
• Editors
• Install npm Packages
• Introduce npm Scripts
• Create src Directory
• Set up Webpack
• Set up editorconfig
• Set up Babel
• Set up Express
• Create Start Script
• Create Start Message
• Set up ESLin
• Create Parallel Scripts
• Set up Testing
• Add Test Scripts
Copyright @ 2015 Learntek. All Rights Reserved. 7
React Component Approaches
• Four Ways to Create React Components
• ES5 Create Class Component
• ES6 Class Component
• ES5 Stateless Component
• ES6 Stateless Component
• When Should I Use Each Style?
• Other Ways to Create Components
• Container vs. Presentation Components
Copyright @ 2015 Learntek. All Rights Reserved. 8
Initial App Structure
• Create Initial Components
• Create App Layout
• Configure Routing
• Update Entry Point
• Create Styles
• Create Header
• Create Course Page
Copyright @ 2015 Learntek. All Rights Reserved. 9
Intro to Redux
• Do I Need Redux?
• Three Core Redux Principles
• Flux Similarities
• Flux Differences
• Redux Flow Overview
Copyright @ 2015 Learntek. All Rights Reserved. 10
Actions, Stores, and Reducers
• Actions
• Store
• What Is Immutability?
• Why Immutability?
• Handling Immutability
• Reducers
Copyright @ 2015 Learntek. All Rights Reserved. 11
Connecting React to Redux
• Container vs. Presentational Components
• React-redux Introduction
• mapStateToProps
• mapDispatchToProps
• A Chat with Redux
Copyright @ 2015 Learntek. All Rights Reserved. 12
Redux Flow
• Create Simple Add Course Form
• Binding in ES6
• Actions
• Reducers
• Root Reducer
• Store
• Instantiate Store and Provider
• Connect Container
Copyright @ 2015 Learntek. All Rights Reserved. 13
Step Through Redux Flow
• MapDispatchToProps Manual Mapping
• bindActionCreators
• Container Structure Review
• Action Type Constants
Copyright @ 2015 Learntek. All Rights Reserved. 14
Async in Redux
Copyright @ 2015 Learntek. All Rights Reserved. 15
• Why a Mock API?
• Async Library Options
• Thunk Overview
• Mock API Setup
• Remove Inline Form
• Add Thunk to Store
• Create Load CoursesThunk
• Action Naming Conventions
• Load Courses in Reducer
• Dispatch Action on Page Load
• Create Course List Component
Async Writes in Redux
• Create Manage Course Page
• Create Manage Course Form
• Create Form Input Components
• Use Manage Course Form
• Create Author Actions
• Create Author Reducer
• Map Author Data for Dropdown
• Create Form Change Handler
• Create Save Course Thunk
• Handle Creates and Updates in
Reducer
• Dispatch Create and Update
• Redirect via React Router Context
• Populate Form via
mapStateToProps
• Update State via component
WillReceiveProps
Copyright @ 2015 Learntek. All Rights Reserved. 16
Async Status and Error Handling
• Create Preloader Component
• Create AJAX Status Actions
• Create AJAX Status Reducer
• Call Begin AJAX in Thunks
• Hide Preloader Based on Status
• Use Promises to Wait for Thunks
• Create Form Submission Loading
Indicator
• Display Save Notification
• Error Handling
Copyright @ 2015 Learntek. All Rights Reserved. 17
Testing React
• Testing Frameworks
• Helper Libraries
• Testing React with React Test Utils
• Testing React with Enzyme
Copyright @ 2015 Learntek. All Rights Reserved. 18
Testing Redux
• Testing Connected React Components
• Testing mapStateToProps
• Testing Action Creators
• Testing Reducers
• Testing Thunks
• Testing the Store
Copyright @ 2015 Learntek. All Rights Reserved. 19
Prerequisite:
▪ Basic working knowledge of HTML,CSS,JavaScript, Text editor-Visual
Studio code/We storm/Atom and preffered one is Visual Studio .
Copyright @ 2015 Learntek. All Rights Reserved. 20
Copyright @ 2015 Learntek. All Rights Reserved. 21

More Related Content

PDF
Introduction to React JS
PPTX
React js
PPTX
React JS: A Secret Preview
PPTX
Reactjs
PPTX
React.js - The Dawn of Virtual DOM
PPTX
React js basics
PDF
React js
PPTX
Introduction to React
Introduction to React JS
React js
React JS: A Secret Preview
Reactjs
React.js - The Dawn of Virtual DOM
React js basics
React js
Introduction to React

What's hot (20)

PDF
Tech Talk on ReactJS
PPTX
Reactjs workshop
PPTX
001. Introduction about React
PDF
Introduction to react
PDF
Introduction to ReactJS
PDF
learn what React JS is & why we should use React JS .
PDF
Learning React - I
PPTX
React js
PPTX
PDF
React-js
PDF
Understanding Facebook's React.js
PPTX
learn what React JS is & why we should use React JS .
PPTX
React js programming concept
PPSX
React introduction
PDF
PPTX
Introduction to React JS for beginners | Namespace IT
PPTX
React js - The Core Concepts
PPTX
React workshop presentation
PPTX
Introduction to ReactJs & fundamentals
PDF
Breaking the Server-Client Divide with Node.js and React
Tech Talk on ReactJS
Reactjs workshop
001. Introduction about React
Introduction to react
Introduction to ReactJS
learn what React JS is & why we should use React JS .
Learning React - I
React js
React-js
Understanding Facebook's React.js
learn what React JS is & why we should use React JS .
React js programming concept
React introduction
Introduction to React JS for beginners | Namespace IT
React js - The Core Concepts
React workshop presentation
Introduction to ReactJs & fundamentals
Breaking the Server-Client Divide with Node.js and React
Ad

Similar to React js Online Training (20)

PPTX
GDG Workshop on React (By Aakanksha Rai)
PDF
Mastering react with redux
PPTX
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
PPTX
Progressive Web Apps and React
PPTX
Introduction to react native with redux
PPTX
React: components, props, state, hooks, virtual DOM, unidirectional data flow...
PPTX
Reactjs notes.pptx for web development- tutorial and theory
PPTX
An evening with React Native
PDF
Targeting Mobile Platform with MVC 4.0
PPTX
Introduction to React native
PPTX
Using MVC with Kentico 8
PPTX
The happy developer - SharePoint Framework React and Mindfulness
PPTX
NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg
PDF
React.js for Rails Developers
PDF
Asp.Net 3 5 Part 1
PPTX
MVC 6 - the new unified Web programming model
PPT
Ppt for Online music store
PPTX
Azure Functions Real World Examples
PDF
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
PDF
Fluxible
GDG Workshop on React (By Aakanksha Rai)
Mastering react with redux
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Progressive Web Apps and React
Introduction to react native with redux
React: components, props, state, hooks, virtual DOM, unidirectional data flow...
Reactjs notes.pptx for web development- tutorial and theory
An evening with React Native
Targeting Mobile Platform with MVC 4.0
Introduction to React native
Using MVC with Kentico 8
The happy developer - SharePoint Framework React and Mindfulness
NEXTjs.pptxfggfgfdgfgfdgfdgfdgfdgfdgfdgfg
React.js for Rails Developers
Asp.Net 3 5 Part 1
MVC 6 - the new unified Web programming model
Ppt for Online music store
Azure Functions Real World Examples
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Fluxible
Ad

More from Learntek1 (7)

PPTX
Aws sys ops administrator
PPTX
Big data - Online Training
PPTX
Angular js Online Training
PPTX
Selenium Online Training
PPTX
Machine learning using spark Online Training
PPTX
Apache Flink Online Training
PPTX
Scala & Spark Online Training
Aws sys ops administrator
Big data - Online Training
Angular js Online Training
Selenium Online Training
Machine learning using spark Online Training
Apache Flink Online Training
Scala & Spark Online Training

Recently uploaded (20)

PDF
PSYCHOLOGY IN EDUCATION.pdf ( nice pdf ...)
PDF
Insiders guide to clinical Medicine.pdf
PDF
Mark Klimek Lecture Notes_240423 revision books _173037.pdf
PDF
Business Ethics Teaching Materials for college
PPTX
Introduction and Scope of Bichemistry.pptx
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PDF
From loneliness to social connection charting
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PDF
The Final Stretch: How to Release a Game and Not Die in the Process.
PDF
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
PPTX
Pharma ospi slides which help in ospi learning
PDF
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PPTX
Nursing Management of Patients with Disorders of Ear, Nose, and Throat (ENT) ...
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PPTX
Cell Structure & Organelles in detailed.
PPTX
Week 4 Term 3 Study Techniques revisited.pptx
PDF
English Language Teaching from Post-.pdf
PDF
Piense y hagase Rico - Napoleon Hill Ccesa007.pdf
PSYCHOLOGY IN EDUCATION.pdf ( nice pdf ...)
Insiders guide to clinical Medicine.pdf
Mark Klimek Lecture Notes_240423 revision books _173037.pdf
Business Ethics Teaching Materials for college
Introduction and Scope of Bichemistry.pptx
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
From loneliness to social connection charting
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
The Final Stretch: How to Release a Game and Not Die in the Process.
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
Pharma ospi slides which help in ospi learning
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
human mycosis Human fungal infections are called human mycosis..pptx
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Nursing Management of Patients with Disorders of Ear, Nose, and Throat (ENT) ...
STATICS OF THE RIGID BODIES Hibbelers.pdf
Cell Structure & Organelles in detailed.
Week 4 Term 3 Study Techniques revisited.pptx
English Language Teaching from Post-.pdf
Piense y hagase Rico - Napoleon Hill Ccesa007.pdf

React js Online Training

  • 2. The following topics will be covered in our React JS Online Training: Copyright @ 2015 Learntek. All Rights Reserved. 2
  • 3. What is React JS? • React JS Training- React JS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications. It’s used for handling view layer for web and mobile apps. React also allows us to create reusable UI components. • It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC. Copyright @ 2015 Learntek. All Rights Reserved. 3
  • 4. Why React? ▪ Easy to learn Anyone with a basic previous knowledge in programming can easily understand React. For react you just need basic knowledge of CSS and HTML. ▪ Native Approach React can be used to create mobile applications (React Native). And React is a follows reusability, meaning extensive code reusability is supported. Copyright @ 2015 Learntek. All Rights Reserved. 4
  • 5. …Continues… ▪ Data Binding React uses one-way data binding and an application architecture called Flux controls the flow of data to components through one control point – the dispatcher. It’s easier to debug self-contained components of large ReactJS apps. ▪ Performance React does not offer any concept of a built-in container for dependency. Copyright @ 2015 Learntek. All Rights Reserved. 5
  • 6. Training Topics • React Js Training -Who Is This Course For? • How Is This Course Different from the React and Flux course? • Why Redux? Copyright @ 2015 Learntek. All Rights Reserved. 6
  • 7. Environment Setup • Environment Overview • Versions Used in This Course • Hot Reloading • Install Node • Create package.json • Editors • Install npm Packages • Introduce npm Scripts • Create src Directory • Set up Webpack • Set up editorconfig • Set up Babel • Set up Express • Create Start Script • Create Start Message • Set up ESLin • Create Parallel Scripts • Set up Testing • Add Test Scripts Copyright @ 2015 Learntek. All Rights Reserved. 7
  • 8. React Component Approaches • Four Ways to Create React Components • ES5 Create Class Component • ES6 Class Component • ES5 Stateless Component • ES6 Stateless Component • When Should I Use Each Style? • Other Ways to Create Components • Container vs. Presentation Components Copyright @ 2015 Learntek. All Rights Reserved. 8
  • 9. Initial App Structure • Create Initial Components • Create App Layout • Configure Routing • Update Entry Point • Create Styles • Create Header • Create Course Page Copyright @ 2015 Learntek. All Rights Reserved. 9
  • 10. Intro to Redux • Do I Need Redux? • Three Core Redux Principles • Flux Similarities • Flux Differences • Redux Flow Overview Copyright @ 2015 Learntek. All Rights Reserved. 10
  • 11. Actions, Stores, and Reducers • Actions • Store • What Is Immutability? • Why Immutability? • Handling Immutability • Reducers Copyright @ 2015 Learntek. All Rights Reserved. 11
  • 12. Connecting React to Redux • Container vs. Presentational Components • React-redux Introduction • mapStateToProps • mapDispatchToProps • A Chat with Redux Copyright @ 2015 Learntek. All Rights Reserved. 12
  • 13. Redux Flow • Create Simple Add Course Form • Binding in ES6 • Actions • Reducers • Root Reducer • Store • Instantiate Store and Provider • Connect Container Copyright @ 2015 Learntek. All Rights Reserved. 13
  • 14. Step Through Redux Flow • MapDispatchToProps Manual Mapping • bindActionCreators • Container Structure Review • Action Type Constants Copyright @ 2015 Learntek. All Rights Reserved. 14
  • 15. Async in Redux Copyright @ 2015 Learntek. All Rights Reserved. 15 • Why a Mock API? • Async Library Options • Thunk Overview • Mock API Setup • Remove Inline Form • Add Thunk to Store • Create Load CoursesThunk • Action Naming Conventions • Load Courses in Reducer • Dispatch Action on Page Load • Create Course List Component
  • 16. Async Writes in Redux • Create Manage Course Page • Create Manage Course Form • Create Form Input Components • Use Manage Course Form • Create Author Actions • Create Author Reducer • Map Author Data for Dropdown • Create Form Change Handler • Create Save Course Thunk • Handle Creates and Updates in Reducer • Dispatch Create and Update • Redirect via React Router Context • Populate Form via mapStateToProps • Update State via component WillReceiveProps Copyright @ 2015 Learntek. All Rights Reserved. 16
  • 17. Async Status and Error Handling • Create Preloader Component • Create AJAX Status Actions • Create AJAX Status Reducer • Call Begin AJAX in Thunks • Hide Preloader Based on Status • Use Promises to Wait for Thunks • Create Form Submission Loading Indicator • Display Save Notification • Error Handling Copyright @ 2015 Learntek. All Rights Reserved. 17
  • 18. Testing React • Testing Frameworks • Helper Libraries • Testing React with React Test Utils • Testing React with Enzyme Copyright @ 2015 Learntek. All Rights Reserved. 18
  • 19. Testing Redux • Testing Connected React Components • Testing mapStateToProps • Testing Action Creators • Testing Reducers • Testing Thunks • Testing the Store Copyright @ 2015 Learntek. All Rights Reserved. 19
  • 20. Prerequisite: ▪ Basic working knowledge of HTML,CSS,JavaScript, Text editor-Visual Studio code/We storm/Atom and preffered one is Visual Studio . Copyright @ 2015 Learntek. All Rights Reserved. 20
  • 21. Copyright @ 2015 Learntek. All Rights Reserved. 21