legacy.reactjs.org Open in urlscan Pro
76.76.21.164  Public Scan

Form analysis
2 forms found in the DOM

<form class="css-7vmqep"><span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;"><input type="search" id="algolia-doc-search" placeholder="Search" aria-label="Search docs" class="css-7dpbpx ds-input"
      autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-labelledby="algolia-doc-search" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">
    <pre aria-hidden="true"
      style="position: absolute; visibility: hidden; white-space: pre; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 300; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
    <span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;">
      <div class="ds-dataset-1"></div>
    </span>
  </span></form>

<form><label for="new-todo">What needs to be done?</label><input id="new-todo" value=""><button>Add #1</button></form>

Text Content

We want to hear from you!Take our 2021 Community Survey!

This site is no longer updated.Go to react.dev
React
DocsTutorialBlogCommunity


v18.2.0 LanguagesGitHub


REACT

A JavaScript library for building user interfaces

Get Started
Take the Tutorial


DECLARATIVE

React makes it painless to create interactive UIs. Design simple views for each
state in your application, and React will efficiently update and render just the
right components when your data changes.

Declarative views make your code more predictable and easier to debug.


COMPONENT-BASED

Build encapsulated components that manage their own state, then compose them to
make complex UIs.

Since component logic is written in JavaScript instead of templates, you can
easily pass rich data through your app and keep state out of the DOM.


LEARN ONCE, WRITE ANYWHERE

We don’t make assumptions about the rest of your technology stack, so you can
develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using React
Native.

--------------------------------------------------------------------------------


A SIMPLE COMPONENT

React components implement a render() method that takes input data and returns
what to display. This example uses an XML-like 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?

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Taylor" />);


Result
Hello Taylor


A STATEFUL COMPONENT

In addition to taking input data (accessed via this.props), a component can
maintain internal state data (accessed via this.state). When a component’s state
data changes, the rendered markup will be updated by re-invoking render().

Live JSX Editor JSX?

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

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

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);


Result
Seconds: 3


AN APPLICATION

Using props and state, we can put together a small Todo application. This
example uses state to track the current list of items as well as the text that
the user has entered. Although event handlers appear to be rendered inline, they
will be collected and implemented using event delegation.

Live JSX Editor JSX?

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

root.render(<TodoApp />);


Result


TODO

What needs to be done?Add #1


A COMPONENT USING EXTERNAL PLUGINS

React allows you to interface with other libraries and frameworks. This example
uses remarkable, an external Markdown library, to convert the <textarea>’s value
in real time.

Live JSX Editor JSX?

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    return { __html: this.md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

root.render(<MarkdownEditor />);


Result


INPUT

Enter some markdownHello, **world**!


OUTPUT

Hello, world!

Get Started
Take the Tutorial
Docs
InstallationMain ConceptsAdvanced GuidesAPI ReferenceHooksTestingContributingFAQ
Channels
GitHubStack OverflowDiscussion ForumsReactiflux ChatDEV CommunityFacebookTwitter
Community
Code of ConductCommunity Resources
More
TutorialBlogAcknowledgementsReact NativePrivacyTerms

Copyright © 2024 Meta Platforms, Inc.