React for FE Developers


reactFE10 - Version:1
Description
This is a concise, one-day technical syllabus designed for Front-End Developers focusing on Essential React and Modern FE Practices. The course comprehensively covers React Fundamentals (JSX, Functional Components, Props, Conditional Rendering) and Core ES6+ JavaScript (Modules, Array Methods, Destructuring). A significant portion is dedicated to Local State Management using the useState Hook and Event Handling for building Controlled Forms. Furthermore, the curriculum details managing Side Effects and Data Fetching with the useEffect Hook, asynchronous operations (async/await, fetch), and handling loading/error states. Advanced topics include Performance Optimization (useMemo, useCallback), State Sharing (Context API), and an introduction to integrating TypeScript for enhanced type safety across Components, Props, and State.
Intended audience
FE Developers (Front-End Developers)
Expand All
  • React Fundamentals
    • - What is React - A library for building user interfaces.
    • - JSX - Writing JavaScript inside HTML.
    • - Components - Functional Components.
    • - Props - Passing data between components.
    • - Conditional Rendering.
    • - Essential JavaScript
  • ES6+ Features
    • - Modules (import/export) - (Most important, the rest if there is time).
    • - Arrow Functions.
    • - Destructuring.
    • - Template Literals
  • Array Methods
    • - map() - for rendering lists.
    • - filter() - for filtering data.
    • - reduce() - for data processing.
    • - State and Events
    • - useState Hook - Managing local state.
  • Event Handling
    • - onClick.
    • - onChange.
    • - onSubmit.
    • - Controlled Components - Controlling input fields.
    • - Basic Form Handling.
    • - Side Effects and AP
  • useEffect Hook
    • - Component Lifecycle.
    • - Side Effects.
    • - Cleanup.
  • API Calls
    • - fetch().
    • - async/await.
    • - Managing Loading/Error states.
    • - useEffect dependencies.
    • - Advanced Hooks
    • - useRef - Direct access to DOM elements.
    • - Context API - Sharing state between components.
    • - useMemo - Optimization of computations.
    • - useCallback - Optimization of functions.
    • - Basic TypeScript
    • - What is TypeScript and why use it.
  • Basic Types
    • - string, number, boolean.
    • - Arrays and Objects.
    • - Union Types.
    • - Interfaces and Type definitions.
    • - Props with TypeScript.
    • - useState with TypeScript.
    • - Event Types.