Prerequisite: Web Design & Basic JavaScript
Introduction To ES6 (Next-Gen JavaScript)
- What is ES6?
- Understanding “let” & “const”
- Arrow Functions
- Import & export
- Understanding classes, methods & properties with babel
- Spread & rest operators
- Reference & primitive types
Getting Started with React
- Why React & history of React
- Installing the development environment
- Using the create-react-app package
- Understanding the project structure
- Templating with JSX
- Running our react application
Component, State & Props
- Working with Components
- Working with props
- Understanding children property
- Using state
- Class-based components
- Functional components
More on React
- Handling events with methods
- Manipulating state
- Adding two-way binding
- Adding styles with stylesheet
- Style with inline styles
- Setting styles dynamically
- Setting classNames dynamically
Working with Lists & Conditions
- Rendering content conditionally
- Handling dynamic content
- Generate lists using map method
- List & state
- Key prop
Dig Deeper into React
- Splitting app into components
- Stateful & stateless component
- Understanding component lifecycle
- componentDidMount() & componentWillMount()
- Pure component
- Using ref
Working with HTTP requests
- Creating http request to GET data
- Rendering data properly to frontend
- POSTing data to server
- Sending a DELETE request
- Handling errors
Routing with React Router
- Setting up the router package
- Rendering components for routes
- Switch between pages
- Redirect requests
- Navigating programatically
- Conditional redirects
- Working with nested routes
Redux
- Why redux
- Installing the package
- Setting up reducer & store
- Dispatching actions
- Connect react to redux
- Passing & retrieving data with actions
- Combining multiple reducer
- Using redux devtools
Deploy the react application
- Building the project
- deploying it
