mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Update some more docs for package split
This commit is contained in:
Ben Alpert
@@ -6,7 +6,7 @@ prev: tooling-integration.html
|
||||
next: animation.html
|
||||
---
|
||||
|
||||
`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library:
|
||||
The React add-ons are a collection of useful utility modules for building React apps. **These should be considered experimental** and tend to change more often than the core.
|
||||
|
||||
- [`TransitionGroup` and `CSSTransitionGroup`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
|
||||
- [`LinkedStateMixin`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and the component's state.
|
||||
@@ -20,6 +20,4 @@ The add-ons below are in the development (unminified) version of React only:
|
||||
- [`TestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
|
||||
- [`Perf`](perf.html), for measuring performance and giving you hint where to optimize.
|
||||
|
||||
To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.
|
||||
|
||||
When using the react package from npm, simply `require('react/addons')` instead of `require('react')` to get React with all of the add-ons.
|
||||
To get the add-ons, install them individually from npm (e.g., `npm install react-addons-pure-render-mixin`). We don't support using the addons if you're not using npm.
|
||||
|
||||
@@ -17,7 +17,7 @@ React provides a `ReactTransitionGroup` addon component as a low-level API for a
|
||||
`ReactCSSTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.
|
||||
|
||||
```javascript{28-30}
|
||||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
|
||||
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
|
||||
|
||||
var TodoList = React.createClass({
|
||||
getInitialState: function() {
|
||||
@@ -173,7 +173,7 @@ In order for it to apply transitions to its children, the `ReactCSSTransitionGro
|
||||
In the example above, we rendered a list of items into `ReactCSSTransitionGroup`. However, the children of `ReactCSSTransitionGroup` can also be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element. For example, we can implement a simple image carousel like this:
|
||||
|
||||
```javascript{10-12}
|
||||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
|
||||
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
|
||||
|
||||
var ImageCarousel = React.createClass({
|
||||
propTypes: {
|
||||
@@ -201,7 +201,7 @@ You can disable animating `enter` or `leave` animations if you want. For example
|
||||
|
||||
## Low-level API: `ReactTransitionGroup`
|
||||
|
||||
`ReactTransitionGroup` is the basis for animations. It is accessible as `React.addons.TransitionGroup`. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
|
||||
`ReactTransitionGroup` is the basis for animations. It is accessible from `require('react-addons-transition-group')`. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
|
||||
|
||||
### `componentWillAppear(callback)`
|
||||
|
||||
@@ -237,11 +237,7 @@ By default `ReactTransitionGroup` renders as a `span`. You can change this behav
|
||||
</ReactTransitionGroup>
|
||||
```
|
||||
|
||||
Every DOM component that React can render is available for use. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!
|
||||
|
||||
> Note:
|
||||
>
|
||||
> Prior to v0.12, when using DOM components, the `component` prop needed to be a reference to `React.DOM.*`. Since the component is simply passed to `React.createElement`, it must now be a string. Composite components must pass the factory.
|
||||
Every DOM component that React can render is available for use. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself! Just write `component={List}` and your component will receive `this.props.children`.
|
||||
|
||||
Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a `<ul>` with CSS class:
|
||||
|
||||
|
||||
@@ -46,8 +46,10 @@ var NoLink = React.createClass({
|
||||
This works really well and it's very clear how data is flowing, however, with a lot of form fields it could get a bit verbose. Let's use `ReactLink` to save us some typing:
|
||||
|
||||
```javascript{2,7}
|
||||
var LinkedStateMixin = require('react-addons-linked-state-mixin');
|
||||
|
||||
var WithLink = React.createClass({
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
mixins: [LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
@@ -96,8 +98,10 @@ As you can see, `ReactLink` objects are very simple objects that just have a `va
|
||||
### ReactLink Without valueLink
|
||||
|
||||
```javascript
|
||||
var LinkedStateMixin = require('react-addons-linked-state-mixin');
|
||||
|
||||
var WithoutLink = React.createClass({
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
mixins: [LinkedStateMixin],
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
},
|
||||
|
||||
@@ -8,55 +8,4 @@ next: test-utils.html
|
||||
|
||||
> NOTE:
|
||||
>
|
||||
> This module now exists independently at [JedWatson/classnames](https://github.com/JedWatson/classnames) and is React-agnostic. The add-on here will thus be removed in the future.
|
||||
|
||||
`classSet()` is a neat utility for easily manipulating the DOM `class` string.
|
||||
|
||||
Here's a common scenario and its solution without `classSet()`:
|
||||
|
||||
```javascript
|
||||
// inside some `<Message />` React component
|
||||
render: function() {
|
||||
var classString = 'message';
|
||||
if (this.props.isImportant) {
|
||||
classString += ' message-important';
|
||||
}
|
||||
if (this.props.isRead) {
|
||||
classString += ' message-read';
|
||||
}
|
||||
// 'message message-important message-read'
|
||||
return <div className={classString}>Great, I'll be there.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. `classSet()` solves this problem:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var classes = cx({
|
||||
'message': true,
|
||||
'message-important': this.props.isImportant,
|
||||
'message-read': this.props.isRead
|
||||
});
|
||||
// same final string, but much cleaner
|
||||
return <div className={classes}>Great, I'll be there.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
When using `classSet()`, pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string.
|
||||
|
||||
`classSet()` also lets you pass class names in as arguments that are then concatenated for you:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
var cx = React.addons.classSet;
|
||||
var importantModifier = 'message-important';
|
||||
var readModifier = 'message-read';
|
||||
var classes = cx('message', importantModifier, readModifier);
|
||||
// Final string is 'message message-important message-read'
|
||||
return <div className={classes}>Great, I'll be there.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
No more hacky string concatenations!
|
||||
> This module has been deprecated; use [JedWatson/classnames](https://github.com/JedWatson/classnames) instead.
|
||||
|
||||
@@ -6,7 +6,11 @@ prev: two-way-binding-helpers.html
|
||||
next: clone-with-props.html
|
||||
---
|
||||
|
||||
`React.addons.TestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](https://facebook.github.io/jest/)).
|
||||
`ReactTestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](https://facebook.github.io/jest/)).
|
||||
|
||||
```
|
||||
var ReactTestUtils = require('react-addons-test-utils');
|
||||
```
|
||||
|
||||
### Simulate
|
||||
|
||||
@@ -23,7 +27,7 @@ Simulate an event dispatch on a DOM node with optional `eventData` event data. *
|
||||
|
||||
```javascript
|
||||
var node = ReactDOM.findDOMNode(this.refs.button);
|
||||
React.addons.TestUtils.Simulate.click(node);
|
||||
ReactTestUtils.Simulate.click(node);
|
||||
```
|
||||
|
||||
**Changing the value of an input field and then pressing ENTER**
|
||||
@@ -31,8 +35,8 @@ React.addons.TestUtils.Simulate.click(node);
|
||||
```javascript
|
||||
var node = ReactDOM.findDOMNode(this.refs.input);
|
||||
node.value = 'giraffe'
|
||||
React.addons.TestUtils.Simulate.change(node);
|
||||
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
|
||||
ReactTestUtils.Simulate.change(node);
|
||||
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
|
||||
```
|
||||
|
||||
*note that you will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you*
|
||||
|
||||
@@ -12,8 +12,10 @@ next: create-fragment.html
|
||||
In rare situations, you may want to create a copy of a React element with different props from those of the original element. One example is cloning the elements passed into `this.props.children` and rendering them with different props:
|
||||
|
||||
```js
|
||||
var cloneWithProps = require('react-addons-clone-with-props');
|
||||
|
||||
var _makeBlue = function(element) {
|
||||
return React.addons.cloneWithProps(element, {style: {color: 'blue'}});
|
||||
return cloneWithProps(element, {style: {color: 'blue'}});
|
||||
};
|
||||
|
||||
var Blue = React.createClass({
|
||||
|
||||
@@ -33,20 +33,22 @@ var Swapper = React.createClass({
|
||||
|
||||
The children will unmount and remount as you change the `swapped` prop because there aren't any keys marked on the two sets of children.
|
||||
|
||||
To solve this problem, you can use `React.addons.createFragment` to give keys to the sets of children.
|
||||
To solve this problem, you can use the `createFragment` add-on to give keys to the sets of children.
|
||||
|
||||
#### `ReactFragment React.addons.createFragment(object children)`
|
||||
#### `Array<ReactNode> createFragment(object children)`
|
||||
|
||||
Instead of creating arrays, we write:
|
||||
|
||||
```js
|
||||
var createFragment = require('react-addons-create-fragment');
|
||||
|
||||
if (this.props.swapped) {
|
||||
children = React.addons.createFragment({
|
||||
children = createFragment({
|
||||
right: this.props.rightChildren,
|
||||
left: this.props.leftChildren
|
||||
});
|
||||
} else {
|
||||
children = React.addons.createFragment({
|
||||
children = createFragment({
|
||||
left: this.props.leftChildren,
|
||||
right: this.props.rightChildren
|
||||
});
|
||||
|
||||
@@ -44,7 +44,9 @@ While this is fairly performant (since it only makes a shallow copy of `log n` o
|
||||
`update()` provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:
|
||||
|
||||
```js
|
||||
var newData = React.addons.update(myData, {
|
||||
var update = require('react-addons-update');
|
||||
|
||||
var newData = update(myData, {
|
||||
x: {y: {z: {$set: 7}}},
|
||||
a: {b: {$push: [9]}}
|
||||
});
|
||||
|
||||
@@ -10,14 +10,14 @@ React is usually quite fast out of the box. However, in situations where you nee
|
||||
|
||||
In addition to giving you an overview of your app's overall performance, ReactPerf is a profiling tool that tells you exactly where you need to put these hooks.
|
||||
|
||||
## General API
|
||||
|
||||
The `Perf` object documented here is exposed as `require('react-addons-perf')` and can be used with React in development mode only. You should not include this bundle when building your app for production.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> The dev build of React is slower than the prod build, due to all the extra logic for providing, for example, React's friendly console warnings (stripped away in the prod build). Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
|
||||
|
||||
## General API
|
||||
|
||||
The `Perf` object documented here is exposed as `React.addons.Perf` when using the `react-with-addons.js` build in development mode.
|
||||
|
||||
### `Perf.start()` and `Perf.stop()`
|
||||
Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.
|
||||
|
||||
|
||||
@@ -12,9 +12,31 @@ The easiest way to start hacking on React is using the following JSFiddle Hello
|
||||
* **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
|
||||
* [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
|
||||
|
||||
## Starter Kit
|
||||
## Using React from npm
|
||||
|
||||
Download the starter kit to get started.
|
||||
We recommend using React with a CommonJS module system like [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/). Use the [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) npm packages.
|
||||
|
||||
```js
|
||||
// main.js
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
|
||||
ReactDOM.render(
|
||||
<h1>Hello, world!</h1>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
To install React DOM and build your bundle after installing browserify:
|
||||
|
||||
```sh
|
||||
$ npm install --save react react-dom
|
||||
$ browserify -t babelify main.js -o bundle.js
|
||||
```
|
||||
|
||||
## Quick Start Without npm
|
||||
|
||||
If you're not ready to use npm yet, you can download the starter kit which includes prebuilt copies of React and React DOM.
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
|
||||
@@ -31,6 +53,7 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React!</title>
|
||||
<script src="build/react.js"></script>
|
||||
<script src="build/react-dom.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -93,13 +116,14 @@ ReactDOM.render(
|
||||
|
||||
Update your HTML file as below:
|
||||
|
||||
```html{7,11}
|
||||
```html{8,12}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React!</title>
|
||||
<script src="build/react.js"></script>
|
||||
<script src="build/react-dom.js"></script>
|
||||
<!-- No need for Babel! -->
|
||||
</head>
|
||||
<body>
|
||||
@@ -109,10 +133,6 @@ Update your HTML file as below:
|
||||
</html>
|
||||
```
|
||||
|
||||
## Want CommonJS?
|
||||
|
||||
If you want to use React with [browserify](http://browserify.org/), [webpack](https://webpack.github.io/), or another CommonJS-compatible module system, just use the [`react` npm package](https://www.npmjs.com/package/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.
|
||||
|
||||
## Next Steps
|
||||
|
||||
Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more.
|
||||
|
||||
@@ -71,63 +71,7 @@ the type argument can be either an html tag name string (eg. 'div', 'span', etc)
|
||||
`ReactClass`.
|
||||
|
||||
|
||||
### ReactDOM.render
|
||||
|
||||
```javascript
|
||||
ReactComponent render(
|
||||
ReactElement element,
|
||||
DOMElement container,
|
||||
[function callback]
|
||||
)
|
||||
```
|
||||
|
||||
Render a ReactElement into the DOM in the supplied `container` and return a [reference](/react/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/react/docs/reusable-components.html#stateless-functions)).
|
||||
|
||||
If the ReactElement was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
|
||||
|
||||
If the optional callback is provided, it will be executed after the component is rendered or updated.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements
|
||||
> inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient
|
||||
> updates.
|
||||
>
|
||||
> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). In
|
||||
> the future, it may be possible to insert a component to an existing DOM node without overwriting
|
||||
> the existing children.
|
||||
|
||||
|
||||
### ReactDOM.unmountComponentAtNode
|
||||
|
||||
```javascript
|
||||
boolean unmountComponentAtNode(DOMElement container)
|
||||
```
|
||||
|
||||
Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
|
||||
|
||||
|
||||
### ReactDOM.renderToString
|
||||
|
||||
```javascript
|
||||
string renderToString(ReactElement element)
|
||||
```
|
||||
|
||||
Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
|
||||
|
||||
If you call `ReactDOM.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
|
||||
|
||||
|
||||
### ReactDOM.renderToStaticMarkup
|
||||
|
||||
```javascript
|
||||
string renderToStaticMarkup(ReactElement element)
|
||||
```
|
||||
|
||||
Similar to `renderToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
|
||||
|
||||
|
||||
### ReactDOM.isValidElement
|
||||
### React.isValidElement
|
||||
|
||||
```javascript
|
||||
boolean isValidElement(* object)
|
||||
@@ -136,20 +80,6 @@ boolean isValidElement(* object)
|
||||
Verifies the object is a ReactElement.
|
||||
|
||||
|
||||
### ReactDOM.findDOMNode
|
||||
|
||||
```javascript
|
||||
DOMElement findDOMNode(ReactComponent component)
|
||||
```
|
||||
If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When `render` returns `null` or `false`, `findDOMNode` returns `null`.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> `findDOMNode()` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. However, there are some situations where this is necessary (for instance, you may need to find a DOM node in order to position it absolutely or to determine the rendered width measured in pixels).
|
||||
|
||||
>
|
||||
> `findDOMNode()` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
|
||||
|
||||
### React.DOM
|
||||
|
||||
`React.DOM` provides convenience wrappers around `React.createElement` for DOM components. These should only be used when not using JSX. For example, `React.DOM.div(null, 'Hello World!')`
|
||||
@@ -195,3 +125,80 @@ object React.Children.only(object children)
|
||||
```
|
||||
|
||||
Return the only child in `children`. Throws otherwise.
|
||||
|
||||
## ReactDOM
|
||||
|
||||
The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to.
|
||||
|
||||
### ReactDOM.render
|
||||
|
||||
```javascript
|
||||
ReactComponent render(
|
||||
ReactElement element,
|
||||
DOMElement container,
|
||||
[function callback]
|
||||
)
|
||||
```
|
||||
|
||||
Render a ReactElement into the DOM in the supplied `container` and return a [reference](/react/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/react/docs/reusable-components.html#stateless-functions)).
|
||||
|
||||
If the ReactElement was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
|
||||
|
||||
If the optional callback is provided, it will be executed after the component is rendered or updated.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements
|
||||
> inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient
|
||||
> updates.
|
||||
>
|
||||
> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). In
|
||||
> the future, it may be possible to insert a component to an existing DOM node without overwriting
|
||||
> the existing children.
|
||||
|
||||
|
||||
### ReactDOM.unmountComponentAtNode
|
||||
|
||||
```javascript
|
||||
boolean unmountComponentAtNode(DOMElement container)
|
||||
```
|
||||
|
||||
Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
|
||||
|
||||
|
||||
### ReactDOM.findDOMNode
|
||||
|
||||
```javascript
|
||||
DOMElement findDOMNode(ReactComponent component)
|
||||
```
|
||||
If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When `render` returns `null` or `false`, `findDOMNode` returns `null`.
|
||||
|
||||
> Note:
|
||||
>
|
||||
> `findDOMNode()` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. However, there are some situations where this is necessary (for instance, you may need to find a DOM node in order to position it absolutely or to determine the rendered width measured in pixels).
|
||||
|
||||
>
|
||||
> `findDOMNode()` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
|
||||
|
||||
## ReactDOMServer
|
||||
|
||||
The `react-dom/server` package allows you to render your components on the server.
|
||||
|
||||
### ReactDOMServer.renderToString
|
||||
|
||||
```javascript
|
||||
string renderToString(ReactElement element)
|
||||
```
|
||||
|
||||
Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
|
||||
|
||||
If you call `ReactDOM.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
|
||||
|
||||
|
||||
### ReactDOMServer.renderToStaticMarkup
|
||||
|
||||
```javascript
|
||||
string renderToStaticMarkup(ReactElement element)
|
||||
```
|
||||
|
||||
Similar to `renderToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
|
||||
|
||||
@@ -41,6 +41,7 @@ For this tutorial, we're going to make it as easy as possible. Included in the s
|
||||
<meta charset="utf-8" />
|
||||
<title>React Tutorial</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react-dom.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||
</head>
|
||||
@@ -126,6 +127,8 @@ You do not have to return basic HTML. You can return a tree of components that y
|
||||
|
||||
`ReactDOM.render()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.
|
||||
|
||||
The `ReactDOM` module exposes DOM-specific methods, while `React` has the core tools shared by React on different platforms (e.g., [React Native](http://facebook.github.io/react-native/)).
|
||||
|
||||
## Composing components
|
||||
|
||||
Let's build skeletons for `CommentList` and `CommentForm` which will, again, be simple `<div>`s. Add these two components to your file, keeping the existing `CommentBox` declaration and `ReactDOM.render` call:
|
||||
@@ -220,12 +223,13 @@ Markdown is a simple way to format your text inline. For example, surrounding te
|
||||
|
||||
First, add the third-party library **marked** to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. This requires a script tag in your head (which we have already included in the React playground):
|
||||
|
||||
```html{8}
|
||||
```html{9}
|
||||
<!-- index.html -->
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>React Tutorial</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react-dom.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user