Traceability:

Ant Design - Canvas - Cytoscape - Enzyme - Fast Refresh - Figma - Category:Flutter - Flux - GSAP - Jest - Linkurious - MobX - Redux - Spread - Vasturiano - WhitestormJS

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

composition, where a more “specific” component renders a more “generic” one and configures it with props:.. 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

In React, sharing state is accomplished by moving it up to the closest common ancestor... This is called “lifting state up”.. making a component “controlled”... when the TemperatureInput wants to update its temperature, it calls this.props.onTemperatureChange

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.

“key” is a special string attribute you need to include when creating lists of elements

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.

React design libraries

metadata[edit | edit source]

[npm i -D prop-types ... to check, whether component props is receiving correct type data... Required... Default]

tools[edit | edit source]

react-devtools

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

display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running: $ npx react-native log-ios $ npx react-native log-android

Flipper[edit | edit source]

“direct” debugging? If we wanna stop using remote debugging, we need to basically create web socket connection from within of our React Native app... honourable devtool... It connects to JavascriptCore directly, so we have access to a runtime, so it doesn’t require remote debugging. But it only supports debug JS (source code and profiler) and log values. Network log is not available... Detox Instruments from Wix... Flipper... Network log — very similar to what we have in Chrome Log — combines console.log, native log (ADB, IDB) React DevTools Hermes Debugger — easy way to debug Hermes on Android.. It have a very similar system of plugins as we know from Visual Code or Chrome

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”