React.js

Methodology for building a React application

(((1.))) Break the app into components. We mapped out the component structure of our app by examining the app's working UI. We then applied the single-responsibility principle to break components down so that each had minimal viable functionality. (((2.))) Build a static version of the app Our bottom-level (user-visible) comopnents rendered HTML based on static props, passed down from parents. (((3.))) Determine what should be stateful. We used a series of questions to deduce what data should be stateful. This data was represented in our static app as props. (((4.))) Determine in which component each piece of state should live. We used another series of questions to determine which component should own each piece of state. TimersDashboard owned timer state data and ToggleableTimerForm and EditableTimer both held state pertaining to whether or not to render a TimerForm. (((5.))) Hard-code initial states We then wrote state-owners' getInitialState functions with hard-coded values. (((6.))) Add inverse data flow. We added interactivity by decorating buttons with onClick handlers. These called functions that were passed in as props down the hierarchy from whichever component owned the relevant state being manipulated.

Criteria to determine whether data should be stateful

1. Is it passed in from a parent via props? If so, it probably isn't state. A lot of the data used in our child components are already listed in their parents. This criterion helps us de-duplicate. For example, "timer properties" is listed multiple times. When we see the properties declared in EditableTimerList, we can consider it state. But when we see it elsewhere, it's not. 2. Does it change over time? If not, it probably isn't state. This is a key criterion of stateful data: it changes. 3. Can you compute it based on any other state or props in your component? If so, it's not state. For simplicity, we want to strive to represent state with as few data points as possible.

Two reasons to use arrow functions

1. Terse syntax: const timestamps = messages.map(function(m) { return m.timestamp }}; const timestamps = messages.map(m => m.timestamp); 2. Binding of the this object. It binds this to the object with this method by default.

What is the virtual DOM?

A fake representation of the Document Object Model (DOM, for short - the browser's HTML tree that makes up a web page.) This allows React to make selective updates to the DOM depending on which elements are changing.

How state changes funnel down to child components

An action will update state on a parent component. When state changes on a component, that component re-renders by calling render(). This, in turn causes any of its children to re-render as well. And the children of those children. And on and on down the chain.

Which method on the React library do you use to create a component? ES5 vs. ES6

ES5: React.createClass() Pass this function a single argument - a JavaScript object. This object must contain the key, render, which defines a rendering function. React uses the return value from this method to determine what to render to the page. --- ES6: class FooComponent extends React.Component {}

How to have Babel compile a JS file that has JSX within it

Import babel in a script tag: <script src="vendor/babel-core-5.8.25.js"></script> Then when you import a file that has JSX within it, make sure to use the tag type='text/babel' <script type="text/babel" src="./app.js"></script>

Difference in casing between different types of React element declarations

In React, native HTML elements always start with a lowercase letter whereas React component names always start with an uppercase letter.

Where is the majority of a React UI's HTML located?

In bottom-level components, or leaf components. The components above leaf components are primarily concerned with orchestration.

How child components communicate with parent components

Inverse data flow - Children communicate with parents by calling functions that are handed to them via props. In the ProductHunt app, when an up-vote was clicked Product didn't do any data management. It was not the owner of its state. Instead, it called a function given to it by ProductList, passing in its id. ProductList was then able to manage state accordingly.

What does JSX stand for?

JavaScript eXtension syntax - a syntax extension for JS written by Facebook. It compiles to vanilla JS.

How does Object.assign() work

Object.assign() accepts any number of objects as arguments. When the function receives two arguments, it copies the properties of the second object onto the first, like so: const coffee = { }; const noCream = { cream: false }; const noMilk = { milk: false }; Object.assign(coffee, noCream); // coffee is now: `{cream: false}` Object.assign(coffee, noMilk); // coffee is now: `{ cream: false, milk: false }` We often pass three arguments to Object.assign() - the first argument is a new JavaScript object, the one that Object.assign() will ultimately return. The second is the object whose properties we'd like to build off of. The last is the changes we'd like to apply. const coffeeWithMilk = Object.assign({}, coffee, { milk: true }); const coffeeWithMilk = Object.assign({}, coffee, { milk: true }); // coffeeWithMilk is: `{ cream: false, milk: true }` // coffee was not modified: `{ cream: false, milk: false }`

One-way data flow

React's idea that data comes from the top and propagates "downwards" through its various components.

Rewrite this without using JSX: <div className='ui items'> Hello, friend! I am a basic React component. </div>

React.createElement('div', {className: 'ui items'}, React.createElement('p', null, 'Hello, friend! I am a basic React component.') )

How to instruct React to render a component inside a specific DOM node

ReactDOM.render([what], [where]) example: ReactDOM.render(<ProductList />, document.getElementById('content'))

how to tell React that a component is stateful

Set a function getInitialState with initial values for state properties. getInitialState, like render, is a lifecycle method on the component, executed exactly once during the component lifecycle and defines the initial state of the component.

Read/write on props?

This.props is immutable. Props are read-only from the child component. A child component does not own its props, the parent component does.

Library used to randomly generate a Universally Unique Identifier to items

Universally Unique IDentifier = UUID Use uuid.v4(), ex. id: uuid.v4() It will generate a string that looks like this: 2030efbd-a32f-4fcc-8637-7c410896b3e3

General rule to adhere to w.r.t manipulating objects in React

Unless a function owns an object (it declared the object), it should refrain from making any edits to it. (Reason being that with asynchronous changes to the state object being made by multiple components, there is a chance that one component would update state before the other and fall out of sync.

Simple way to delete an item from an array

Use Array's filter() method. function (timerId) { timers = timers.filter(t -> t.id !== timerId) }

How to create unique bindings for each instance of the Product component

Use a key prop that needs to be unique, for example: key={'product-' + product.id}

How to pass props from a parent component to a child component

Use syntax [prop_-name]={prop_value} in the JSX for the child component within the parent component's render method.

Fundamental difference between props and state

While a component has information from both its props and its state, props are immutable and owned by a component's parent, whereas state is mutable and owned by the component. this.state is private to the component and can be updated with this.setState(). As with props, when the state updates the component will re-render itself.

React method that forces a React component to re-render

forceUpdate(). It can be called on an interval to yield the smooth appearance of a live timer.

What are bottom-level components called?

leaf components.

How data flows from parent components to child components

props. When a parent renders a child, it can send along props the child can depend upon.

ONLY way you should modify a component's state

this.setState(). This function has important hooks around state modification that we would be bypassing.

How to access all component props

through the this.props component object. We can access all of the props within this object.

How to pass in a Number or null in JSX

use braces. JSX attribute values must be delimited by either braces or quotes. If type is important and we want to pass in something like a Number or a null, use braces.

delimiter for expression in JSX

{} for example, id={product.id} will evaluate what is inside the brackets, or count={2 + 5} will evaluate to count=7.