Overview

React is probably the most popular front-end library for creating web applications. Originally, React was created by Facebook, but in 2013 the library was made available as open source. React is used by Instagram, Airbnb, Uber, Netflix, Slack and many other companies and organizations.

The React Fundamentals course teaches you the basics of React applications and explains the structure and architecture of React projects. The underlying ideas and concepts of React are discussed in detail. Of course, you will work with code. You will learn all about components, the JSX syntax and working with props, state and events. More advanced topics such as communicating with external APIs, working with React Router and the new addition React Hooks are also discussed. At the end of the training, you can create and maintain React applications, or get started with applications developed by others.

The ratio between instruction and hands-on workshops is approximately 50%-50%.

Target Audience

The React Fundamentals training course is intended for web developers who want to work with this library and have a thorough basic knowledge of JavaScript. In addition, knowledge of HTML and CSS is indispensable. Developers who have a background in Java or C# can usually also quickly get on with React. The most important thing, however, is that the JavaScript knowledge is up to date. This includes the new ES6 additions, because this is the core language you will eventually use.

Prerequisites

• Some knowledge of HTML and CSS.
• Thorough knowledge of JavaScript and ES6 (functions, arrays, objects, destructuring and functional programming).
• Experience with debugging web applications in Chrome or similar browser.
• Some knowledge of Node.js, working in a command line environment (DOS-prompt or Terminal) and installing packages.
• Some knowledge of the English language. Many websites, documentation and online resources are only available in English (for non-English speakers).

Course Objective

After this training, you will be familiar with the React ecosystem. You will be able to create React applications yourself, maintain, expand and deploy others applications to production.

Table of Contents

• What is React, an overview of the frontend landscape
  • What does a React application look like?
  • Tooling – npx, create-react app, React DevTools, Node.js and the browser.
  • Your first React project.
• Setting the environment
  • Create a project with the create-react app.
  • Start the project.
  • Adjust the homepage.
• React components and composition
  • Class based components vs. Function based components.
  • Data and state in components.
  • The principle of one-way data flow.
  • Component nesting.
  • Passing on props in components.
  • “Lifting state up”.
  • Brief introduction to React Hooks.
• Working with data
  • Loading and displaying external data.
  • Show detail data.
  • Respond to events.
• Class-based Lifecycle Hooks
  • What are lifecycle hooks?
  • ComponentDidMount()
  • ComponentDidUpdate()
  • ComponentWillUnmount()
  • Deprecated lifecycle hooks.
• Styling React Components
  • CSS global and local.
  • Defining Inline styles as constants.
  • Working with CSS Modules.
  • Working with CSS preprocessors such as SASS.
• Processing user input
  • Working with input fields.
  • More form fields: radio buttons, check boxes and textareas.
  • Process choices from dropdown lists.
• Communication with external APIs
  • How does React deal with external data?
  • Working with axios.
  • Creating and firing Ajax calls.
  • Processing Ajax responses.
  • Creating loading indicator (aka Spinner) components.
• Working with React Router
  • What is routing in web applications?
  • Alternative: Reach Router.
  • Routing Basics – installation, links to routes.
  • Styling the active link.
  • Working with Route Parameters.
  • Navigate via code.
• React Hooks in detail
  • Function based components revisited.
  • The useState() hook.
  • The useEffect() hook.
  • ES6 syntax for destructuring.
  • Writing your own hooks.
• A short introduction to Redux
  • What is State management?
  • Why Redux?
  • The basis of Store, Actions, Reducers and Dispatcher.
  • Next steps.
• Deployment: Publish React applications online
  • Deploy your React application to a production server.
  • Publish to a local web server.
  • Publish to a free online hosting provider.

Course materials

The course material consists of self-developed slides and handouts, exercises and labs, and numerous sample projects and code. The distribution in the training is approximately 50% instruction and 50% hands-on practical experience. During and after the training the participant has access to a Github repository with all relevant example code.

Installation requirements

• A modern PC or laptop with Windows, MacOS X or Linux and Google Chrome as a browser.
• An editor the trainee likes to work with. We recommend Visual Studio Code (free) or JetBrains WebStorm (30-day version available).
• NodeJS 12.x or higher installed.
• Administrator rights on the PC to install packages via NPM (not behind a proxy or firewall).
• Free access to the Internet.
• No additional software or VM needs to be installed.