1. Getting Started
- Benefits of React:
- Rendering is simple. React has an in-memory representation of the DOM which is supposedly faster to render and manipulate.
- Component Oriented Development. Everything in React is a Component written in Javascript.
- Flexible Abstraction of the DOM Model that promotes consistent behavior across different browsers and devices.
- Minimum React Project Folder Structure
source
|__ app.js
index.html
package.json
webpack.config.js
- Start a local server by running
node_modules/.bin/webpack-dev-server
- Although you can inject your React components in the
document.body
, it isn't recommended because other libraries attach elements to it that may cause issues. - React uses props to pass data from parent to child. It cannot be changed from the child component. In JSX, props are passed as attributes.
//JSX = <MyComponent quantity="1" name="test" />
{this.props.quantity} x {this.props.name}
- To reference everything in between the opening and closing tag, use props.children.
//JSX = <MyComponent quantity="1"/>CONTENT TO ACCESS</MyComponent>
{this.props.quantity} x {this.props.children}
- props are immutable. state is what you need to update your components. React uses
this.setState()
to change a components behavior and handle user interaction. state is private to a component.
2. Inside the DOM Abstraction
- A single event listener is added to the root of the document that gets mapped to the appropriate element when the event is fired. The event handler is removed when the component unmounts.
- JSX events and attributes are camelCased because as a Javascript language extension, it's built using the DOM API and not the HTML specs.
- JSX Tags must have an opening and closing tag, or self-closed.
- You can create React elements in plain JavaScript using
React.createElement
. - JSX components can only render a single root node because it is transformed to
React.createElement("h1", null, "Hello World");
. - Conditional
if
andswitch
statements are not supported in JSX. Use the ternary operator inline or move the expressions out to get around it. - Javascript comment styles wrapped in
{}
are used in JSX and not the HTML syntax. - React's built-in XSS protection will not allow you to generate or attach dynamic HTML. Use the
dangerouslySetInnerHTML
property to bypass it. - A React component's state should be kept to a minimum because the entire component is rendered when the state changes.
- React provides 2 ways of handling forms components:
- Controlled - Any form component with a
value
property that gets reflected when rendered. Controlled form components are uneditable by default and require component state handling to change the value. Note thattextarea
andselect
use thevalue
property to set default values. - Uncontrolled - Any form component without a
value
property and where user changes are handled without handling state.
- Controlled - Any form component with a
- The unique identifier value of the
key
attribute allows fast lookup in React for components in a collection -<Card key={card.id} ... />
- Use the
ref
property if you need access to the rendered DOM element. Use this sparingly because there's almost always a better way of representing a component before using this construct -<input ref="myInput" />
.
3. Architecting Applications with Components
propTypes
are constructor properties that describe which are required and what type of data it needs. It's a good practice to use this property when creating a component.this.props
are the components configuration and are immutable.this.state
is the components mutated form that is the result of user interaction.- React rendering follows the hierarchy of components.
render()
is required but you canreturn null
in cases where an absence of component is needed. - A good practice when data fetching from a REST API is to create a container component and pass down the data and callback as its
props
. - React's Immutability Helper npm library
react-addons-update
helps objects and arrays become immutable by returning a new instance when used. - Under the hood, React does these to make your code performant. More Info Here.
- Autobinding - every method is automatically bound to its component instance (except in ES6 syntax) and is cached for performance
- Event Delegation - React has a single event listener for all components. It knows how to dispatch the correct one by maintaining an internal mapping of its component events.
6. Architecting React Applications with Flux
- Flux is an architectural guideline developed for the web by Facebook that enables a unidirectional flow of data in an application.
- Flux Components:
- Stores - holds and dispatches the application's state. Nothing outside Stores has insight to how data is managed. Stores contain the application state and logic and does not represent a single record of data like ORMs do.
- Actions - changes in your application that represent the mutation of its state. Past tense is recommended to show something has happened.
- Dispatcher - relays communication from Actions to the Store. Data flows through Dispatchers as a central hub for your application.
flux/utils
provides 3 base classes to help you implement Stores:- Store - a simple wrapper around a basic store
- ReduceStore - uses reducing functions to modify state
- MapStore - variation of ReduceStore but with key-value pairs instead of a single object
7. Performance Tuning
- Whenever a component's state changes, React will reconstruct the DOM based on the state change and diff the current DOM to determine which component to update, otherwise known as React's reconciliation process.
- React does not immediately update the component when you call
setState()
. Instead it marks the component "dirty" and uses an event loop to render the changes in batches. - When invoking
shouldComponentUpdate(nextProps, nextState)
, it is important to remember that comparing nested objects will greatly impact performance. You can use React's immutability helpers to perform such operations efficiently instead of rolling out your own.
8. Isomorphic React Applications
- Isomorphic or Universal Applications are Javascript code shared by the client and the server brought by the advent of node. The server side code takes care of prepopulating the page and the client code takes over further navigation when it loads.
- A popular approach to tackle data fetching that can be used on the client and the server side is the use of a static method within the component. The accessibility of the method without instantiation is valuable for prefetching data.
9. Testing React Components
- Shallow Rendering is an experimental feature that allows you to inspect a component without the need for the DOM, which is the opposite of
renderIntoDocument
from thereact-addons-test-utils
. npm jest
is React's recommended testing framework.