Подключаем React без react-create-app
Для канала @we_use_jsОбычно все начинают работу с react-create-app, но такое приложение, пускай пустое, будет весить больше 100 Мб! Сегодня я покажу как поставить React так, чтобы он сам работал, и чтобы было удобно с ним работать.
Структура проекта
Ничего сложного здесь нет, скрипт с сервером, наше приложение, и HTML страница. (src это папка)
index.html server.js src/app.js
Далее инициируем проект командой $ npm init, везде жмём Enter (вы всё сможете поменять потом). После создания package.json, открываем его, и в пункте start пишем nodemon server (расширение "js" указывать необязательно):
{
"name": "learn-react",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "nodemon server"
},
"author": "",
"license": "ISC"
}
index.html
Если вы работаете в Atom или Sublime Text, то вы можете просто ввести html, документ создастся за вас. Теперь нужно импортировать нужные библиотеки - React, ReactDOM и Babel для чтения JSX формата. Также нам нужно место, где будет работать наше приложение, например <div id="app></div>:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <script type="text/babel" src="src/app.js"></script> <title>Learn React</title> </head> <body> <div id="app"></div> </body> </html>
Как вы заметили, у app.js указан тип text/babel, чтобы, как я говорил выше, работал JSX.
Установка Express и Nodemon
Открываем терминал и пишем:
$ npm i express --save-dev nodemon
Теперь открываем server.js и создаём сервер:
exp = require('express'), app = exp();
app.use(exp.static(__dirname));
app.get('/',(req,res)=>{
res.sendFile('index.html');
}).listen(3000)
Запуск React приложения
Для проверки всё ли работает попробуем отрендерить простой текст в файле app.js:
const root = document.getElementById("app");
ReactDOM.render(
<h1>Hello World</h1>, root
)
Теперь сохраняем и пишем команду в терминал:
$ npm start
И вуаля, всё работает!
