Вам понадобится хост, чтобы включить приложение React. Это может быть просто место, где ваши файлы доступны через HTTP (Amazon S3, Github Pages, учетная запись веб-хостинга и т. Д. c). Затем пользователь переходит на URL-адрес, и этот хост отвечает вашим файлом HTML, который может выглядеть примерно так:
<html>
<head>
<title>A title here</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
Когда браузер загружает этот файл html, он видит этот скрипт-тег и затем загружает src этого скрипта, делая запрос на app.js на вашем хосте. app.js может выглядеть примерно так:
import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return <h1>My App</h1>
}
ReactDOM.render(<App/>, document.getElementById('app'))
Затем браузер выполняет этот сценарий, который создает компонент <App/>, и помещает его в узел html с идентификатором app, тем самым отображая Ваше приложение реакции.
Не требуется код приложения на стороне сервера. Каждый получает одинаковые HTML и Javascript, а HTML, предоставляемый хостом, очень прост c, предоставляя пустое место для отображения вашего приложения и ссылку на ваш пользовательский код React. Вот и все.
Я упустил часть для простоты, которая является компиляцией. Вы пишете код javascript выше, но что-то вроде babel или webpack возьмет то, что вы написали, загрузит эти зависимости (React, ReactDOM) и скомпилирует эти JSX-теги (<h1>, <App/>) в то, что браузер сможет понять , Это создает (обычно) один большой javascript файл, который помещается на ваш хост для загрузки браузером. Он включает в себя React, любые другие библиотеки npm, которые вы хотите использовать, и код пользовательского приложения в одном файле.