O'Reilly logo
live online training icon Live Online training

Professional Front-end Application Development with React

Learn how to architect, develop and deploy a complex UI application with React and the most popular associated libraries (Redux, Router, Material UI)

Alexandru Toea

During the period of the course, participants will develop the frontend for a complex dashboard application, which will contain and manipulate various sets of data such as user information, system status, and permission levels. The application will also incorporate components that allow user-friendly visualizations of large sets of data such as charts and expandable tables. The course will cover every aspect involved in planning, developing and delivering a complex front-end application. It will also cover some of the most popular libraries used together with React in modern web app development and provide insights into industry best practices when it comes to writing your project.

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

By the end of this live online course, you’ll:

  • Develop a solid knowledge base that allows developers to tackle complex React projects, by making use of the strengths of the React library, as well as taking advantage of the numerous popular libraries designed for React.

And you’ll be able to:

  • Fully plan and develop a complex frontend application at high industry standards.

This training course is for you because...

This course is designed for developers that have had some previous experience with React, or other modern web UI libraries (Vue, Angular, Polymer), and it aims to build on and expand previous knowledge in front-end development.

Prerequisites

  • Basic knowledge of React Js/other modern JS frameworks
  • Good knowledge of JavaScript and understanding of the principles of ES6 (ES2015)
  • Be comfortable with working with an advanced text editor

Materials, downloads, or supplemental content needed in advance:

Hardware: - For successful completion of this course, students will require the computer systems with the following: - Processor: 1.8 GHz or higher Pentium 4 (or equivalent) - Memory: Minimum: 2 GB RAM - Recommended: 4GB - Hard disk: 10 GB - Access to a terminal (terminals that support multiple tabs are recommended) - Good internet connection

Software: - Operating system: Windows, Mac OS or Linux. - The latest version of Chrome (Firefox work as well, but not all the tools might be available) - Following Chrome plugins: React devtools, Redux devtools

Recommended preparation:

  • Have the latest version of Chrome installed, together with the recommended plugins
  • Have NPM and Yarn installed
  • Have a code editor installed (preferable VSCode, Atom, VIM, Webstorm)
  • React Recipes [Video]

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

Section 1: Tools and UI decomposition: Best tools to use when developing React applications (editor, linter, type checking etc.) - 20 min

  • In this section, will discuss the most useful tools used while developing React applications. We will cover the most popular editor plugins, as well as the best browser add-ons that increase efficiency when coding and debugging

UI decomposition, and how to plan the project based on designs/wireframes - 30 min

  • This section covers the planning part before writing your components. It will demonstrate the best way to decide how many components are needed for your application, as well as how they need to communicate with each other. This step is crucial in the development of every new project

Lab 1: UI decomposition exercise - 20 min

Break - 10 min

Section 2: JSX and data flow fundamentals: Recap on JSX, advantages and how to best make use of it when designing components - 20 min

  • This section will be a recap of the main differences between JSX and HTML, as well as how to best use JSX when writing new React components

React data flow fundamentals and lifecycle methods - 40 min

  • This section will discuss in details how the React library handles interaction, as well as how components behave based on the parameters provided

Lab 2: React data flow exercise - 20 min

Break - 10 min

Section 3: React components:React components state and props, UI state management and best practices - 30 min

  • How to leverage state and props when building your components and how to create complex user-driven interactions between various parts of your project

Component optimization and performance improvements - 10 min

  • This section will cover Do’s and don’ts you need to be aware of when building components in order to ensure that the UI is performant and don’t lag behind.

Lab 3: State management exercises - 20 min

Q&A - 10 min

Day 2

Section 4: Routing in SPAs (single page applications) - 20 min

This section covers how to create and manage multiple routes inside your project with the help of React Router.

Lab 4: Routing exercise - 10 min

Break - 10 min

Section 5: Data loading, handling, and management (quick introduction to Redux) - 50 min

This section will cover in detail how to load data from external sources, how to process and store it before passing it into your components. A good data structure is crucial for developing good performing applications with React.

Lab 5: Redux exercise - 20 min

Break - 10 min

Section 6: UI: Application design patterns, debugging and finding bottlenecks in your application - 20 min

  • This section will demonstrate the most common application design patterns that are used in the industry, covering everything from where you should process data, to how and where to perform API calls.

  • Popular React UI & Charting libraries (Bootstrap, Material UI) - 20 min This section covers a few of the most popular User interface libraries, which provide everyone with easy to use components that can be utilized in any project. We will also cover a few popular charting libraries.

Lab 6: Basic UI implementation and charting data - 10 min

Break - 10 min

Section 7: Optimizing datasets, Redux forms, and Deployment: Optimizing datasets for component performance - 20 min

  • This section shows how to optimize application performance by providing guidance on how to only use the data that you need across the app’s components

Form management and handling (Redux forms) - 20 min

This section demonstrates how to handle forms for collecting data with the help of Redux Forms, one of the most popular add-ons for React/Redux

Deployment to production and performance tweaks - 10 min

This section covers how to improve user performance for production apps by implementing code splitting and lazy loading in React.

Q&A session - 10 min