INTRODUCTION TO JAVASCRIPT, BROWSERS AND DOM
What is Event driven programming
What is Javascript
Introduction to DOM
How does the browser work
Render-Tree construction, layout and paint in Browser
DOM traversal(most important part)
INTRODUCTION TO REACT JS
• What is React?
• Why ReactJS?
• Setup - React
• Structure of ReactJS Projects
• Webpack - the role of package managers or bundlers
• JSX in detail
• First React app
• Why ReactJS?
• Setup - React
• Structure of ReactJS Projects
• Webpack - the role of package managers or bundlers
• JSX in detail
• First React app
REACT JS COMPONENTS
• Intro to React components
• Thinking in React
• Component lifecycle
• Creating a React Component
• Rendering multiple components
• Nesting Components
• How to split an App into components
• Comparing Stateless and Stateful Components
• Understanding the Component Lifecycle
• Converting Stateless to Stateful Components
• One Component per File - how to break app in multiple files
• Thinking in React
• Component lifecycle
• Creating a React Component
• Rendering multiple components
• Nesting Components
• How to split an App into components
• Comparing Stateless and Stateful Components
• Understanding the Component Lifecycle
• Converting Stateless to Stateful Components
• One Component per File - how to break app in multiple files
HOW REACT JS WORKS INTERNALLY
• How React Updates the App & Component Tree
• Understanding React's DOM Updating Strategy
• Understanding Higher Order Components
• Understanding React's DOM Updating Strategy
• Understanding Higher Order Components
PROPS, EVENTS AND STATES
• Intro to props
• props in action adding props to reactDOM.render()
• Intro to events
• Events in action
• What is state
• Difference between props(immutable) and states
• Adding state to the component
• Track changing data in your components
• Multiple child components
• Updating state and removing component
• Creating App using states and props Stage
• props in action adding props to reactDOM.render()
• Intro to events
• Events in action
• What is state
• Difference between props(immutable) and states
• Adding state to the component
• Track changing data in your components
• Multiple child components
• Updating state and removing component
• Creating App using states and props Stage
STYLING REACT APP
• Setting Styles Dynamically
• Setting Class Names Dynamically
• Using Radium for Media Queries
• Enabling & Using CSS Modules
• Outputting Lists with ngFor
• Practicing Directives
• Mobile Considerations
• Setting Class Names Dynamically
• Using Radium for Media Queries
• Enabling & Using CSS Modules
• Outputting Lists with ngFor
• Practicing Directives
• Mobile Considerations
WORKING WITH REACT-ROUTER
• Intro to React Router
• Server vs. Client Routing
• Setting up a 404
• Linking Between Routes
• Navigating Programmatically
• Using Query Parameters
• Redirecting and Wildcard Routes
• Server vs. Client Routing
• Setting up a 404
• Linking Between Routes
• Navigating Programmatically
• Using Query Parameters
• Redirecting and Wildcard Routes
HANDLING FORMS IN REACT APP
• What is web form
• Creating a Custom Dynamic Input Component
• Setting Up a JS Config for the Form
• Dynamically Create Inputs based on JS Config
• Handling User Input
• Handling Form Submission
• Adding Custom Form Validation
• Showing Error Messages
• Creating a Custom Dynamic Input Component
• Setting Up a JS Config for the Form
• Dynamically Create Inputs based on JS Config
• Handling User Input
• Handling Form Submission
• Adding Custom Form Validation
• Showing Error Messages
REDUX
• Understanding state management
• Complexity of Managing State
• Intro to redux
• Need for Redux
• Understanding the Redux Flow
• What is an action
• What is store
• Understanding reducer
• Understanding Provider
• Complexity of Managing State
• Intro to redux
• Need for Redux
• Understanding the Redux Flow
• What is an action
• What is store
• Understanding reducer
• Understanding Provider
REDUX IN ACTION
• Setting Up Reducer and Store
• Dispatching Actions
• Connecting React to Redux
• Connecting the Store to React
• Dispatching Actions from within the Component
• Practice - Dispatching Actions
• Passing and Retrieving Data with Action
• Switch-Case in the Reducer
• Updating State and arrays immutably
• Dispatching Actions
• Connecting React to Redux
• Connecting the Store to React
• Dispatching Actions from within the Component
• Practice - Dispatching Actions
• Passing and Retrieving Data with Action
• Switch-Case in the Reducer
• Updating State and arrays immutably
REDUX IN ACTION PROJECT USING REACT-REDUX
• Installing Redux and React Redux
• Basic Redux Setup
• Creating Ticketing App using React and Redux
• Deploying react app on server
• Wrap up let's test how much we learnt so far your feedback
• Basic Redux Setup
• Creating Ticketing App using React and Redux
• Deploying react app on server
• Wrap up let's test how much we learnt so far your feedback
