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
