Позволяет компилировать в код js перед запуском – статическая компиляция. Ранее мы использовали динамическую. Создадим новый проект
Ранее у нас был файл index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel" src="index.jsx"></script> </body> </html> |
Заменим его на следующий.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="app.js"></script> </body> </html> |
index.jsx
|
1 2 3 4 5 6 7 8 9 |
class Hello extends React.Component { render() { return <h1>Hello, React</h1>; } } ReactDOM.render( <Hello></Hello>, document.getElementById("app") ) |
package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "name": "helloapp", "version": "1.0.0", "scripts": { "start": "lite-server" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "lite-server": "^2.2.1" }, "babel" : { "presets": ["env", "react", "stage-0"] } } |
Далее переходим в директорию из консоли при помощи cd
npm install
Компилируем в app.js
|
1 |
.\node_modules\.bin\babel index.jsx --out-file app.js |
Теперь npm start
и в браузере
