↓Skip to main content
  1. Trainings/

React Basics

·656 words·4 mins
Technical OSS Web React
Table of Contents

Duration #

It is a 2 Days hands-on workshop. It would be minimum PPT and maximum real-world coding.

Overview #

This workshop is perfect for beginners who want to dive into the world of React - taught by someone who’s been there since React took its first steps! With 17+ years of web development experience and having witnessed React’s evolution from its inception, you’ll learn from real-world experience, not just PowerPoint slides copied from the internet (yes, we’ve all sat through those presentations where the trainer is learning along with you ).

By the end of this training, you’ll have the skills to create your own React projects and confidently work with React’s foundational features - backed by practical insights from years of production experience.

What You’ll Learn #

  1. Introduction to React
    • What is React and why it’s popular?
    • Understanding the key benefits of React for building modern web applications.
  2. Setting Up Your Project
    • How to create a new React project using CRA (Create React App) or Vite.
  3. Understanding JSX
    • The basics of JSX and how it makes React development more intuitive.
  4. Component-Based Architecture
    • Learn how to design and build applications using reusable components.
  5. Functional Components
    • Introduction to functional components and their advantages.
    • A brief overview of class-based components.
  6. Props and State
    • Passing data between components using props.
    • Managing dynamic data with state.
  7. Handling Events
    • Capturing and responding to user interactions.
  8. Hooks Basics
    • Introduction to React Hooks.
    • Using useState and useEffect for state and side effects.
  9. Conditional Rendering
    • How to render components dynamically based on conditions.
  10. Lists and Keys
    • Efficiently rendering lists of items in React.
  11. Controlled vs. Uncontrolled Components
    • Managing form inputs in React applications.
  12. Styling in React
    • Exploring CSS Modules and inline styling techniques.
    • Using Styled Components for dynamic styling.
    • Introduction to Tailwind CSS and Daisy UI with examples.
  13. Form Handling
    • Building forms and capturing user input.
    • Basics of form validation and error handling.
  14. React Developer Tools
    • An introduction to React Developer Tools for debugging.
  15. Debugging with React Dev Tools
    • Best practices for identifying and resolving issues in your React application.

What’s Included #

  • Hands-on coding sessions with real-world examples
  • Access to workshop GitHub repository with structured day-wise branches
  • Personal code review and feedback on your exercises
  • Direct interaction with an industry veteran who’s been building with React since its early days
  • Post-workshop exercise repository access with pull request-based feedback

Requirements #

  • Basic knowledge of HTML, CSS, and JavaScript
  • A laptop with your favorite code editor (VS Code, Cursor, WebStorm, or Vim - pick your weapon of choice!)
  • Preferably Linux or MacOS (Windows users, don’t worry - WSL will be your friend)
  • Node.js environment (NVM recommended for version management - trust me, it saves headaches)
  • A modern browser for testing (because IE is finally dead. Thank God!)
  • Basic knowledge of Node.js and npm
  • Working microphone for interactions (we’re social creatures after all!)

Training Format #

Day 1: #

  • Fundamentals of React, JSX, and Component-Based Architecture.
  • Props, State, and event handling.

Day 2: #

  • Advanced topics like Hooks, form handling, and styling techniques.
  • Debugging and using React Developer Tools.

Who Should Attend? #

  • Developers new to React.
  • Professionals transitioning from other frameworks like Angular or Vue.
  • Anyone looking to build dynamic and scalable web applications.

Why Choose This Workshop? #

  • Learn from Experience: Get insights from a developer who’s been building with React since its inception
  • Real-World Focus: No death by PowerPoint - we’ll work with actual code and real-world scenarios
  • Hands-On Learning: Practical exercises for every topic with personalized code reviews
  • Industry-Tested Knowledge: Learn patterns and practices that have stood the test of time in production environments
  • Interactive Sessions: Direct access to ask questions and learn from years of React development experience

Schedule This Training #

Contact me to discuss training dates and requirements for your organization.

Pricing #

7999 INR / person

Pricing are subject to Terms and conditions mentioned here

For College Students #

Training conducted by Colleges can avail for special pricing and upper maximum person cap.