RReeaacctt JJ

SS

qttworld www.qualitythought.in
 React JS
ReactJS18.2.0 Training Overview
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user
interfaces based on UI components. It is maintained by Meta (formerly Facebook) and a community of individual
developers and companies.
It is used for creating dynamic and interactive user interfaces for mobile and web applications. It is highly flexible,
declarative and efficient for developing scalable, simple, and fast front-end for web & mobile applications. In
simple terms, React JS effectively handles the view layer of mobile and web application.

React can be used as a base in the development of single-page, mobile, or server-rendered applications with
frameworks like Next.js. However, ReactJS is only concerned with state management and rendering that state to
the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain
client-side functionality

React is flexible in such a way that, in any application, we can use as little or as much React as you need. For
example, react can be used in any existing web application to develop a new feature or even the application’s
entire UI.

ReactJS has become highly popular across the globe because of its extra simplicity and flexibility. Many people
are even referring to ReactJS as the future of web development.

Part of this huge popularity comes from the fact that top corporations such as Facebook, PayPal, Uber, Instagram,
Airbnb etc use it to develop the user interfaces.

Objectives of the Course

This is to provide in-depth insights about ReactJS and keep updated yourself with latest ReactJS concepts and
it’s integrated other technologies according to updated industry standards.
e The main objective of React Training is to make you as a top-class React.js Developer able to design and
build modern Interactive user interface components to enhance application performance.

Who should do the Course

e Anyone who is trying to learn fastest growing UI framework and one of the top 3 frameworks. It is growing
fast in terms of opportunities too.
Prerequisites
e HTML
e JavaScript
e CSS

e History of JavaScript
e Features
e let & const with example
e Arrow Functions
e Alternative

/qtworld /qualitythought.in
 React JS

Corporate Training ReactJS: All about Components

Complete ReactJS (In-Depth) e React Components
e Tips and Arrow Functions e Creating a Functional Component Example
e Exports and Imports e Component Names Must Be Capitalized
e Tips for exports and imports e Components vs Elements
e Classes with example e Elements Are Immutable
e Classes example e Properties
e Inheritance e Property Naming Convention
e Spread and rest Parameter e Properties Default to 'True'
e Destructing e Spread Attributes (an ES6 Feature)
e Expressions
e Fragments
ReactJS: Introduction e Functional Components
e What is ReactJS? e Nesting JSX Elements
e Version history. e Example of JSX Nesting
e Why ReactJS? e Comments in JSX Code
e Advantages of React JS e Setting CSS Styles Using Classes
e Setting CSS Styles Directly
e Internals of ReactJS.
e JSX Escapes Values
e Work flow of React JS e Working with Lists of Items -
e Scope of React JS Iterating through Lists
e Software’s required. e Keys in Lists
e Example List with Key
ReactJS: Setup – First Application e State
e About NodeJS e State in React
e Installation e Setting state
e Npm – managing the packages e Types of State Data
e Create First ReactJS Application e State Hierarchy
e Lifting State Up
e Build and Execute
e Props vs. State
e About Visual Studio Code e Pass Down a Function
e Installation of Visual Studio Code e Immutability
e Managing the ReactJS e Immutability – Why?
application using Visual Studio Code e Virtual DOM and State
e Updating Input fields
ReactJS: JSX e Passing Props to Components
e Passing Functions to Components
e Overview of JSX
e Event Handling
e Jsx syntax e Event Handler Example
e Difference between JS and JSX. e Event Binding - Dos
e Jsx Parser e Event Binding – Don'ts
e Comments in jsx e Passing Parameters to Event Handlers
e Introduction of Virtual DOM. e Component Life-cycle
e Rendering an Element into the DOM e Initial Render
e Naming Conventions e Props Change
e JSX Transpilation to React Code Example e Stage Change
e Component willMount
e Running the Transpiled Code
e Component didMount
e What are the JavaScript e Component Unmount
expressions available in JSX? e Life-cycle in Functional Components
e Applying Different Lifecylces in the Application.
e When to choose Appropriate lifecycles.
e Interaction in between components
e Component Communication using Context

/qtworld /qualitythought.in
 React JS
