<commit_before>---
layout: page
title: A JavaScript library for building user interfaces
id: home
---

<section class="light home-section">
  <div class="marketing-row">
    <div class="marketing-col">
      <h3>Just the UI</h3>
      <p>
        Lots of people use React as the V in MVC.
        Since React makes no assumptions about the rest of your technology stack,
        it&apos;s easy to try it out on a small feature in an existing project.
      </p>
    </div>
    <div class="marketing-col">
      <h3>Virtual DOM</h3>
      <p>
        React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using <a href="https://facebook.github.io/react-native/">React Native</a>.
      </p>
    </div>
    <div class="marketing-col">
      <h3>Data flow</h3>
      <p>
        React implements one-way reactive data flow which reduces boilerplate and is
        easier to reason about than traditional data binding.
      </p>
    </div>
  </div>
</section>
<hr class="home-divider" />
<section class="home-section">
  <div id="examples">
    <div class="example">
      <h3>A Simple Component</h3>
      <p>
        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`.
      </p><commit_msg>Fix grammar on homepage (#6746)<commit_after>---
layout: page
title: A JavaScript library for building user interfaces
id: home
---

<section class="light home-section">
  <div class="marketing-row">
    <div class="marketing-col">
      <h3>Just the UI</h3>
      <p>
        Lots of people use React as the V in MVC.
        Since React makes no assumptions about the rest of your technology stack,
        it&apos;s easy to try it out on a small feature in an existing project.
      </p>
    </div>
    <div class="marketing-col">
      <h3>Virtual DOM</h3>
      <p>
        React abstracts away the DOM, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using <a href="https://facebook.github.io/react-native/">React Native</a>.
      </p>
    </div>
    <div class="marketing-col">
      <h3>Data flow</h3>
      <p>
        React implements one-way reactive data flow which reduces boilerplate and is
        easier to reason about than traditional data binding.
      </p>
    </div>
  </div>
</section>
<hr class="home-divider" />
<section class="home-section">
  <div id="examples">
    <div class="example">
      <h3>A Simple Component</h3>
      <p>
        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`.
      </p>
{'fraction_non_alphanumeric': 0.10703764320785597, 'fraction_numerical': 0.006546644844517185, 'mean_word_length': 2.659880239520958, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 67, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5343749', 'n_tokens_mistral': 884, 'n_tokens_neox': 871, 'n_words': 365}