React Js Online Training

1

• React JS

2

• The following topics will be covered in our
• React JS
• Online Training

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. Its 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.

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.

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. Its easier to debug
  self-contained components of large ReactJS apps.
• Performance
• React does not offer any concept of a built-in
  container for dependency.

6
Training Topics

• React Js Training -Who Is This Course For?
• How Is This Course Different from the React
  and Flux course?
• Why Redux?

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

9
Initial App Structure

• Create Initial Components
• Create App Layout
• Configure Routing
• Update Entry Point
• Create Styles
• Create Header
• Create Course Page

10
Intro to Redux

• Do I Need Redux?
• Three Core Redux Principles
• Flux Similarities
• Flux Differences
• Redux Flow Overview

11
Actions, Stores, and Reducers

• Actions
• Store
• What Is Immutability?
• Why Immutability?
• Handling Immutability
• Reducers

12
Connecting React to Redux

• Container vs. Presentational Components
• React-redux Introduction
• mapStateToProps
• mapDispatchToProps
• A Chat with Redux

13
Redux Flow

• Create Simple Add Course Form
• Binding in ES6
• Actions
• Reducers
• Root Reducer
• Store
• Instantiate Store and Provider
• Connect Container

14
Step Through Redux Flow

• MapDispatchToProps Manual Mapping
• bindActionCreators
• Container Structure Review
• Action Type Constants

15
Async in Redux
Why a Mock API? Async Library Options Thunk Overview Mock API Setup Remove Inline Form Add Thunk to Store Create Load Courses Thunk 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
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
18
Testing React

• Testing Frameworks
• Helper Libraries
• Testing React with React Test Utils
• Testing React with Enzyme

19
Testing Redux

• Testing Connected React Components
• Testing mapStateToProps
• Testing Action Creators
• Testing Reducers
• Testing Thunks
• Testing the Store

20
Prerequisite

• Basic working knowledge of HTML,CSS,JavaScript,
  Text editor-Visual Studio code/We storm/Atom and
  preffered one is Visual Studio .

21
(No Transcript)