Автор оригинала: Alejandra Saldaña.
Я всегда промежутся в веб-разработке с начала дни геодостатов. Недавно не было, где я решил взять его более серьезно, углубиться в нынешние технологии и, возможно, даже присоединиться к этому профессионально.
К моему удивлению интернет выгнал его на высокую передачу, а теперь есть язык для всего. Хорошо, я подумал себе, давайте протягиваемся, настроить рабочую область и сделать себе игровую площадку, чтобы узнать популярную реакцию с практикой полной стопки.
То, что мне нужно было сделать в первую очередь, было строить шаблон голых костей с Мернком. Я исчерпал руководство после руководства, который стремился, чтобы вы построили конкретное приложение с небольшим значением без объяснения. Я хотел что-то, что я мог бы скопировать снова и снова, чтобы удовлетворить все, что у меня будет в будущем.
Основы стека Meern
Meern означает MongoDB, Express.js, rest.js и node.js.
Это комбинация фронтных и задних библиотек JavaScript. MongoDB – ваша база данных NoSQL. Express – это каркас, используемый для создания сервера на среде выполнения Node.js, и React – это библиотека JavaScript для ваших страниц в интерфейсах.
Чтобы скомпилировать их все вместе, был использован УБП и Babel.
Что мы собираемся сделать здесь
Прежде чем мы доберемся до M и R, мы должны убедиться, что E и N дайте нам комфортное рабочее пространство. Наша цель в этой статье будет создавать сервер DEV Nodemon и WebPack, который будет жить, как мы работаем. Мы также будем связываться, сжать и компилировать нашу работу, чтобы сохранить легкий вес приложения и, наконец, подключить Express.js, чтобы служить нам уродливое реагирование, чтобы мы могли играть с ним.
Вот мое репо, это. CD в куда бы вы ни загружаете его и запустите «NPM Install»
Настройка среды
Первое первое. Притворяться, что у меня был совершенно пустой шифер на моем Linux, мне нужно было следующее:
Папка проекта : Создайте папку вашего проекта и измените свой рабочий каталог в свой терминал.
NPM : Менеджер пакета для Node.js | Монтаж
npm init
Здесь вы инициализируете свой Package.json, который содержит все правила, зависимости и информацию для вашего приложения. Вы можете нажать Enter через все вопросы на данный момент.
WebPack : БУНДЛЕР ДЛЯ МОЙ КЛИЕНТ-ЛИЧНОГО КОДА ТАКОГО НЕ СЛОЖЕНО ГИГИОННОЙ.
npm install --save-dev webpack webpack-dev-server npm install webpack-cli -D
ПРИМЕЧАНИЕ. – SSAVE-DEV устанавливает его как зависимость разработчика для вашего приложения.
Бабел : Компилятор для всех ваших нужд JS, ES.
npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-env babel-preset-stage-1 babel-plugin-transform-runtime npm install --save babel-runtime
реагировать : Ваш интерфейсный JavaScript
npm install --save react react-dom
Примечание: –save устанавливает его как зависимость для вашего приложения
Eslint : (Необязательно) подключенный Linter для JS/JSX. Установите его, затем настройте его.
npm install eslint --save-dev
Номемон : Мониторы изменяется в файлах для автоматического обновления вашего Live Server.
npm install nodemon
Файлы конфигурации
Создайте и настройте следующие файлы в корневом каталоге, если вы еще этого не сделали. Да, эти файлы начинаются с периода (.).
Package.json.
{
"name": "template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --env.dev",
"build": "webpack",
"start": "nodemon --ignore dist src/server/server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"webpack": "^4.16.5",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"babel-runtime": "^6.26.0",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}
.babelrc.
{
"presets": [
["env", {"modules": false}],
"stage-1",
"react"
],
"plugins": [
"transform-runtime"
]
}
.eslintrc.json.
{
"env": {
"browser": true,
"es6": true
},
"extends": "plugin:react/recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
}
webpack.config.js.
const path = require('path')
const webpack = require('webpack')
module.exports = {
mode: 'none',
entry: './src/client',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:8080/dist'
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
],
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
devServer: {
port: 8080
}
}
WOAH, WOAH, WOAH. Что все этот порт: 8080, вход и разключить вещи?
Ну, я опережаю себя. Видите ли, что мы сделали, было создано сервер разработки с помощью WebPack. В конце этого шаблона вы будете иметь свой экспресс-сервер, работающий на порту 3000, и ваш сервер Web DEV работает с другой. Это отличный способ работать в прямом эфире, устранять неполадки, и просто беспокоюсь, зная именно то, что вы разбиваете после его перезагрузки.
Что касается входа/вывода/разключения? Это то, что вы объединяете, где вы объединяете, и где вы можете найти его. WebPack собирается подключить все ваши отдельные файлы JS в папке клиента и выписывайте легкий скрипт, который вы ссылаетесь на главной HTML-странице.
Структурирование вашего корневого каталога
Вам нужно понадобиться папки и много из них. Вы организуете полное приложение для стека в конце концов. Я пытаюсь сохранить мой как можно просто. $ ./template
. ├── node_modules ├── public │ └── index.html ├── src │ ├── client │ │ ├── components │ │ │ └── App.jsx │ │ ├── css │ │ └── index.js │ ├── models │ └── server │ └── server.js ├── .babelrc ├── .eslintrc.json ├── package.json ├── package-lock.json └── webpack.config.js
Папки, которые вы создали и почему: публичный : Самоязычное, то, что пользователи будут разрешены только для доступа. SRC : Ваш источник JS и другие вкусности для вашего сайта. клиент : Все относительно клиента приложения. Компоненты : Ваши реагирующие файлы JS, которые будут служить строительными блоками. CSS : Довольно первое. модели : Это для хранения базы данных JS. Сервер : Express Server JS.
Файлы, которые вы создали и почему: index.html : Ваша домашняя страница. App.jsx : Первый компонент к вашему приложению. index.js : Мост между HTML и JSX server.js : Экспресс-сервер
Настройка экспресс
Теперь давайте установимся в качестве зависимости, а также сжатие. Он сжимает экспресс. Больше «должен идти быстро».
npm install --save express npm install --save compression
Давайте сначала подготовим наш «index.html».
My Template
Основы. Обратите внимание на добавление скрипта и его ссылка. Это изменится, когда мы проведем это, но сейчас, когда это сделаю.
Давайте посмотрим на какой наш файл «Server.js» должен прочитать:
const compression = require('compression')
const express = require('express')
const path = require('path')
const app = express()
// Gives constant name to long directory home page.
const appPage = path.join(__dirname, '../../public/index.html')
// Compresses App
app.use(compression())
app.disable('etag')
// Allows the use of files.
app.use(express.static(__dirname + './../../'))
// SERVES STATIC HOMEPAGE at '/' URL
app.get('/', function(req, res) {
res.sendFile(appPage)
})
// Port Setting
app.listen(3000, () => console.log('Running on Port 3000... Do not forget to run "npm run dev" in another terminal!'))
Я добавил некоторые комментарии, чтобы помочь, но все всегда лучше всего читать документация
Nitty Gritty React настроить
Я не собираюсь расширить реакцию прямо сейчас. Кроме того, если вы смотрите на гид шаблона Mern, я предполагаю, что вы разбираетесь в этом. Я предоставлю мои уродливые здесь просто, чтобы вы могли на самом последнее время.
index.js.
import React from 'react' import ReactDOM from 'react-dom' import App from './components/App.jsx' ReactDOM.render(, document.getElementById('root'))
App.jsx.
import React, {Component} from 'react'
class App extends Component {
render(){
return(
{'You are now running React on Express'}
)
}
}
export default App
Попробуй это.
Откройте два клемма, один для Nodemon и другой для WebPack Dev.
Терминал 1.
npm start
Терминал 2.
npm run dev
Наверь на http://localhost: 3000/для просмотра сайта ERR!
Окончательные мысли и дальнейшее чтение
Это должно быть достаточно детской площадки, чтобы начать с экспресс и реагировать. Я построил так много проектов Mern, бросая себя в темноте, так что не излишнее сказать, они не были самыми красивыми.
На следующем взносе я надеюсь сделать более привлекательное приложение для реагирования и подключить Mongodb, используя Мангуст и Mlab.
Но если вы не можете ждать, и хочешь продолжать идти: Реагировать Экспресс Мангуст MLAB WebPack Говоря о WebPack, вам понадобятся погрузчики, если хотите добавить расширения файлов за пределами JS и JSX. Читайте об этом здесь.
Еще несколько библиотек мне нравится: React-Router-DOM React-bootstrap.
Если вы все еще здесь, спасибо. Это моя первая вспомогательная запись, поэтому я надеюсь, что вам понравилось.