Grasping React Basics

Trainer: Vlad Zelinschi
Duration: 3 days

React is a library developed by Facebook that deals with rendering your UI in a very smart and performant way. It’s gained a lot of traction due to its simplicity and proposed mindset which empowers developers to have a modular, component-based approach on their frontend architectures.

This training covers a lot of React related concepts, setting the base for understanding applications built on this technical stack. The focus will be on code examples (live coding, application building) and practicality. Feel free to consult the high-level agenda below.

Agenda

  1. What is React?
    a. Talk about differences between frameworks and libraries
    b. Brief history of how React came to be
    c. What problems is React trying to solve
    d. Platforms that are impacted by React (Web, VR, Native)
  2. What sets React apart?
    a. Updating UI philosophy
    b. JSX, VDOM, state, props, overall data flow
  3. Spin up a simple React app in 3 minutes
    a. Create React App (CRA) small intro
    b. Installing CRA
    c. Create a React project using CRA
    d. Start the project
    e. General overview of the project’s structure
    f. Advantages of CRA
  4. JSX
    a. A markup/templating language
    b. How JSX is converted to JavaScript
    c. Babel and automatic JSX transpiling
    d. Differences from HTML
  5. Writing our first React component
    a. Writing using ES6 classes
    b. render, the mandatory method for a React component
    c. Writing using functions
  6. VDOM (Virtual DOM)
    a. What is VDOM?
    b. What are the advantages of using VDOM
    c. How React employs VDOM behind the scenes
  7. React props
    a. What are props in React?
    b. Immutability of props
    c. How to use them
    d. Who supplies the props of a component?
    e. PropTypes
  8. Dealing with events in React
    a. Responding to user events
    b. List of predefined handlers in React
  9. React state
    a. What is state and how is it different than props?
    b. Changing the state - setState
    c. Effects of changing the state
    d. The data flow of state, props, setState and re-render
  10. React component lifecycle hooks
    a. Hooks that trigger when component first gets created
    b. Hooks that trigger when component’s state changes
    c. Hooks that trigger when component’s props change
    d. React component lifecycle hooks diagram
  11. Fetching data from the server
    a. When and in what component lifecycle hook should we fetch data?
    b. Fetching data and updating the state
    c. Emphasizing the hooks cycle that trigger in this process
  12. Building a puppy adoption application
    a. Initializing the app with CRA
    b. Building the component to display the list of puppies
    c. Adding in filters
    d. Adding the ability to adopt/refuse a puppy
    e. Adding the ability to delete a puppy
    f. Adding the ability to add a puppy
  13. Testing React components
    a. Introduction to Jest and Enzyme
    b. Types of rendering in Enzyme
    c. What to test in a React component
    d. Setting up tests in CRA
    e. Practice with shallow rendering and state testing
  14. React architectural patterns, antipatterns and best practices
    a. Lifting state up for sharing info between components
    b. Aggressive componentization
    c. Container components vs. presentational components
    d. How the testing strategy adapts to container vs. presentational
    e. Local component state vs. state higher up in the chain
    f. Destructuring props in render and destructuring props parameter
    g. Using React children prop
    h. State from props (anti-pattern sometimes)
    i. Mutating DOM (anti-pattern)
  15. Approaching UIs by thinking in React
    a. Identifying components from UI and aggressive componentization
    b. Identifying state shape and level in component hierarchy
    c. Thinking only about state change over time
  16. Tweaking and improving the puppy adoption application
    a. Moving to container vs. presentational approach
    b. Split work between multiple components
    c. Introduction of React.PureComponent and its benefits
  17. Recap
    a. React’s place in the ecosystem
    b. Major concepts (JSX, VDOM, state, props)
    c. Lifecycle hooks
    d. Interacting with the server (fetching data)
    e. Approaching UIs in React
    f. Best practices and good patterns
    g. Patterns to avoid

General Prerequisites

  1. Video projector
  2. WiFi access (students need to be able to clone Git repositories and download npm packages from the internet)
  3. Flipchart + flipchart sheets OR writing board (please inform us if this is something you cannot provide)
  4. Markers for writing - different colors (please inform us if this is something you cannot provide)
  5. Ability to plug to power source for every computer in the room (extension cords if needed, etc.)

Students Prerequisites

  1. Every student will have his/her own laptop. For best results, it is not advisable to multiple people working on the same machine
  2. Node v8.9.4 or greater installed (https://nodejs.org/en/download/)
  3. Git v2.16.0 installed (https://git-scm.com/downloads)
  4. An IDE/code editor of choice (Sublime Text, Atom, Visual Studio Code, WebStorm, etc.)

Expectations

This training assumes the participants are already familiar with ES6 concepts (classes, destructuring, default parameters, arrow functions, let/const, etc.), basic JavaScript knowledge and syntax, npm (interacting with the npm ecosystem, package.json) and Git (basic commands). Thus, the aforementioned concepts will not be discussed or detailed during the training.

This training targets beginner and intermediate developers who do not have any (or have very basic) experience with React and who want to learn how to build UIs using this technology.

What our clients are saying

Thank you for reading. Now help us spread the ❤️ by sharing.