From IT Skills
Jump to: navigation, search

It is maintained by Facebook, Instagram and a community of individual developers

Why Immutability Is Important... Immutability makes complex features much easier to implement... Detecting Changes

requirements[edit | edit source]

Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers.

you can use JavaScript extensions like Flow or TypeScript to typecheck your whole application. But even if you don’t use those, React has some built-in typechecking abilities

installation[edit | edit source]

by Building react applications frameworks‎

practices[edit | edit source]

Flux: One-way data flow[edit | edit source]

Properties, a set of immutable values, are passed to a component's renderer as properties in its HTML tag. A component cannot directly modify any properties passed to it, but can be passed callback functions that do modify values. This mechanism's promise is expressed as "properties flow down; actions flow up".

Virtual DOM[edit | edit source]

Another notable feature is the use of a "virtual Document Object Model," or "virtual DOM." React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change while the React libraries only render subcomponents that actually change.

rendering[edit | edit source]

перейти на использование Reselect как можно скорее

Diff algorithm[edit | edit source]

reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. Just to be clear, rerender in this context means calling render for all components

React Fiber is a reimplementation of the React reconciler.

components[edit | edit source]

start component names with a capital letter. React treats components starting with lowercase letters as DOM tags

The best way to build components is generally to group them in two categories: containers and components... "smart" components, or occasionally, View-Controllers... Containers pass data and callbacks as props to presentational components, and handle updating the data when a user interacts

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies... {props.children}... own convention..{props.left}..{props.right}

this.props and this.state may be updated asynchronously

Functional component

props[edit | edit source]

By adding childContextTypes and getChildContext to MessageList (the context provider), React passes the information down automatically and any component in the subtree... Function components are also able to reference context if contextTypes is defined as a property of the function.

React user events handling[edit | edit source]

styling[edit | edit source]

StyleSheet is a part of React-Native, not a part of regular ReactJS. You can however instantiate a style object and use that like you would in RN

reactjs... no need for a special call to styleSheet.create because CSS is supported natively on the web.

Radium[edit | edit source]

Radium has certain valuable ideas that are worth highlighting. Most importantly it provides abstractions required to deal with media queries and pseudo classes (e.g., :hover)

discontinuing ... today the space offers many wonderful alternatives to managing styles in JS, some even being framework-agnostic... Recommended Tools Emotion Aphrodite Glamor JSS styled-components Linaria

Ant Design of React[edit | edit source]

you can replace momentjs with customize date library

tools[edit | edit source]


debugging[edit | edit source]

standalone app for debugging React Native apps: Based on official Remote Debugger and provide more functionality. Includes React Inspector from react-devtools-core. Includes Redux DevTools, made the same API with redux-devtools-extension. Includes Apollo Client DevTools

Hmr[edit | edit source]

React Native supports hot reloading natively as of version 0.22. Using React Hot Loader with React Native can cause unexpected issues (see #824) and is not recommended.

difference between Live Reload (current) and Hot Reload (new).

live reload and hot reload are mutually exclusive

React-Hot-Loader is expected to be replaced by React Fast Refresh... React Native - supports Fast Refresh since 0.61. parcel 2 - supports Fast Refresh since alpha 3. webpack - no support yet, use React-Hot-Loader

In React Native 0.61, we’re unifying the existing “live reloading” (reload on save) and “hot reloading” features into a single new feature called “Fast Refresh”

examples[edit | edit source]

playgrounds[edit | edit source]

other[edit | edit source] is shutting down on April 1st, 2017. It's been replaced by


This category has the following 4 subcategories, out of 4 total.

Pages in category "React"

The following 4 pages are in this category, out of 4 total.