mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-22 11:52:00 +00:00
Migrated remaining Babel REPL links
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 <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%0Aconst%20container%20%3D%20document.getElementById('root')%3B%0AReactDOM.render(element%2C%20container)%3B%0A">Babel REPL</a> 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-repl://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](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-0&code=function%20hello()%20%7B%0A%20%20return%20%3Cdiv%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D).
|
||||
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).
|
||||
|
||||
## 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](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-0&code=function%20hello()%20%7B%0A%20%20return%20%3Cdiv%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D).
|
||||
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).
|
||||
|
||||
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](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEASCmIQHsCy8pgOb2vAHgC7wB2AJjAErxjCEB0AwsgLYAOyJph0A3gFDRoAJ1Jl4wgBQBKPoKEj4hAK7CS0SfIXQAPGQCWANwB8W7XEQo-hABb6I9NsORsHJMC3gBfM0J0B6AxMzaQBueR8ffmpaQgARAHlUelFyCU0_BCQ0DAhsXHdPAF4AIgAVMABPFGES6H9jABp5FmRlEkIAOWRxfjCgA&debug=false&circleciRepo=&evaluate=false&lineWrap=false&presets=react&targets=&version=6.26.0) 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-repl://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 <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%0Aconst%20container%20%3D%20document.getElementById('root')%3B%0AReactDOM.render(element%2C%20container)%3B%0A">Babel REPL</a> 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-repl://es5-syntax-example) to check what ES6 code compiles to.
|
||||
|
||||
### How to Follow Along
|
||||
|
||||
|
||||
3
examples/es5-syntax-example.js
Normal file
3
examples/es5-syntax-example.js
Normal file
@@ -0,0 +1,3 @@
|
||||
const element = <h1>Hello, world!</h1>;
|
||||
const container = document.getElementById('root');
|
||||
ReactDOM.render(element, container);
|
||||
3
examples/jsx-simple-example.js
Normal file
3
examples/jsx-simple-example.js
Normal file
@@ -0,0 +1,3 @@
|
||||
function hello() {
|
||||
return <div>Hello world!</div>;
|
||||
}
|
||||
Reference in New Issue
Block a user