ReactJS - это открытая JavaScript библиотека для создания интерфейсов, которая призвана решать проблемы частичного обновления содержания веб-страницы, с которыми сталкиваются в разработке одностраничных приложений. Бибилиотека разрабатывается компанией Facebook и сообществом индивидуальных разработчиков.
Для установки React для начала понадобится установить и настроить локальную среду разработки. Если вы занимаетесь разработкой, то у вас уже явно установлен локальный сервер. Также, можно попробовать React онлайн, прямо в браузере, подключив внешние файлы библиотеки и использовав следующий код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
To set up a production-ready React build environment, follow these instructions:
* https://reactjs.org/docs/add-react-to-a-new-app.html
* https://reactjs.org/docs/add-react-to-an-existing-app.html
You can also use React without JSX, in which case you can remove Babel:
* https://reactjs.org/docs/react-without-jsx.html
* https://reactjs.org/docs/cdn-links.html
-->
</body>
</html>
Для установки React на локальном сервере, потребуется установка Node JS >= 6 версии.
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
Если у вас установлен npm 5.2.0+, вы можете использовать npx вместо этого.
npx create-react-app my-app
cd my-app
npm start
Установленное React приложение создает конвейер сборки frontend и его можно использховать с любым backend.
В React используеются такие frontend инструменты, как Babel и webpack, но вы также можете использовать другие инструменты и настраивать конфигурацию приложения по своему усмотрению.
Когда приложение готово к развертыванию в производство, то запуск следующей команды приведет к созданию оптимизированной сборки вашего приложения в build каталоге.
npm run build
Вам не нужно переписывать свое приложение, чтобы начать использовать React. Вы можете добавлять React в небольшую часть вашего приложения, например отдельный виджет, чтобы вы могли видеть, хорошо ли он подходит для вашего использования.
Хоть React и можно использовать без набора стартовой сборки, рекомендуется установить следующий набор для разработки:
- Менеджер пакетов , таких как Yarn or npm . Это позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
- Бандлы (пакетирование) такие как WebPack или Browserify . Он позволяет писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.
- Компилятор, таких как Babel. Он позволяет писать современный JavaScript-код, который по-прежнему работает в старых браузерах.
Установка React
Чтобы установить React с npm, запустите:
npm init
npm install --save react react-dom
Чтобы установить React с Yarn, выполните:
yarn init
yarn add react react-dom
Включение ES6 и JSX
Рекомендуется использовать React c Babel, чтобы вы могли использовать ES6 и JSX в своем JavaScript-коде. ES6 - это набор современных функций JavaScript, которые упрощают разработку, а JSX является расширением языка JavaScript, который отлично работает с React.
В инструкции по установке Babel объясняется , как настроить Babel во многих различных средах сборки. Убедитесь, что вы устанавливаете babel-preset-react и babel-preset-env и включаете их в свою .babelrc конфигурацию.
Hello World с ES6 и JSX
Рекомендуется использовать пакет, например webpack или Browserify , чтобы вы могли писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.
Самый маленький пример React выглядит так:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Этот код превращается в элемент DOM с идентификатором root и содержимым внутри него:
<div id="root">
<h1>Hello, world!</h1>
</div>
Аналогично, вы можете отобразить компонент React внутри элемента DOM где-то внутри вашего существующего приложения, написанного с помощью любой другой библиотеки пользовательского интерфейса JavaScript.
Разработка и производство
По умолчанию React содержит много полезных предупреждений. Эти предупреждения очень полезны в разработке.
Тем не менее, они делают версию разработки React более крупной и медленной, поэтому вы должны использовать производственную версию при развертывании приложения.
Узнайте, как определить, работает ли ваш сайт в правильной версии React , и как наиболее эффективно настроить процесс сборки продукции:
- Создание производственной сборки с помощью приложения «React App»
- Создание производственной сборки с однофазными сборками (Single-File Builds)
- Создание производственной сборки с помощью Brunch
- Создание сборки сборки с помощью Browserify
- Создание производственной сборки с Rollup
- Создание производственной сборки с помощью webpack
Использование CDN
Если вы не хотите использовать npm для управления пакетами клиента, react и react-dom пакеты, то можете подключать файлы из CDN.
UMD-сборки React и ReactDOM доступны через CDN.
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
Вышеупомянутые версии предназначены только для разработки и не подходят для производства. Минимизированные и оптимизированные производственные версии React доступны по адресу:
<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>
Чтобы загрузить определенную версию reactи react-dom, замените 16 номер версии.
Почему crossorigin атрибут?
Если вы используете React из CDN, то рекомендуется сохранить crossorigin атрибут:
<script crossorigin src="..."></script>
Также рекомендуется проверить, что используемый CDN задает Access-Control-Allow-Origin: * HTTP-заголовок. Это позволяет улучшить обработку ошибок в React 16 и более поздних версиях.
0 комментариев