react.dev/docs/component-basics.md

id, title, description, layout, next, prev

id	title	description	layout	next	prev
docs-component-basics	Component Basics	What are components?	docs	component-data.html	syntax.html

Components are the basic units of composition in React. Components encapsulate the logic necessary to take input parameters and render markup. Components can be rendered into an existing DOM element on the page by using React.renderComponent:

// Replaces everything in `document.body` with <div>Hello, world!</div>;
React.renderComponent(<div>Hello, world!</div>, document.body);

Keep in mind that <div> is not a DOM element! Keep reading...

Types of Components

There are two types of components:

• Composite Components
• DOM Components

Composite Components such as TodoApp and Typeahead.

The majority of your React code will be implementing composite components.

Composite components are higher-level components with custom rendering logic that may compose other composite components or DOM components.

/** @jsx React.DOM */
var LinkButton = React.createClass({
  render: function() {
    return <a className="btn" />;
  }
});

var myButton = <LinkButton />;

This example defines a LinkButton component class using React.createClass(), and its render() method composes the <a> DOM component.

DOM Components such as div and span.

DOM components are the set of classes that correspond to browser DOM elements. They are defined in React.DOM and can be brought "into scope" by setting @jsx React.DOM in the docblock. See JSX Syntax for more details.

Although React.DOM components look like browser DOM elements, they differ in a few ways:

• All property names, including event handlers, are camelCased.
• JavaScript identifiers should be used, namely className and htmlFor.
• The style prop expects an object instead of a string. The object should map camelCased style properties to values, e.g. {backgroundColor: '#fff'}.

Here is an example of a React link styled as a button with a click handler:

/** @jsx React.DOM */
var handleClick = function() {alert('Clicked!');};
var inlineStyle = {textDecoration: 'none'};

var myLink = <a className="btn" onClick={handleClick} style={inlineStyle} />;