+++ description = "React, React Router, Redux" title = "React" draft = false weight = 300 bref="React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies." toc = true script = 'animation' +++

Basics

What makes up React?: React DOM - React is rendered in a single root DOM node. Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM efficiently compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.; JSX - Instead of artificially separating markup and logic into different files, JSX can be used to create React "elements" that contain both. You can put any valid JavaScript expression inside the curly braces in JSX and it will be compiled back to regular JavaScript using a Babel script.

Components: Components are created using JSX and rendered using React DOM. React has functional and class components. Functional components do not have state and class based components do have state. Components can be composed from other smaller components.

Props: When React sees a user-defined component, any attributes in that tag are passed to the component in an object called “props”. Props are read-only and cannot be modified. Everything between JSX tags will be passed to the child component as props.children. Note that there are a few differences in React Attributes. Use className instead of class and htmlFor instead of for.

State: Similar to props, but it is private to the component and modifiable. It is initialized in the constructor method of the component class. A component may choose to pass its state down as props to its child components.

LifeCycle: Component lifecycle methods are called in the following order when an instance of a component is being created and inserted into the DOM: constructor(), render(), componentDidMount(). constructor() is called before the component is mounted and is the only place where you should assign this.state directly. Otherwise, use this.setState(). render() is the only required method in a class component. It should return a React element or nothing at all. componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes and loading data from a remote endpoint should go here. There are also other less commonly used lifecycle methods.

Handling Events: With JSX you pass a function as the event handler, rather than a string. See all of React's SyntheticEvents here. Use ES6 functions for simplifying the binding of this.

Conditional Rendering: You can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. You can use an inline if with the && operator or condition ? true: false ternary operator.

Lists and keys: Use map() to transform arrays into React functional component. Keys help React identify which items have changed, are added, or are removed. Keys should be given to these elements to give them a stable identity. Pass these keys as props to the functional component.

Additional features: Refs - provide a way to access DOM nodes or React elements created in the render method.; Fragments - A common pattern in React for returning multiple elements. Usually this is done by appending 1 div node containing JSX to the DOM.; Higher Order Component (HOC) - a function that takes a component and returns a new component. It is used for reusing logic by wrapping the original component with additional functionality.; Type checking - As your app grows, you can catch a lot of bugs with typechecking. You can use JavaScript extensions like Flow or TypeScript or the built-in propTypes.

Why I prefer React to Angular: JSX > TypeScript - JSX is easy to learn and allows for combining of markup and logic.; Virtual DOM > MVC - Unidirectional data flow from parent to child component is easy to understand and predictable as opposed to Angular's two-way binding.; Library > framework - React's library is flexible to use many open source packages. Angular's framework comes built-in with many components (forms, router, etc.)and a lot of packages are incompatible with TypeScript.

↑ Top

Advanced

React Router: Offers a way to write your code so that it will show certain components of your app only if the route matches what you define. The 3 components you will interact the most when working with React Router are: BrowserRouter, Link, and Route. BrowserRouter wraps all your Route components. Link is used to generate links to your routes. Route is responsible for showing the components they contain.; React Router offers a way to match on URL params using : before the param. It also allows for nested routing. For this to work, the component needs to be wrapped in a higher order component from React Router called withRouter.

State management: Lifting state up - If several components need to reflect the same changing data, the shared state can be lifted to their closest common ancestor. The common ancestor will pass a function down to its child components. The child component will invoke the parent component's function with the common data that needs to be changed. The lifecycle method will fire and the child components will be re-rendered with updated props.; Redux - Lifting state can be tedious in a complex app so many developers prefer to use a library called Redux for state management. Provides <Provider/> which makes the Redux store available to the rest of the app. It also provides a connect function for components to connect to the store via mapStateToProps and mapDispatchToProps.; Context - A new feature of React that provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. In the parent component, create a context with React.createContext() and create a provider that returns the context.Provider. The child component can access the context through context.Consumer.; Redux vs Context - React Redux uses context internally but it doesn’t expose this in the public API. So you should feel much safer using React Redux because if it changes, the burden of updating the code will be on React Redux and not you. However, with a simple app, it might be easier to implement Context quickly.

Tools: Create React App - a toolchain used for rapid development. It includes a package manager (NPM), bundler (webpack), compiler (Babel), boilerplate code, and development environment for quickly writing code to production. Create React App produces a Single Page Application (SPA) that loads a single HTML page and dynamically updates that page as the user interacts with the app. Usually, the entire website bundle must be downloaded before anything is displayed (client side rendering), but there are ways of lazy loading (downloading when needed) for a faster client experience.; Gatsby - a static site generator that lets you use React components and outputs pre-rendered HTML/CSS. If your application doesn't contain dynamic content, using Gatsby will guarantee the fastest load time.; Next.js - a popular and lightweight framework for server‑rendered applications built with React. See diagram below for difference between server and client rendering; React Native - A framework for building native applications using JavaScript. React Native compiles to native app components, which makes it possible for you to build native mobile applications. In React JS, React is the base abstraction of React DOM for the web platform, while with React Native, React is still the base abstraction but of React Native. So the syntax and workflow remain similar, but the components are different.

↑ Top

Resources

React resources: A huge list of learning resources for everything related to React, React Native, JSX, Flux, Redux, MobX, Testing, GraphQL, and more!