React Fundamentals

https://app.pluralsight.com/library/courses/react-fundamentals-update/ Examples using CodePen

Introducing Fundamentals

• React focuses narrowly on rendering and event handling of client-side UI components

What is React?

• Rendering (converting the state of the user interface into DOM objects that the browser can use to produce the user interface) and event handling only. Similar to view engines like ASP.NET's Razor. Event handling allows the programmer to detect when the user interacts with their program and how the program should respond.
• Created and maintained by Facebook
• Novel ideas:

• Influence from functional programming
• Separates the calculation of UI changes from the application of those changes
• Popularised one-way data flow, enforces a symmetry between the UI model and rendered UI which leads to React's greatest strength - simplification of programming of UIs
• Virtual DOM
• Vanilla JS for templating

• Declarative over imperative style (UI is only changed by changing the state)
• Composable components - a simple interface: inputs (properties), outputs (callbacks). By implementing this interface, components can be freely nested allowing for easier and greater reuse.

Demo

• CRA - React app bootstrapper (simple app - e.g. no state management or routing)

Advantages and Disadvantages

Advantages

• Conceptual simplicity - A React application is a tree of React components, a React component is function that converts a model object in a piece of UI - that's it! Everything else is window dressing!
• Speed relative to competitors
• Simple model for server-side rendering

Disadvantages

• It's a library not a toolkit - it makes no attempt to provide everything you need to build a complete UI
• A comprehensive application is likely to also require router, system for managing state changes, validation, form support and others
• Productivity (optimised for simplicity and correctness, not developer productivity)
• Dropping React into an application is non-trivial - requires a build process that can transpile Javascript versions and JSX, packaging into scripts that will work with browsers

Architecture

• A React app - a composed set of components
• Inputs: Props, State (State can change, use as little State as possible); Render function; DOM
• Props and State = Model; Model + Component = DOM
• Rendered DOM can generate events which feed back into component State, feeding back into the model
• React maintains own virtual DOM, component's render model updates virtual DOM. React framework compares virtual DOM with DOM and updates DOM in the most efficient way possible.

React vs. Angular

• React renders UI and handles events only | Angular is a complete UI framework
• React uses Javascript for view logic | Angular uses a custom template expression syntax
• React apps written in modern JavaScript which is transpiled | Angular apps written in TypeScript (community defaults)

Components

• A React application has a single root component, typically containing more components representing a tree

What Is a Component?

• A fundamental unit of a React app
• A component renders an element in the DOM and handles events raised by the element
• Components can be nested ('composing components'). Outer component is said to own the nested component

The Author Quiz

• User to select the book written by the displayed author

Defining a Component

• Render function returns JSX, a markup language that React compiles to Javscript. React requires a compilation step to convert JSX to Javascript understood by the Javascript interpreter
• Functional component clearly shows that a component is a function from some model data to a piece of UI
• { } indicates a Javascript expression to be evaluated and interpolated into the output

Rendering a Component

• import ReactDOM from 'react-dom'; - required for the render() function
• import React from 'react'; - required anywhere where JSX syntax is used
• ReactDOM.render(<Hello now={new Date().toISOString()} />, document.getElementById('root')); - first parameter is JSX to render the component with values supplied to the component, the second parameter is a DOM element to render the component inside

Bootstrapping the Author Quiz

• generate React app using CRA, add CSS Bootstrap framework and finally define AuthorQuiz component
• create-react-app authorquiz
• add Bootstrap css file import to App.js
• rename App.js to AuthorQuiz.js, change rendered component in index.js to AuthorQuiz

Props

• JSX can represent two types of elements - DOM tags (in lowercase) and user-defined elements (starts with uppercase letter).
• User-defined elements can be passed attributes that will be passed into the component in the props parameter
• All React components must act like pure functions with respect to their props

Class Components

• Function syntax is the preferred way to define a React component
• Also can be defined as a ES6 Javascript class which has additional features that are needed occasionally
• Class component must extend React.Component and contain a render() method

Component Lifecycle

• Class component provides hooks to override particular lifecycle methods in the component lifecycle - e.g. just created or immediately after it has been inserted into the DOM
• Will/Did prefixes to hook names indicate whether the hook is called before/after the described event

State

• Alternative component data container
• props are passed into the component by its parent, State is local mutable data
• Increases complexity and limits the composibility of the component
• Local state should be updated using this.setState() so that React knows state has been updated and can updated the DOM
• Avoid using State as it is better to handle state centrally

setState

• setState() updates the old state with the new state, all other state remains the same. setState() causes the component to eventually be re-rendered

Prop Validation

• React components can validate props they are passed by defining a propTypes object which specifies the allowed values for each key (run-time validation), which will provide error messages but will NOT stop the error from occurring
• validate data type, instance of a class or custom validation
• requires import PropTypes from 'prop-types';
• TypeScript and Flow offer static type checking, superior to PropTypes as they offer compile-time checking
• TypeScript and Flow are excellent additions to a React project - help to model problem domain, reason about the solution and prevent type related bugs

Testing Components

• Testing should focus on application logic. React is a UI technology and generally React components should not contain application logic
• There are properties of React components that are suitable for testing. Functional components that are favoured, are a simple function from Props to JSX and are easy to test by rendering the function with a set of Props and reasoning about the result. Events can also be simulated (like clicking a button) and assertions made about what happens.
• create-react-app applications are already setup for testing using Jest, run tests using npm test
• Testing a component with ReactDOM:

const div = document.createElement("div");
ReactDOM.render(<Hello now={moment.toISOString()} />, div);

• For more sophisticated testing of React components use Enzyme with its React adapter. Install using npm install -save-dev enzyme enzyme-adapter-react-16

JSX