Scribd
Upload
15 views

React JS Skills

This document outlines the course contents for a React JS course. It covers React basics like components, props, and state. It also covers more advanced topics like conditional rendering, side effects, HTTP requests, working on a project, Redux, routing, authentication, and deployment. The course includes building a sample e-commerce application to demonstrate concepts.

Uploaded by

Susmita Saha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

React JS Skills

This document outlines the course contents for a React JS course. It covers React basics like components, props, and state. It also covers more advanced topics like conditional rendering, side effects, HTTP requests, working on a project, Redux, routing, authentication, and deployment. The course includes building a sample e-commerce application to demonstrate concepts.

Uploaded by

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

REACT

DETAILED COURSE SYLLABUS


CONTENTS

COURSE INTRODUCTION & PROJECT OUTLINE


- Introductory Video
- What is React JS?
- Why use React instead of JavaScript
- Project Introduction
- Roadmap

REACT SETUP
- Environment Setup
- Creating New Project
- Analyzing Project Structure

REACT BASICS & COMPONENTS


- Components & Why React is Component-Based?
- JSX
- React Elements and a bit more about JSX
- Building Component
- Styling Components
- Dynamic Data in components
- Passing data using Props
- Complex Components & Splitting
- Assignment1
- Assignment2
- Summary

STATE AND EVENT HANDLING


- Handling Events in React
- Why are States required?
- useState() Hook
- Form Handling & Multiple States
- Handling form Submission and Two way binding
- Optimizations
- Child to Parent Communication
- Summary
CONTENTS

CONDITIONAL RENDERING
- Rendering of List
- Importance of key attribute
- Conditional Statements & Output

HANDLING SIDE EFFECTS


- What are side effects & useEffect()
- UseEffect() hook in effect
- UseEffect() Hook example-2
- Cleanup function

HTTP CALLS USING AXIOS/FETCH


- Mock Backend Setup
- Making first network Call
- Network call using Axios
- Handling data and states
- Async and Await
- Updating the data

WORKING ON PROJECT
- Introduction
- Adding Loader
- Loader using React Portals
- Working on Modal
- Adding functionality in Modal
- Updating Cart Value
- Adding Cart Modal
- Functionality in Cart Modal
- Handling Cart Actions
- Checkout Process & States

REDUX
- What is Redux & Why to use?
- How does it work?
- Redux Demo Application
- Creating Redux Store
- Setting up Reducer logic
- useSelector Hook
CONTENTS

- Dispatching Actions using useDispatch Hook


- Refactoring & Optimizations
- using Connect() - an alternative way to access Redux

MULTI-PAGE SPA WITH REACT ROUTER


- Module Introduction
- What is Routing, how it works & installation
- Basic Routing
- Link and NavLink
- Programmatic Navigation using Hooks
- Dynamic Routes
- Nested Routes and Hooks
- Redirection and Not Found Page
- Query parameters operation
- Adding Query String in Routes Programmatically
- Adding Routes in our Main Project

ADDING AUTHENTICATION
- What is Authentication?
- How Authentication works and Project Setup
- Workflow and Signup using Firebase Rest API
- Multiple Reducers and Login/Signup Functionality
- Persisting User State
- Protected Routes & Redirection
- Firebase Authentication in Realtime Database and Placing Order
- Logout Implementation

DEPLOYMENT
- Steps to create production build
- Firebase Hosting
- Amazon s3 hosting
- AWS S3 hosting using AWS Codebuild i.e., CI/CD

You might also like