Exclusive - Learn to build dynamic user interfaces with React in our comprehensive foundation course.

React Foundation offers a thorough introduction to React, a widely-used JavaScript library for building user interfaces. This course covers essential and advanced topics, including component-based architecture, state management with hooks, and styling techniques. Participants will learn to set up a React development environment, create reusable components, manage data flow, and handle side effects with the useEffect hook.

By the end of the course, you will learn to construct JSX elements, implement prop patterns, manage state, and debug React applications effectively. You will be equipped to build high-performance, scalable, and maintainable web applications.

This course includes hands-on practice through labs and exercises, reinforcing the concepts covered in the lectures - a balanced mix of theoretical knowledge and practical application, ensuring a comprehensive learning experience.

Who Should Attend?

Front-End Developers
Web Developers
Software Engineers
Technical professionals

We can organize this training at your preferred date and location.

Prerequisites

This is an intermediate level course for those looking to expand their skill set and master REACT. Learners should have proficiency in JavaScript, HTML, and CSS.

Fundamentals of Javascript

What You Will Learn

Set up a React development environment and create an initial application structure.
Construct JSX elements to build React component structures and handle dynamic content.
Build reusable React components applying composition patterns.
Implement prop patterns to pass data and event handlers between components.
Use state hooks to manage component data and handle user interactions.
Integrate data flow patterns to manage component communication and state sharing.
Implement container and presentational component patterns to organize React applications effectively.
Apply styling using CSS modules and styling organization patterns.
Use the useEffect hook to manage side effects and component lifecycle needs.
Build form interfaces using both controlled and uncontrolled form patterns.
Use React Developer Tools to debug component issues and analyze application performance.

Training Outline

Introduction to React
- What is React and its history
  - Definition and differentiation
  - Key benefits and use cases
  - Component-based architecture for building UI
- Virtual DOM
  - Definition of the virtual DOM
  - How React uses the virtual DOM (conceptually)
  - Simple comparison with traditional web development
  - Why this matters for modern web apps
- React Development Setup
  - Development environment setup
  - Quick start with Create React App
  - Development tools associated with React (React Developer Tools)
- Project Structure
  - Generating first React app with Create React App
  - Folder structure: Component organization and file name conventions
JSX
- Getting Started
  - HTML entry point (root div)
  - createRoot and render
  - Basic React component structure with JSX
  - Understanding the relationship between files
- Fundamentals
  - What is JSX and why do we use it?
  - Rules of JSX (parent element, closing tags)
- Writing JSX
  - Basic syntax and attributes
  - Adding JavaScript expressions with {}
- Exploring JSX use cases
  - Variables and props
  - Simple conditional rendering
React Components
- Component Basics
  - What is a component?
  - Creating your first component
  - Single line and multiline JSX in a component
  - Importing and exporting components
  - Rendering a component
- More about React Components
  - Logic in a React component
  - Conditions in a React component
  - Handling user interactions in components
- Component Composition
  - Putting components in other components
  - Reusing components
  - Component organization
Props
- Prop basics
  - What are props?
  - Passing data to components
  - Receiving props
  - Prop types and defaults
  - Children prop
  - Rendering a component's props
  - Passing props from component to component
  - Dynamic rendering with props
- More complex prop patterns
  - Pass an event handler as a prop
  - Receive an event handler as a prop
  - Event handler naming conventions
State and Events
- Understanding State
  - What is state?
  - "stateful" components
  - When to use state
  - When not to use state
  - Component re-rendering basics
- useState Hook
  - What is a hook?
  - Initializing state
  - State updates
  - Multiple state values

Brief recap of content covered in Day 1, focusing on creating components and state

Component Patterns
- Component Architecture
  - Container vs Presentational Components
  - When to separate components
  - Rendering presentational components in containers
- React Data Flow
  - One-way data flow concept
  - Parent/Child communication patterns
  - Sibling/Sibling communication
  - Understanding prop drilling
  - Lifting state up as a solution
