49 lines
2.3 KiB
Plaintext
49 lines
2.3 KiB
Plaintext
|
<!doctype rt playground="./playground">
|
||
|
<div id="examples">
|
||
|
<div class="example">
|
||
|
<h3>A Simple Component</h3>
|
||
|
<p>
|
||
|
React components implement a <code>render()</code> 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
|
||
|
<code>render()</code> via <code>this.props</code>.
|
||
|
</p>
|
||
|
<p>
|
||
|
<strong>JSX is optional and not required to use React.</strong> Try
|
||
|
clicking on "Compiled JS" to see the raw JavaScript code produced by
|
||
|
the JSX compiler.
|
||
|
</p>
|
||
|
<div id="helloExample"></div>
|
||
|
<playground direction="horizontal" style="display: block"></playground>
|
||
|
</div>
|
||
|
<div class="example">
|
||
|
<h3>A Stateful Component</h3>
|
||
|
<p>
|
||
|
In addition to taking input data (accessed via <code>this.props</code>), a
|
||
|
component can maintain internal state data (accessed via <code>this.state</code>).
|
||
|
When a component's state data changes, the rendered markup will be
|
||
|
updated by re-invoking <code>render()</code>.
|
||
|
</p>
|
||
|
<div id="timerExample"></div>
|
||
|
</div>
|
||
|
<div class="example">
|
||
|
<h3>An Application</h3>
|
||
|
<p>
|
||
|
Using <code>props</code> and <code>state</code>, we can put together a small Todo application.
|
||
|
This example uses <code>state</code> 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.
|
||
|
</p>
|
||
|
<div id="todoExample"></div>
|
||
|
</div>
|
||
|
<div class="example">
|
||
|
<h3>A Component Using External Plugins</h3>
|
||
|
<p>
|
||
|
React is flexible and provides hooks that allow you to interface with
|
||
|
other libraries and frameworks. This example uses Showdown, an external
|
||
|
Markdown library, to convert the textarea's value in real-time.
|
||
|
</p>
|
||
|
<div id="markdownExample"></div>
|
||
|
</div>
|
||
|
</div>
|