Что такое Реакт?
React — это библиотека JavaScript , созданная Facebook .
React — это библиотека пользовательского интерфейса (UI) .
React — это инструмент для создания компонентов пользовательского интерфейса .
Руководство по быстрому запуску React
Это краткое руководство.
Прежде чем начать, вы должны иметь базовое представление о:
Полный учебник:
Начать обучение по React ❯Добавление React на HTML-страницу
Этот краткий учебник добавит React на страницу следующим образом:
Пример
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Что такое Вавилон?
Babel — это компилятор JavaScript, который может переводить разметку или языки программирования в JavaScript.
С Babel вы можете использовать новейшие функции JavaScript (ES6 — ECMAScript 2015).
Babel доступен для различных преобразований. React использует Babel для преобразования JSX в JavaScript.
Обратите внимание, что для использования Babel необходим <script type="text/babel">.
Что такое JSX?
JSX расшифровывается как Java S cript X ML .
JSX — это XML/HTML-подобное расширение для JavaScript.
Пример
const element = <h1>Hello World!</h1>
Как вы можете видеть выше, JSX — это не JavaScript и не HTML.
JSX — это расширение синтаксиса XML для JavaScript, которое также обладает всеми возможностями ES6 (ECMAScript 2015).
Как и HTML, теги JSX могут иметь имена тегов, атрибуты и дочерние элементы. Если атрибут заключен в фигурные скобки, значением является выражение JavaScript.
Обратите внимание, что JSX не заключает в кавычки текстовую строку HTML.
Реагировать на визуализацию DOM
Метод ReactDom.render() используется для рендеринга (отображения) элементов HTML:
Пример
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX-выражения
Выражения можно использовать в JSX, заключая их в фигурные скобки {} .
Пример
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Реагировать на элементы
Приложения React обычно строятся вокруг одного HTML-элемента .
Разработчики React часто называют это корневым узлом (корневым элементом):
<div id="root"></div>
Реагирующие элементы выглядят так:
const element = <h1>Hello React!</h1>
Элементы визуализируются (отображаются) с помощью метода ReactDOM.render():
ReactDOM.render(element, document.getElementById('root'));
Элементы React неизменяемы . Их нельзя изменить.
Единственный способ изменить элемент React — каждый раз отображать новый элемент:
Пример
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Реагировать Компоненты
Компоненты React — это функции JavaScript.
В этом примере создается компонент React с именем «Добро пожаловать»:
Пример
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React также может использовать классы ES6 для создания компонентов.
В этом примере создается компонент React с именем Welcome с методом рендеринга :
Пример
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Свойства компонента React
В этом примере создается компонент React с именем «Добро пожаловать» с аргументами свойств:
Пример
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React также может использовать классы ES6 для создания компонентов.
В этом примере также создается компонент React с именем «Добро пожаловать» с аргументами свойств:
Пример
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
JSX-компилятор
Примеры на этой странице компилируют JSX в браузере.
Для производственного кода компиляция должна выполняться отдельно.
Создать React-приложение
Facebook создал приложение Create React со всем необходимым для создания приложения React.
Это сервер разработки, который использует Webpack для компиляции файлов React, JSX и ES6 с автоматическим префиксом CSS-файлов.
Приложение Create React использует ESLint для тестирования и предупреждения об ошибках в коде.
Чтобы создать приложение Create React, запустите следующий код на своем терминале:
Пример
npx create-react-app react-tutorial
Убедитесь, что у вас установлен Node.js 5.2 или выше. В противном случае вы должны установить npx:
Пример
npm i npx
Запустите одну папку вверх от того места, где вы хотите, чтобы ваше приложение оставалось:
Пример
C:\Users\myUser>npx create-react-app react-tutorial
Результат успеха:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start