Learn React

Portals? Advanced Guides > Learn React Today

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ReactDOM.createPortal(child, container) The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element. Usage Normally, when you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node: render() { // React mounts a new div and renders the...

Read more...

How to Optimizing Performance? Advanced Guides > Learn React Today

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application. Use the Production Build If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build. By default, React includes many helpful...

Read more...

JSX In Depth? Advanced Guides > Learn React Today

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code: <MyButton color="blue" shadowSize={2}> Click Me </MyButton> compiles into: React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' ) You can also use the self-closing form of the tag if there are no children. So: <div className="sidebar" /> compiles into: React.createElement( 'div', {className: 'sidebar'}, null ) If you want to test out how some specific JSX is converted into JavaScript, you can try out the online Babel compiler. Specifying The React Element Type The first...

Read more...

Higher-Order Components | HOC | Advanced Guides > Learn React Today

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. const EnhancedComponent = higherOrderComponent(WrappedComponent); Whereas a component transforms props into UI, a higher-order component transforms a component into another component. HOCs are common in third-party React libraries, such as Redux’s connect and Relay’s createFragmentContainer. In this document, we’ll...

Read more...

Fragments? Advanced Guides > Learn React Today

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> ); } There is also a new short syntax for declaring them. Motivation A common pattern is for a component to return a...

Read more...