mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 04:12:34 +00:00
babel-repl:// protocol changed to babel://
This commit is contained in:
@@ -31,4 +31,4 @@ The next few sections will gradually introduce you to using React. We will exami
|
||||
|
||||
React is a JavaScript library, and so it assumes you have a basic understanding of the JavaScript language. If you don't feel very confident, we recommend [refreshing your JavaScript knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) so you can follow along more easily.
|
||||
|
||||
We also use some of the ES6 syntax in the examples. We try to use it sparingly because it's still relatively new, but we encourage you to get familiar with [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel-repl://es5-syntax-example) to check what ES6 code compiles to.
|
||||
We also use some of the ES6 syntax in the examples. We try to use it sparingly because it's still relatively new, but we encourage you to get familiar with [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to.
|
||||
|
||||
@@ -47,7 +47,7 @@ React.createElement(
|
||||
)
|
||||
```
|
||||
|
||||
If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel-repl://jsx-simple-example).
|
||||
If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
|
||||
|
||||
## Specifying The React Element Type
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel-repl://jsx-simple-example).
|
||||
If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
|
||||
|
||||
The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components.
|
||||
|
||||
|
||||
@@ -5,4 +5,4 @@ order: 0
|
||||
|
||||
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](babel-repl://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
|
||||
**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
|
||||
|
||||
@@ -28,7 +28,7 @@ Once you get a little familiar with the game, feel free to close that tab, as we
|
||||
|
||||
We'll assume some familiarity with HTML and JavaScript, but you should be able to follow along even if you haven't used them before.
|
||||
|
||||
If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel-repl://es5-syntax-example) to check what ES6 code compiles to.
|
||||
If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to.
|
||||
|
||||
### How to Follow Along
|
||||
|
||||
@@ -129,7 +129,7 @@ return React.createElement('div', {className: 'shopping-list'},
|
||||
);
|
||||
```
|
||||
|
||||
[See full expanded version.](babel-repl://tutorial-expanded-version)
|
||||
[See full expanded version.](babel://tutorial-expanded-version)
|
||||
|
||||
If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it directly in this tutorial. Instead, we will keep using JSX.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user