1.3: React

Learning Objectives

  1. React is a frontend framework and library that allows us to create custom, nest-able UI elements with a combination of HTML and JavaScript syntax (JSX)

  2. How to write JSX

  3. How to write and render Class based React components

  4. How to use props

  5. How to use state

  6. What are component lifecycles and lifecycle methods

  7. How to handle JS events in React

  8. How to design component architecture

Introduction

React is a frontend framework and library that allows us to create custom, nest-able UI elements with a combination of HTML and JavaScript syntax (JSX). React's HTML-like structure makes it easy to visualise, and its integrated JS makes it easy to render dynamic data. Alternative but less popular frontend libraries include Vue and Angular.

We will use React's official guide and tutorial to learn React, and React's official app-starter kit Create React App to build React apps. Create React App contains a tool called Webpack that translates React to code that browsers can read. Browsers do not read React natively; they read HTML, CSS and JS, not JSX.

The following sections provide Rocket's annotations to React's official guide and tutorial to explain concepts that the React team assumes readers know.

Additional Setup for Windows machines (If your application doesn't automatically reflect saved changed after npm start)

This is only required if the React inbuilt hot-reloading function isn't working as intended.

After forking and cloning the exercise repository please access it through your code editor.

In the package.json please find:

"scripts": {
    "start": "react-scripts start",

Replace with:

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

This will mean that when you run the npm start command the React application will use polling, any changes you make while running the app will be reflected in the browser after a few seconds. This is a work around, React hot-reloading should work straight out of the box.

Day 5

  1. document.getElementById('root') is a DOM (Document Object Model) command that retrieves the HTML element with ID "root". React renders our app inside that element. React removes the need to write DOM code and the above command is the only DOM command we will need.

  2. Rocket recommends we play with as many of the provided CodePen examples as we can to understand the relevant concepts

  3. Rocket recommends completing the "Main Concepts" guide before attempting the "practical tutorial" so the "practical tutorial" concepts sink in better

  4. If there is anything you do not understand in the guide, please let your SL know and we can include it in these notes!

  1. DOM stands for "Document Object Model", which is a JavaScript representation of HTML rendered on a web page. Frontend frameworks like React use the DOM to programmatically manipulate UI without manually specifying HTML. Rocket recommends W3School's intro to JavaScript HTML DOM (just the 1st page) for a primer. For Rocket's Bootcamp we can stop at DOM Intro without reading W3School's subsequent pages on DOM.

  2. To apply CSS classes to JSX elements we will need to use the className keyword instead of class, which we used with vanilla HTML. This is because class is a reserved keyword in JS used to declare classes (which we will see in 4: Components and Props below).

  1. React follows what we call a "declarative" UI paradigm, where we tell our computers how the UI should look, but not how to achieve that look. In the clock example on this page, we tell React that the latest time should always be in the h2 element, but we never explicitly tell React to update the value in the h2 element. The declarative paradigm is a layer on top of the "imperative" paradigm of DOM manipulation more commonly used before React.

Day 6

  1. "ES6 classes" are the same concept we learnt about in 0.4.6: Classes

  2. User-defined components must be capitalised. Otherwise React will think they are HTML tags.

  1. setInterval is a function that runs a given "callback function" at a specified time interval. A callback function is a function that runs at a later time when triggered by an event, such as the timer in setInterval.

  2. The super function in the class constructor function runs the constructor function of the class' parent class, if any. In the Clock example, super runs the constructor function of the React.Component class. This helps classes we create that "inherit" React.Component have all functionality of React.Component without us having to declare that functionality.

Hands-On Explanations: State

Hands-On Explanations: Component Life Cycle Methods

Example: Clock Component

Day 7

  1. "Events on DOM elements" are the same as JavaScript events or HTML events. JS events allow us to perform logic on events that happen on our web pages such as mouse clicks. React supports a wide range of events.

  2. condition ? true : false syntax is the JavaScript conditional operator.

  3. Rocket recommends using the "public class fields syntax" to define callback methods (functions are called methods when inside classes) inside class components. We will be using Create React App to build React apps which enables this syntax by default.

  1. Conditional rendering is one of the most powerful features of React, enabling us to use conditional logic to specify what a component should render.

  1. Rocket recommends always using keys when rendering JSX elements in a list for performance reasons.

Day 9

  1. An HTML form is an HTML element that either refreshes the page or navigates to a new page when the user submits the form. We often do not want this behaviour in React, opting to update UI on submit without refresh. To disable "refresh on submit" behaviour, Rocket recommends the technique in the React docs, to provide the form a handleSubmit callback function that calls event.preventDefault.

  2. When hanlding the submit method from a form you should target the event.target.value to get the current value of an input.

Day 10

  1. It is important that we pass both the temperature value and handle-change function from Calculator to TemperatureInput so the app can maintain only 1 "source of truth" state for temperature value in Calculator. If it helps, Rocket recommends drawing the component hierarchy to visualise how data flows in the application and verifying our understanding with our classmates and section leader.

Example: Building a Blog List

Day 11

  1. Composition vs inheritance is an architectural paradigm of React where React prefers composing components with other components, instead of defining parent-child inheritance relationships like with traditional OOP classes.

Day 12

  1. JSON (JavaScript Object Notation) is a data format similar to JavaScript Objects, except can be used in text or file form. An API (Application Programming Interface) is typically a URL that manipulates and/or returns data. A JSON API is an API that returns data in JSON format, one of the most common formats to send and receive data on the internet.

  2. Review 10: Lifting State Up above for a refresher on passing "callbacks" (i.e. callback functions) to descendant components to update shared state in ancestor components.

If you finish the React Guide pages above early, feel free to start and finish this tutorial early to have more time for Project 1.

  1. Rocket recommends starting with Setup Option 1 (Write Code in Browser) to focus on understanding React. If you finish the tutorial and have time, do Setup Option 2 (Local Development Environment) and port your code over to understand how to use Create React App. We will use Create React App to develop all frontend projects at Rocket.

  2. Rocket recommends using React DevTools whenever developing React apps. It can help us debug quicker.

  3. Note the tutorial's recommendation to use on[Event] naming convention for props that represent events and handle[Event] for methods that handle events.

Post-Class Exercises: Codecademy React 101

Complete all exercises in the following Codecademy lessons when they are assigned in the Rocket course schedule.

New to Rocket Academy?

If you're not enrolled in Rocket's Bootcamp and visiting this page, check out our website to learn more about our Bootcamp course!

Last updated