mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-22 20:01:57 +00:00
Standardized Markdown lists
This commit is contained in:
@@ -22,9 +22,9 @@ var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
|
||||
|
||||
We recommend using JSX for many reasons:
|
||||
|
||||
- It's easier to visualize the structure of the DOM.
|
||||
- Designers are more comfortable making changes.
|
||||
- It's familiar for those who have used MXML or XAML.
|
||||
* It's easier to visualize the structure of the DOM.
|
||||
* Designers are more comfortable making changes.
|
||||
* It's familiar for those who have used MXML or XAML.
|
||||
|
||||
|
||||
## The Transform
|
||||
@@ -69,8 +69,8 @@ how to setup compilation.
|
||||
React and JSX are independent technologies, but JSX was primarily built with
|
||||
React in mind. The two valid uses of JSX are:
|
||||
|
||||
- To construct instances of React DOM components (`React.DOM.*`).
|
||||
- To construct instances of composite components created with
|
||||
* To construct instances of React DOM components (`React.DOM.*`).
|
||||
* To construct instances of composite components created with
|
||||
`React.createClass()`.
|
||||
|
||||
### React DOM Components
|
||||
@@ -160,9 +160,9 @@ var content = <Container>{/* this is a comment */}<Nav /></Container>;
|
||||
|
||||
Beyond the compilation step, JSX does not require any special tools.
|
||||
|
||||
- Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).
|
||||
- Linting provides accurate line numbers after compiling without sourcemaps.
|
||||
- Elements use standard scoping so linters can find usage of out-of-scope
|
||||
* Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).
|
||||
* Linting provides accurate line numbers after compiling without sourcemaps.
|
||||
* Elements use standard scoping so linters can find usage of out-of-scope
|
||||
components.
|
||||
|
||||
## Prior Work
|
||||
@@ -171,8 +171,8 @@ JSX is similar to several other JavaScript embedded XML language
|
||||
proposals/projects. Some of the features of JSX that distinguish it from similar
|
||||
efforts include:
|
||||
|
||||
- JSX is a simple syntactic transform.
|
||||
- JSX neither provides nor requires a runtime library.
|
||||
- JSX does not alter or add to the semantics of JavaScript.
|
||||
* JSX is a simple syntactic transform.
|
||||
* JSX neither provides nor requires a runtime library.
|
||||
* JSX does not alter or add to the semantics of JavaScript.
|
||||
|
||||
JSX is similar to HTML, but not exactly the same. See [JSX gotchas](./jsx-gotchas.html) for some key differences.
|
||||
|
||||
@@ -14,17 +14,17 @@ Form components such as `<input>`, `<textarea>`, and `<option>` differ from othe
|
||||
|
||||
Form components support a few props that are affected via user interactions:
|
||||
|
||||
- `value`, supported by `<input>` and `<textarea>` components.
|
||||
- `checked`, supported by `<input>` components of type `checkbox` or `radio`.
|
||||
- `selected`, supported by `<option>` components.
|
||||
* `value`, supported by `<input>` and `<textarea>` components.
|
||||
* `checked`, supported by `<input>` components of type `checkbox` or `radio`.
|
||||
* `selected`, supported by `<option>` components.
|
||||
|
||||
In HTML, the value of `<textarea>` is set via children. In React, you should use `value` instead.
|
||||
|
||||
Form components allow listening for changes by setting a callback to the `onChange` prop. The `onChange` prop works across browsers to fire in response to user interactions when:
|
||||
|
||||
- The `value` of `<input>` or `<textarea>` changes.
|
||||
- The `checked` state of `<input>` changes.
|
||||
- The `selected` state of `<option>` changes.
|
||||
* The `value` of `<input>` or `<textarea>` changes.
|
||||
* The `checked` state of `<input>` changes.
|
||||
* The `selected` state of `<option>` changes.
|
||||
|
||||
Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events.
|
||||
|
||||
|
||||
@@ -69,39 +69,39 @@ To learn more about refs, including ways to use them effectively, see our [more
|
||||
|
||||
Components have three main parts of their lifecycle:
|
||||
|
||||
- **Mounting:** A component is being inserted into the DOM.
|
||||
- **Updating:** A component is being re-rendered to determine if the DOM should be updated.
|
||||
- **Unmounting:** A component is being removed from the DOM.
|
||||
* **Mounting:** A component is being inserted into the DOM.
|
||||
* **Updating:** A component is being re-rendered to determine if the DOM should be updated.
|
||||
* **Unmounting:** A component is being removed from the DOM.
|
||||
|
||||
React provides lifecycle methods that you can specify to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
|
||||
|
||||
|
||||
### Mounting
|
||||
|
||||
- `getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
|
||||
- `componentWillMount()` is invoked immediately before mounting occurs.
|
||||
- `componentDidMount(DOMElement rootNode)` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
|
||||
* `getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
|
||||
* `componentWillMount()` is invoked immediately before mounting occurs.
|
||||
* `componentDidMount(DOMElement rootNode)` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
|
||||
|
||||
|
||||
### Updating
|
||||
|
||||
- `componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
|
||||
- `shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return false if React should skip updating.
|
||||
- `componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
|
||||
- `componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)` is invoked immediately after updating occurs.
|
||||
* `componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
|
||||
* `shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return false if React should skip updating.
|
||||
* `componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
|
||||
* `componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)` is invoked immediately after updating occurs.
|
||||
|
||||
|
||||
### Unmounting
|
||||
|
||||
- `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
|
||||
* `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
|
||||
|
||||
|
||||
### Mounted Methods
|
||||
|
||||
_Mounted_ composite components also support the following methods:
|
||||
|
||||
- `getDOMNode(): DOMElement` can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.
|
||||
- `forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.
|
||||
* `getDOMNode(): DOMElement` can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.
|
||||
* `forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.
|
||||
|
||||
> Note:
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user