Support Ukraine Help Provide Humanitarian Aid to Ukraine.

React Docs Tutorial Blog Community Search v18.2.0 Languages GitHub

React
A JavaScript library for building user interfaces

Get Started Take the Tutorial

Declarative Component-Based Learn Once, Write Anywhere

React makes it painless to create interactive UIs. Build encapsulated components that manage We don’t make assumptions about the rest of
Design simple views for each state in your their own state, then compose them to make your technology stack, so you can develop new
application, and React will efficiently update and complex UIs. features in React without rewriting existing code.
render just the right components when your data
changes. Since component logic is written in JavaScript React can also render on the server using Node
instead of templates, you can easily pass rich and power mobile apps using React Native.
Declarative views make your code more data through your app and keep state out of
predictable and easier to debug. the DOM.

LIVE JSX EDITOR JSX? RESULT

A Simple Component class HelloMessage extends React.Component { Hello Taylor

render() {
React components implement a render() return <div>Hello {this.props.name}</div>;
}
method that takes input data and returns what }
to display. This example uses an XML-like
root.render(<HelloMessage name="Taylor" />);
syntax called JSX. Input data that is passed into
the component can be accessed by render()
via this.props .

JSX is optional and not required to use

React. Try the Babel REPL to see the raw
JavaScript code produced by the JSX
compilation step.

LIVE JSX EDITOR JSX? RESULT

A Stateful Component class Timer extends React.Component { Seconds: 6

constructor(props) {
In addition to taking input data (accessed via super(props);
this.state = { seconds: 0 };
this.props ), a component can maintain }
internal state data (accessed via
tick() {
this.state ). When a component’s state data
this.setState(state => ({
changes, the rendered markup will be updated seconds: state.seconds + 1
by re-invoking render() . }));
}

componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {

LIVE JSX EDITOR JSX? RESULT

An Application class TodoApp extends React.Component {

constructor(props) {
Using props and state , we can put together super(props);
this.state = { items: [], text: '' };
TODO
a small Todo application. This example uses this.handleChange = this.handleChange.bind(this);
state to track the current list of items as well this.handleSubmit = this.handleSubmit.bind(this); What needs to be done?
}
as the text that the user has entered. Although
event handlers appear to be rendered inline, render() { Add #1
they will be collected and implemented using return (
<div>
event delegation. <h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>

LIVE JSX EDITOR JSX? RESULT

A Component Using class MarkdownEditor extends React.Component {

External Plugins constructor(props) {

super(props);
this.md = new Remarkable();
Input
React allows you to interface with other this.handleChange = this.handleChange.bind(this); Enter some markdown
libraries and frameworks. This example uses this.state = { value: 'Hello, **world**!' };
} Hello, **world**!
remarkable, an external Markdown library, to
convert the <textarea> ’s value in real time. handleChange(e) {
this.setState({ value: e.target.value });
}

getRawMarkup() {
Output
return { __html: this.md.render(this.state.value) }; Hello, world!
}

render() {

Get Started Take the Tutorial

DOCS CHANNELS

Installation GitHub
Copyright © 2022 Meta Platforms, Inc.
Main Concepts Stack Overflow

Advanced Guides Discussion Forums

API Reference Reactiflux Chat

Hooks DEV Community

Testing Facebook

Contributing Twitter

FAQ

COMMUNITY MORE

Code of Conduct Tutorial

Community Resources Blog

Acknowledgements

React Native

Privacy

Terms