Forms and UI e Control State e Session State
e Location State
e Lists of Form components.
e Location State Side Effects
e Setup Controlled and Uncontrolled
form components.
Event handling in JSX
e Control Input elements.
e How to set default values on e on Blur, onKeyUp, onChange and
all formats of Input elements. other useful primary events in React JS.
e React JS Form validations. e How to Sharing events between the components?
e How to write Styles? e Animations overview e Communicate Data between components.
e Create a React Form. e Applying all lists of events
e Client-side form validation.
e Applying form components. Styles in ReactJS
e Submit and reset the form.
e CSS and inline styles in React JS overview.
e Introduction to styled components
Working with Rest API e Styling the application using styled component
e Calling REST API e How to use Animations in the Application
e Sending POST request
e CURD Operations example Building React Apps with Redux
e Redux
React Router e Redux Terminology
e Redux Principles
e Routing and Navigation
e Redux: Actions
e react-router
e Redux Action Types
e Creating a react-router based project
e Action Creators
e A Basic Routed Component
e Dispatching Actions
e Router vs. BrowserRouter
e Data Flow Basics
e The Route component
e Redux Reducers
e Redirect Route
e Pure Functions
e Navigating with
e Reducer Example
e Route Parameters
e Returning Default State
e Retrieving Route Parameters
e Creating a Development
e QueryString Parameters
Environment with create-react-app
e Create a Single Page Application.
e Using Redux with React
e Applying Routing.
e Initializing the Store
e Dynamically render the
e Immutability
components based on the url
e Benefits of Immutable State
e Mutability of Standard types
State Management for React e Copying Objects in JavaScript
e React State Basics – Props and State e Copying Arrays in JavaScript
e Props e One Store - Multiple Reducers
e State in Class Based Components e Combining Reducers
e Managing State with Hooks in e Components and Redux
Functional Components e The React-Redux Package
e The Problem with Props and State e Wrapping App with Provider
e Redux State Library e mapStateToProps
e Redux Advantages e mapDispatchToProps
e Redux Disadvantages e Using Mapped Properties and Methods
e Basic Rules for State Management e Wrapping Components with Connect
e Types of State e Data State e Configure Store
e Communication State e Programming Advice - MultiTab Console

/qtworld /qualitythought.in
 React JS
Flux Creating Custom React Hooks
e What is Flux Architecture? e Custom Hooks
e What are the Flux Components available? e Custom Message Hook
e How Flux works? e Using the Custom Message Hook
e Flux and React works together. e A Custom useList Hook
e Using the useList Custom Hook
Using React Hooks e The built-in useDebugValue Hook
e Viewing the Effect of
e Functional Component Shortcomings
the useDebugValue Hook
e Hooks Overview
e Hook Rules Unit Testing React with
React Testing Library
Using React Hooks e What are the necessary
e Functional Component Shortcomings Tools required for Unit Testing?
e React Unit Testing overview
e Hooks Overview
e Introduction to JEST.
e Hook Rules e Using Jest with Test Utils from React-DOM
e React Linter Example e Using Jest with the React Testing Library
e Functional Component Props e Using Jest with Enzyme
e The useState Hook e How to Test React Component?
e Functional Component using the useState hook e How to Test React Router?
e useState with Multiple Variables e Features
e Snapshot Testing
e useState can also be used with Objects
e Code Coverage
e The useEffect Hook e Interactive Mode
e useEffect Hook Example e Projects created with create-react-app
e Using useEffect Hook to Load Data e Default App Component Test
e Restricting when useEffect is Called e Unit Tests
e The useContext Hook e Anatomy of a Unit Test
e Additional Hooks e Common Matchers
e Combining Tests
e The useReducer Hook
e Running Tests
e An Example Reducer Function e Testing Promise based async
e Calling and using useReducer code with 'done'
e The useMemo Hook e Setup and Teardown
e useMemo Example e react-testing-library
e The useCallback Hook e A Simple Component Test
e A Simple Snapshot Test
e useCallback Example
e Running and Updating SnapShot Tests
e The useRef Hook e Building Component Tests
e Using useRef to Hold Values e Calling Render
e The useImperativeHandle Hook e Render Properties
e useImperativeHandle Hook Example e Simulating Events
e The useLayoutEffect Hook e Testing Results
e Using Query Functions
e Text Matching
e Counter Component
e counter-test.js

/qtworld /qualitythought.in
 React JS
Integration with Other Libraries
e Gulp & Browserify
e React with jQuery
e React & AJAX

Server Integration & Deployment

e https
e httpster
e npm

Code Splitting
e Code splitting & Suspense
e Route Based Code Splitting
e Lazy Loading

Isomorphic React
e Server-Side Rendering
e SSR with React - Setup & Server
e SSR with React - The Toolchain
New Features of React 16,17 and 18
Webpack Primer AND Isomorphic React
Isomorphic React
e Webpack and its use
e Setting up and installing Webpack
e Working with the
configuration file of Webpack
e Working with loaders
e Quick word on lazy loading,
code splitting, and tree shaking
e Setting up a hot module replacement
e Server-side rendering (SSR)
e Working with renderToStatic
Markup and renderToString methods

Fetch Data Using GraphQL

e What is GraphQL? e Schemas
e Cons of Rest API e GraphiQL tool
e Pros of GraphQL e Express framework
e Frontend backend e NPM libraries to build server side of GraphQL
communication using GraphQL e Build a GraphQL API
e Type system e NPM libraries to build client side of GraphQL
e GraphQL datatypes
e Modifiers

/qtworld /qualitythought.in
Quality Thought Infosystems India (P) Ltd.