Scribd
Upload
129 views

Advance ReactJS With Typescript.

This course teaches building React applications using TypeScript and state management with MobX and Redux Toolkit. It covers TypeScript fundamentals, setting up a React project with Webpack, React features, state management, and advanced React topics like hooks and PWAs.

Uploaded by

AayushMaheshwari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
129 views

Advance ReactJS With Typescript.

This course teaches building React applications using TypeScript and state management with MobX and Redux Toolkit. It covers TypeScript fundamentals, setting up a React project with Webpack, React features, state management, and advanced React topics like hooks and PWAs.

Uploaded by

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

TypeScript and Advance React.

js

Course Duration:
6 half days

Description:
This course will help build React applications using TypeScript. Also use MobX
and Redux Toolkit for state management.

Pre-requisites:
• NodeJS
• ReactJS

Course Outline:

Day 1:

TypeScript
• Typescript types
o Numbers, string, Booleans
o objects and arrays
o Tuples, Enum
o The any and unknown types
• Functions
• Next Generation JavaScript and TypeScript
o The let and const keywords
o Arrow Functions
o Default Function parameters
o The spread operators
o Rest Parameters
o Destructuring arrays and objects
o Class
 Private and public access modifiers
 Inheritance
 Protected access modifiers
 Getters and setters
 Static methods
 Abstract classes
o Interfaces
o Generics
o Generic Function
o Generic classes
oModules and Namespaces
 Using ES modules
 Using import and export
• Decorators
o Decorator factories
o Building decorators
 Class decorators
 Method decorators
 Property decorators
 Parameter decorators

Day 2:
ReactJS
• Building React application with Webpack and TypeScript
o Packages required for creation
o Installing packages using NPM
o Choosing transpiler: Babel
o Different loaders: babel-loader, ts-loader, css-loader, style-loader, file-loader etc.
o Loading JSON using WebPack
o Adding CSS to webpack Build
o Bundling, minification: Webpack
o Webpack configuration for development
o Using a development server: Webpack-dev-server
o Different Plugins: HtmlWebpackPlugin, CleanWebpackPlugin etc. and their purpose
o Using webpack-dev-middleware along with express server to host and run application
• Recap of Class and functional components using TypeScript
• Render Props
• High Order Components
• React Portals

Day 3:

• Build one react application with react Hooks, react-router-dom, axios and react
context

Day 4:

State Management

• Introduction to Redux
o Store
o Reducers and Root reducer
o Actions and ActionCreators
o connect()
 mapStateToProps
 mapDispatchToProps
o configure Redux DevTool
• Redux Toolkit
• configureStore()
• createAction()
• createReducer()
• createSlice()
• useDispatch() and useSelector()
• RTK Query
o Queries
o Mutations
o Cache Behaviour
o Polling

Day 5 & 6:

• MobX
• Creating Observable State
• Actions
• Computeds
• Reactions
• Mobx React integration
• Mobx State tree
• Types, models, tree & state
• Composing trees
• Actions
• Derived values
• React and MST

Advance React:

• React 18 features
o render()
o createRoot()
o unmount
o Automatic Batching
o Concurrent React
o Transitions
 Urgent and transition updates
o New Hooks
 useId
 useTransition
 useDeferredValue
 useSyncExternalStore
 useInsertionEffect
o Strict Mode
o hydrateRoot()
o Server Side Changes
 renderToPipeableStream()
 renderToReadableStream()
• React Localization and Internationalization
• i18next
• react-i18next
• i18next-browser-languagedetector
• PWA
• What is Progressive Web App?
• Pros and Cons of PWA.
• PWA components.
• Service Workers
• Web manifests
• Application Shell
• Using cra-template-pwa template

You might also like