Книга: react-course-ru-v2
Назад: От автора
Дальше: Создание компонента

Подключаем react как script

Подключение react'a с помощью тэга script

React.js это всего лишь библиотека. Не фреймворк.

Как и любая другая библиотека, реакт добавляется на страницу с помощью тэга script.

Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - react отлично дружит с webpack, babel и прочими. Для простоты, мы начнем работать с реактом, как с обычной библиотекой, например, jQuery, но затем перейдем на удобный инструмент - .


Cоздайте следующие файлы в директории с вашим проектом.

+-- .gitignore (если будете использовать git) +-- index.html 

index.html

В мире программирования, каждый урок начинается с hello, world.

index.html

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <title>React [RU] Tutorial</title>     <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>     <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>      <!-- Не используйте это в production -->     <script src="https://unpkg.com/[email protected]/babel.min.js"></script>   </head>   <body>     <div id="root"></div>     <script type="text/babel">        ReactDOM.render(         <h1>Hello, world!</h1>,         document.getElementById('root')       );      </script>    </body> </html> 

Во-первых, мы подключили библиотеки react и react-dom как обычные скрипты

Во-вторых, мы подключили babel библиотеку, для того, чтобы наша строка

<h1>Привет, мир!</h1>, 

которая написана на вспомогательном языке JSX, превратилась в валидный javascript-код:

React.createElement("h1", null, "Hello, world!"), 

На протяжении всего туториала мы будем использовать JSX.


для данного раздела.

Назад: От автора
Дальше: Создание компонента