React подготовка к работе
Чтобы использовать React на производстве, нужен NPM и Node.js
Чтобы получить общее представление о том, что такое React, вы можете написать код React непосредственно в HTML.
Но для того, чтобы использовать React в производстве, вам нужно установить NPM и Node.JS.
React непосредственно в HTML
Самый быстрый способ начать обучение React, чтобы писать React непосредственно на HTML файлы.
Начните с включения трех скриптов, первые два позволяют нам писать код React в ваших Java скрипты, а третий, Babel, позволяет нам писать синтаксис JSX и ES6 в старых браузерах.
Вы узнаете об этом больше React JSX глава.
Пример
Включите три скрипта в свой HTML файл:
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="mydiv"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
</script>
</body>
</html>
Этот способ использования React может быть приемлемым для целей тестирования, но для производства вам нужно будет настроить React окружающую среду.
Настройка окружающей среды React
Если у вас есть NPM и Node.js, вы можете создать приложение React, предварительно установив create-react-app.
Если вы уже создали create-react-app, вы можете пропустить этот раздел.
Установить create-react-app с помощью следующей команды в вашем терминале:
C:\Users\Your Name>npm install -g create-react-app
Тогда вы можете создать приложение React, давайте создадим его под названием myfirstreact
.
Выполните эту команду, чтобы создать приложение React с именем myfirstreact
:
C:\Users\Your Name>npx create-react-app myfirstreact
Создать create-react-app настроит все, что нужно, чтобы запустить приложение React.
Запустите приложение React
Теперь вы готовы запустить свое первое реальное React приложение!
Выполните эту команду, чтобы перейти к следующему шагу myfirstreact
директории:
C:\Users\Your Name>cd myfirstreact
Выполните эту команду для запуска приложения React myfirstreact
:
C:\Users\Your Name\myfirstreact>npm start
Новое окно браузера появится вместе с вашим недавно созданным приложением React!
Если нет, откройте браузер и введите текст localhost:3000
в адресной строке.
Результат:
Изменить приложение React
Пока все хорошо, но как я могу изменить содержание?
Смотреть в директорию myfirstreact
, и вы найдете папку src
.
Внутри папки src
, есть такой файл называется
App.js
, откройте его и он будет выглядеть так:
/myfirstreact/src/App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
Попробуйте изменить содержимое HTML и сохраните файл.
Обратите внимание, что изменения видны сразу после сохранения файла, вам не нужно перезагружать браузер!
Пример
Замените все содержимое внутри устройства <div className="App">
в элементе <h1>
.
Смотрите изменения в браузере, когда вы нажимаете кнопку "Сохранить".
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
}
export default App;
Обратите внимание, что мы удалили импорт, который нам не нужен (logo.svg и App.css).
Результат:
Что дальше?
Теперь у вас есть среда React на вашем компьютере, и вы готовы узнать больше о React.
В остальной части этого урока мы будем использовать наш инструмент Show React, чтобы объяснить различные аспекты React и то, как они отображаются в браузере.
Если вы хотите выполнить те же действия на своем компьютере, начните с удаления
папки src
, чтобы она содержала только два файла:
index.js
и index.html
,
вы также должны удалить все ненужные строки кода внутри двух файлов,
чтобы они выглядели как файлы в инструменте Show React ниже:
Пример
Нажмите на кнопку "Выполнить пример", чтобы увидеть результат.
index.js
:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));
index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>