Подключаем react как script
React.js это всего лишь библиотека. Не фреймворк.
Как и любая другая библиотека, реакт добавляется на страницу с помощью тэга script.
Так как в современном js "рулят" модули и различного рода преобразования/сжимания и так далее - react отлично дружит с webpack, babel и прочими. Для простоты, мы начнем работать с реактом, как с обычной библиотекой, например, jQuery, но затем перейдем на удобный инструмент - create-react-app.
Cоздайте следующие файлы в директории с вашим проектом.
+-- .gitignore (если будете использовать git)+-- 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.
Исходный код для данного раздела.