Установка React (CDN)

React можно скачать и использовать напрямую; пакет для скачивания также содержит множество учебных примеров.

В этом руководстве используется React версии 18.2.0. Вы можете посетить официальный сайтhttps://reactjs.org/, чтобы скачать последнюю версию.

Используйте React CDN-библиотеку ByteDance, адрес указан ниже:

Используйте React CDN-библиотеку Staticfile CDN, адрес указан ниже:

Адрес CDN, предоставленный официальным сайтом:

Примечание:Использование Babel для компиляции JSX в браузере очень неэффективно.

Пример использования

В следующем примере выводится Hello, React!

Пример React

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script> </head> <body> <div id="example"></div> <script type="text/babel">// Простой компонент React function App() { return<h1>Hello, React!</h1>;<App />); </script> </body> </html> </script> </body> </html>

Попробуйте сами »

Анализ примера:

В примере мы подключили три библиотеки: react.production.min.js, react-dom.production.min.js и babel.min.js:

react.min.js- основная библиотека React
react-dom.min.js- предоставляет функциональность, связанную с DOM
babel.min.js- Babel может преобразовывать код ES6 в код ES5, поэтому мы можем запускать код React в браузерах, которые в настоящее время не поддерживают ES6. Babel имеет встроенную поддержку JSX. Используя Babel вместе с пакетом babel-sublime, вы можете вывести подсветку синтаксиса исходного кода на совершенно новый уровень.

//Простой компонент React function App() { return <h1>Привет, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); //Отрисовка компонента React в DOM root.render(<App />);

Приведённый выше код вставляет заголовок h1 в узел с id="example".

const root = ReactDOM.createRoot(document.getElementById("example"));

Получение DOM-контейнера：document.getElementById("example")Он получает DOM-элемент с id "example".
Создание корневого узла：ReactDOM.createRootЭто новый метод, представленный в React 18, используемый для создания корневого узла React. В этом примере,rootпеременная хранит этот корневой узел.

Примечание:

Если нам нужно использовать JSX, атрибут type тега <script> должен быть установлен в text/babel.

Другие расширения

Практический проект на React

Установка React (CDN)

Пример использования

Пример React