<h1className="hello">My name is Clementine!</h1>

Elements

React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of “components”. An element describes what you want to see on the screen. React elements are immutable.

const element=<h1>Hello, world</h1>;

Typically, elements are not used directly, but get returned from components.

Components

React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element:

functionWelcome(props){return<h1>Hello,{props.name}</h1>;}

Components can also be ES6 classes:

classWelcomeextendsReact.Component{render(){return<h1>Hello,{this.props.name}</h1>;}}

Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (<Wrapper/>not<wrapper/>). Seethis documentation for more information on rendering components.

props

props are inputs to a React component. They are data passed down from a parent component to a child component.

Remember thatprops are readonly. They should not be modified in any way:

// Wrong!props.number=42;

If you need to modify some value in response to user input or a network response, usestate instead.

props.children

props.children is available on every component. It contains the content between the opening and closing tags of a component. For example:

<Welcome>Hello world!</Welcome>

The stringHello world! is available inprops.children in theWelcome component:

functionWelcome(props){return<p>{props.children}</p>;}

For components defined as classes, usethis.props.children:

classWelcomeextendsReact.Component{render(){return<p>{this.props.children}</p>;}}

state

A component needsstate when some data associated with it changes over time. For example, aCheckbox component might needisChecked in its state, and aNewsFeed component might want to keep track offetchedPosts in its state.

The most important difference betweenstate andprops is thatprops are passed from a parent component, butstate is managed by the component itself. A component cannot change itsprops, but it can change itsstate.

For each particular piece of changing data, there should be just one component that “owns” it in its state. Don’t try to synchronize states of two different components. Instead,lift it up to their closest shared ancestor, and pass it down as props to both of them.

Lifecycle Methods

Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM (mounting), when the component updates, and when the component gets unmounted or removed from the DOM.

Controlled vs.Uncontrolled Components

React has two different approaches to dealing with form inputs.

An input form element whose value is controlled by React is called acontrolled component. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged.

Anuncontrolled component works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can’t force the field to have a certain value.

In most cases you should use controlled components.

Keys

A “key” is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity.

Keys only need to be unique among sibling elements in the same array. They don’t need to be unique across the whole application or even a single component.

Don’t pass something likeMath.random() to keys. It is important that keys have a “stable identity” across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such aspost.id.

Refs

React supports a special attribute that you can attach to any component. Theref attribute can be an object created byReact.createRef() function or a callback function, or a string (in legacy API). When theref attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance.

Use refs sparingly. If you find yourself often using refs to “make things happen” in your app, consider getting more familiar withtop-down data flow.

Events

Handling events with React elements has some syntactic differences:

• React event handlers are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.

Reconciliation

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called “reconciliation”.