Сервер. Node.js
В прошлых вводных темах весь код приложения определялся на веб-странице:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React</title>
</head>
<body>
<div id="app"> </div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const rootNode = document.getElementById("app"); // элемент для рендеринга приложения React
// получаем корневой элемент
const root = ReactDOM.createRoot(rootNode);
// рендеринг в корневой элемент
root.render(
<h1>Hello React</h1>, // элемент, который мы хотим создать
);
</script>
</body>
</html>
Такой подход хорош для вывода сообщения "Hello React", но в реальности весь код JSX обычно выносится во внешние файлы. Поэтому определим в той же папке, где находится данная веб-страница, новый файл index.jsx:
const rootNode = document.getElementById("app"); // элемент для рендеринга приложения React
// получаем корневой элемент
const root = ReactDOM.createRoot(rootNode);
// рендеринг в корневой элемент
root.render(
<h1>Hello React</h1> // элемент, который мы хотим создать
);
Обычно код JSX определяется в файлах с расшиением *.jsx, хотя можно использовать и стандартное расширение js.
И изменим веб-страницу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="index.jsx"></script>
</body>
</html>
Вроде бы у нас все то же самое, используется тот же код, только в отдельном файле. Но если мы просто кинем страницу в браузер, то мы столкнемся с ошибкой:
Дело в том, что Babel подтягивает код JSX через AJAX-запросы. Поэтому просто кинуть веб-страницу в браузер у нас не получится, нам надо использовать для обращения к ней веб-сервер, то есть все файлы приложения должны быть размещены на веб-сервере. Здесь не столь важно, какой именно веб-сервер использовать - Apache, Node.js, IIS. Но в рамках данных статей преимущественно будет использоваться Node.js как более демократичный вариант. Поэтому для работы также необходимо установить Node.js.
Подробнее про работу с Node.js можно почитать в соответствующем руководстве.
После установки Node.js в каталог проекта добавим новый файл app.js. То есть в итоге в папке проекта будет три файла:
index.html
index.jsx
app.js
Определим в файле app.js следующий код:
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
let filePath = "index.html";
if(request.url !== "/"){
// получаем путь после слеша
filePath = request.url.substring(1);
}
fs.readFile(filePath, function(error, data){
if(error){
response.statusCode = 404;
response.end("Resourse not found!");
}
else{
response.end(data);
}
});
}).listen(3000, function(){
console.log("Server started at 3000");
});
Это простейший веб-сервер на Node.js, который мы бы могли определить в нашей ситуации для наших скромных целей - оправить пользователю страницу index.html со всеми сопутствующими файлами. В частности, в начале подключаем для модуля - http и fs, которые необходимы соответственно для обработки http-запросов и для работы с файлами:
const http = require("http");
const fs = require("fs");
Далее создаем собственно веб-сервер с помощью функции http.createServer():
http.createServer(function(request, response)
В качестве параметра она принимает функцию, которая будет запускаться для обработки каждого приходящего на сервер запроса. И эта функция имеет два параметра:
request - объект, который хранит все данные запроса, и response - объект, который позволяет определить нам ответ на запрос.
В данном случае у нас очень простая ситуация - нам надо отправить статический файл: либо index.html, либо index.jsx. Для этого в начале смотрим на запрошенный путь. Если запрос идет к корню сайта, то есть по адресу "localhost:3000/", то отправляем страницу "index.html". А для всех остальных адресов, в частности, для файла "index.jsx", получаем запрошенный путь
filePath = request.url.substring(1);
Далее с помощью функции fs.readFile() считываем из файловой системы запрошенный файл:
fs.readFile(filePath, function(error, data){
И с помощью метода response.end() отправляем считанный данные пользователю:
response.end(data);
В конце функция listen() запускает созданный веб-сервер на 3000-м порту, и после этого мы сможем обращаться к приложению по адресу "http://localhost:3000"
.listen(3000, function(){
console.log("Server started at 3000");
});
И теперь, когда все готово, запустим приложение. Для этого откроем командную строку/терминал и перейдем с помощью команды cd к папке проекта. Затем запустим приложение с помощью команды
node app.js
После этого в браузере перейдем по адресу "http://localhost:3000", по которому запущен сервер, и нам откроется веб-страница index.html:
В итоге компилятор Babel при запуске страницы подгрузит файл index.jsx и скомпилирует из него код JavaScript, который будет применяться к странице.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи