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