Styling in React
- Regular CSS with className
- CSS modules basics
- Styling organization
- Component-specific styling
Effects and Lifecycle
- Working with Effects
  - What are side effects in React?
  - Why we need to manage effects
  - Basic syntax and usage of useEffect hook
  - When effects run
  - Effect dependencies
  - What is cleaning up an effect?
  - How to write cleanup functions
- Lifecycles
  - Component phases (initial, updates, cleanup)
  - Using effects for lifecycle needs
Forms
- Form Fundamentals
  - HTML forms vs React forms
  - React's two approaches: Controlled vs Uncontrolled
  - When to use each approach
- Uncontrolled Forms
  - useRef hook with forms
  - Accessing input values
  - Creating a basic uncontrolled form
  - Handling submit events
  - Getting form values
  - Use cases for uncontrolled forms
- Controlled Forms
  - Basic form elements
  - useState with single inputs
  - Managing multiple form fields
  - Handling different input types
  - Handling form submission
  - Preventing default behavior
  - Gathering form data
  - Basic validation
  - Success/error states
Debugging React Applications
- React Developer Tools
  - Components tab
  - Props and state inspection
  - Component tree navigation
- Debugging React Applications
  - Common React errors and solutions

Why Choose Us

Experience REACT Foundations through Bilginç IT Academy's live and interactive virtual classroom environment. Join a Public course as an individual delegate or arrange a dedicated Private / In-house online training program exclusively for your organization.

Delivery Method: Online Instructor-Led
Participation Model: Public / Private (In-house)
Live and Interactive Training: Connect with your instructor in real time and actively participate through discussions, Q&A sessions, practical exercises, and group activities.
Flexible Participation: Join the training from your home, office, or any location with a suitable internet connection.
Expert Trainer Network: Learn from experienced trainers with strong industry backgrounds and practical field expertise.
Over 30 Years of Training Expertise: Benefit from Bilginç IT Academy's professional training experience since 1995.
Worldwide Access: Join our live virtual classrooms from anywhere in the world or arrange a dedicated online training program for your organization.

Experience REACT Foundations in a professional face-to-face classroom environment. Classroom Based training can be delivered as a Public course open to individual delegates or as a dedicated Private / In-house class exclusively for your organization.

Delivery Method: Classroom Based
Participation Model: Public / Private (In-house)
Face-to-Face Learning: Interact directly with your instructor and fellow delegates in an engaging classroom environment.
Experienced Trainers: Learn from specialists with extensive industry experience and practical real-world knowledge.
Professional Training Environment: Attend training in comfortable, well-equipped classrooms designed to support effective learning.
Practical Learning: Depending on the course, reinforce your knowledge through hands-on exercises, scenarios, case studies, and instructor-led activities.

Arrange REACT Foundations as a dedicated Onsite training program for your organization. Bilginç IT Academy trainers can deliver the training at your office or another location of your choice, with the program planned around your team's requirements and business objectives.

Delivery Method: Onsite
Participation Model: Private (In-house)
Training at Your Preferred Location: Organize the training at your company's office or another location selected by your organization.
Tailored Course Content: Adapt the training program to your projects, team structure, existing skill levels, and specific business requirements.
Team-Focused Learning: Develop your team around a shared knowledge base while strengthening internal collaboration and knowledge transfer.
Flexible Scheduling: Plan the training dates, location, and program according to your organization's operational requirements.
Worldwide Onsite Delivery: Bilginç IT Academy trainers can travel internationally to deliver dedicated training programs at your preferred location.

Why have you chosen us?

I have attended a training from Bilginc IT Academy before and I was satisfied.

I have attended a training from a different provider and it was not helpful.

Other

How many employees do you have in your IT department?

0 – 50

50 – 250

250 – 1000

1000+

REACT Foundations Training

Who Should Attend?

Prerequisites

What You Will Learn

Training Outline

Why Choose Us