O'Reilly logo
live online training icon Live Online training

Beginning Frontend Development with React

Extend your existing JavaScript skills by building engaging and reactive interfaces for the modern web

Alexandru Toea

React is widely used to create fast and reusable user interface components. It has been remarkably successful in recent years, since it is easy to use and offers a coherent design model.

This live hands-on course introduces the basic concepts of the ReactJS library (also known simply as React), one of the widely used libraries for creating web user interfaces in JavaScript.

The course guides students in order for them to acquire practical knowledge of building user interfaces with React. It focuses on an application setup and user interfaces design approach in order to make full use of React's features. It teaches students to create components and how to compose them in order to create complex user interfaces.

The course then consolidates the acquired knowledge about React components in order to allow user interactivity.

What you'll learn-and how you can apply it

  • Create components and compose them together to build other components
  • Use JSX declaratives to describe how a component should look
  • Manage component internal state
  • Manage interaction events
  • Exploit the component lifecycle events
  • Manage navigation between high-level components
  • Design user interfaces by making the most of React features

This training course is for you because...

  • Basic concepts of the ReactJS library (also known simply as React)
  • Application setup and user interfaces design in to make full use of React's features.
  • Learn to create components and how to compose them in order to create complex user interfaces.

Prerequisites

  • Students should have a strong JavaScript background, ES2015 or newer, along with a good knowledge of HTML.
  • Basic knowledge of Node.js may be useful for managing the local development environment, but it is not mandatory.

Materials, downloads, or Supplemental Content needed in advance:

  • Minimum Hardware Requirements
  • For successful completion of this training, you will require the following:
  • Processor: Pentium 4 (or equivalent)
  • 2 GB RAM
  • Hard disk space: 10 GB
  • A projecting device (for the instructor only)
  • A connection to the Internet
  • Keyboard and mouse or other pointing device

Recommended Hardware Requirements:

  • For an optimal experience with hands-on labs and other practical activities, we recommend:
  • Processor: Pentium 4 (or equivalent)
  • 4 GB RAM
  • Hard disk space: 20 GB
  • A projecting device (for the instructor only)
  • A connection to the internet
  • Keyboard and mouse or other pointing device

Software Requirements:

  • Operating System: Windows 10 version 1507
  • Node.js (https://nodejs.org/en/)
  • Supported Internet browser: Chrome - Latest version, or the penultimate version

Resources:

About your instructor

  • Alexandru Toea is a Senior Front End developer. He is currently working with various startups specializing in building complex React applications for both public and internal use. Alex started his Front End developer career by building his school’s websites around 10 years ago, and has constantly advanced his knowledge in web technologies ever since. He is currently working with a technology startup to provide them with the tools required for quick expansion.

    Alex has spent the past 4 years working with React and Redux as well as building efficient real time applications for both startups and corporate clients. He has a passion for efficient and clean code, while also staying on top of all the new developments in the Front End world. On the site he is also an Authorised Google Trainer teaching for companies such as Solvay and Lucas Films.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Introducing React and UI Design (2hours)

  • Introduction
  • What is React?
  • Activity A: Creating an Application with create react-app
  • How to Set up a React-Based Application
  • Activity B: Starting and Changing the Application

Break (15m)

  • How to Design a UI
  • Activity C: Detecting Components in a Web User Interface
  • Summary
  • Practice Questions

Creating Components (2hours)

  • Introduction
  • Definition of a Component
  • Activity A: Activity A: Defining a Shopping Cart
  • Using JSX
  • Activity B: Translating HTML into JSX

DAY 2

Creating Components continued (1hour 30mins)

  • Composing Components
  • Activity C: Defining a Composed Cart
  • Data Propagation
  • Activity D: Creating a Cart Item Component
  • Managing the Internal State
  • Activity E: Adding State Management to the Cart Component
  • Summary
  • Practice Questions

Break (15m)

Lesson 3: Managing User Interactivity (2hours 30mins)

  • Introduction
  • Managing User Interaction
  • Activity A: Adding Items to the Shopping Cart

Break (15m)

  • Component Lifecycle Events
  • Activity B: Showing the Quantity of Items Added to the Cart
  • Managing Routing
  • Activity C: Adding a View about Shipping Methods
  • Summary
  • Practice Questions