Scribd
Upload
57 views

Training On React JS Devipment

The document provides an overview of React JS and how to build applications with it. It discusses what React JS is, why to use this framework, and covers topics like environment setup, component approaches, initial app structure, introducing Redux, actions, stores, reducers, connecting React to Redux, async operations, testing, and prerequisites.

Uploaded by

Sourabh porwal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
57 views

Training On React JS Devipment

The document provides an overview of React JS and how to build applications with it. It discusses what React JS is, why to use this framework, and covers topics like environment setup, component approaches, initial app structure, introducing Redux, actions, stores, reducers, connecting React to Redux, async operations, testing, and prerequisites.

Uploaded by

Sourabh porwal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

True Knowledge Brings Humanity

Training on
React JS
Development
by Mranal Gupta
What is
React JS?
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.
Why to use this framework?
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.
Why to use this framework?
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.
Training Topics
React Js Training - Who Is This Course For? •

How Is This Course Different from the React and Flux


course? •

Why Redux?
Environment Setup
Environment Overview Set up editorconfig
Versions Used in This Set up Babel
Course Set up Express
Hot Reloading Create Start Script
Install Node Create Start Message
Create package.json Set up ESLin
Editors Create Parallel Scripts
Install npm Packages Set up Testing
Introduce npm Scripts Add Test Scripts
Create src Directory
Set up Webpack
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
Initial App Structure
Create Initial Components
Create App Layout
Configure Routing
Update Entry Point
Create Styles
Create Header
Create Course Page
Intro to Redux
Do I Need Redux?
Three Core Redux Principles
Flux Similarities
Flux Differences
Redux Flow Overview
Actions, Stores, and
Reducers
Actions
Store
What Is Immutability?
Why Immutability?
Handling Immutability
Reducers
Connecting React
to Redux

Container vs. Presentational Components


React-redux Introduction
mapStateToProps
mapDispatchToProps
A Chat with Redux
Redux Flow

Create Simple Add Course Form


Binding in ES6
Actions
Reducers
Root Reducer
Store
Instantiate Store and Provider
Connect Container
Step Through Redux Flow

MapDispatchToProps Manual Mapping

bindActionCreators

Container Structure Review

Action Type Constants


Async in Redux

Why a Mock API? Create Load


Async Library Options Courses Thunk
Thunk Overview Action Naming Conventions
Mock API Setup Load Courses in Reducer
Remove Inline Form Dispatch Action on Page Load
Add Thunk to Store Create Course List Component
Async Writes in Redux

Create Manage Course Page Create Save Course Thunk


Create Manage Course Form Handle Creates and Updates in
Create Form Input Components Reducer
Use Manage Course Form Dispatch Create and Update
Create Author Actions Redirect via React Router Context
Create Author Reducer Populate Form via
Map Author Data for Dropdown mapStateToProps
Create Form Change Handler Update State via component
WillReceiveProps
Async Status and Error Handling

Create Preloader Component Use Promises to Wait for


Create AJAX Status Actions Thunks
Create AJAX Status Reducer Create Form Submission
Call Begin AJAX in Thunks Loading Indicator
Hide Preloader Based on Status Display Save Notification
Error Handling
Testing React

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

Testing Connected React


Components
Testing mapStateToProps
Testing Action Creators
Testing Reducers
Testing Thunks
Testing the Store
Prerequisite:

Basic working knowledge of HTML,CSS,JavaScript,


Text editor-Visual Studio code/We storm/Atom and
preffered one is Visual Studio .
[email protected]

808 437 8326

Thank You ! 238, Scheme 114, Vijay Nagar AB Road,


Indore, Madhya Pradesh
India - 452010

You might also like