React JS Course

Course Curriculum

Introduction to HTML

• HTML Basics, Elements, Attributes, Styles
• Forms, Form Elements, Input Element Types
•  Input Attributes, File Paths, Script tag
•  HTML & XHTML

Introduction to CSS

• CSS Introduction, Syntax, Selectors, Styling
• Pseudo class, Pseudo Elements
•  CSS Tables, CSS Box Models
•  CSS Opacity, CSS Navigation Bar, Dropdowns

Introduction to JavaScript

• JavaScript Statements, Keywords, Functions
•  JavaScript Programs, Operators, Functions
•  Function Parameters, Function Return Types
•  Data Types, Primitive Types

Working with Objects

• Object Oriented Programming, Object Creation
•  Adding Methods of Objects
• JavaScript Loops & Iteration
• Adding Properties of Objects
• JavaScript Conditional Statements
• Enumerating Properties, Callbacks, JSON

Introduction to React

• What is React?
• Why React?
• React version history
• React 16 vs React 15
• Just React – Hello World
• Using create-react-app
• Anatomy of react project
• Running the app
• Debugging first react app

Templating using JSX

• Working with React. create Element
• Expressions
• Using logical operators
• Specifying attributes
• Specifying children
• Fragments

About Components

• · Significance of component architecture
• Types of components
•  Functional
•  Class based
• Pure
• Component Composition

Working with state and props

• What is state and it significance
• Read state and set state
• Passing data to component using props
• Validating props using prop Types
• Supplying default values to props using default Props

Rendering lists

• Using react key prop
• Using map function to iterate on arrays to generate element Event handling in React
• Understanding React event system
• Understanding Synthetic event
• Passing arguments to event handlers

Understanding component lifecycle and handling errors

• Understand the lifecycle methods
• Handle errors using error boundaries

Working with forms

• Controlled components
• Uncontrolled components
• Understand the significance to default Value prop
• Using react ref prop to get access to DOM element

Context

• What is context
• When to use context
•  Create Context
• Context.Provider
• Context.Consumer
• Reading context in class

Code-Splitting

• What is code splitting
• Why do you need code splitting
• React. Lazy
• Suspense
• Route-based code splitting

Hooks

•  What are hooks
• Why do you need hooks
• Different types of hooks
• Using state and effect hooks
• Rules of hooks

Routing with react router

• Setting up react router
• Understand routing in single page applications
• Working with Browser Router and Hash Router components
• Configuring route with Route component
• Using Switch component to define routing rules
• Making routes dynamic using route params
• Working with nested routes
• Navigating to pages using Link and NavLink component
• Redirect routes using Redirect Component
• Using Prompt component to get consent of user for navigation
• Path less Route to handle failed matches

Just Redux

• What is redux
• Why redux
• Redux principles
• Install and setup redux
• Creating actions, reducer and store