Когда я впервые столкнулся с приложениями JavaScript с полным стеком в Free Code Camp, я искал, читал статьи и думал, как мне запустить приложение JavaScript с полным стеком. Я пытался использовать Clementine.js, но тогда я не очень понял, зачем столько папок, каталог проекта и само приложение-пример.
Поэтому сегодня. Просто примите тот факт, что если вы хотите создать JS-приложение с полным стеком, вам нужен клиент и сервер. И в этой статье мы собираемся использовать React для нашего клиента и Express для нашего сервера. Затем нам нужно соединить их и заставить разговаривать друг с другом. И я ожидаю, что у вас, ребята, установлен Node.js и редактор кода (я предпочитаю Visual Studio Code, потому что в него встроен терминал).
- Создайте папку.
- Откройте VS Code (или предпочитаемый вами редактор кода) и откройте свою папку в редакторе.
- Если терминал не отображается в VS Code, введите «Ctrl + `».
4. Чтобы создать проект с помощью npm, введем эту команду в терминал.
npm init
5. Просто введите свои ответы на такие вопросы, как ваше имя как автора приложения или описание вашего приложения. Если вы не понимаете несколько терминов, просто оставьте это и введите, пока он не попросит вас ввести yes.
Вы можете увидеть эти свойства в файле «package.json».
6. Если вы только что ввели (index.js) в качестве точки входа в нашу команду инициализации npm, создайте index.js в корневом каталоге, куда мы поместим код нашего сервера. Если вы изменили его, когда мы его инициализировали (например, server.js), создайте файл с таким именем в корневом каталоге.
7. Установите Express как зависимость в вашем терминале.
npm i -S express
Это означает, что вы устанавливаете экспресс-модуль как зависимость. Для успешного запуска вашего приложения требуется экспресс.
8. Добавьте этот код в свой файл index.js.
const express = require(‘express’);
const path = require(‘path’);
const app = express();
app.use(express.static(path.join(__dirname, ‘client/public’))); app.get(“/testApi/user”, (req, res) => {
return res.json({“user”:”Eirin Gonzales”, “bio”:”I’m a front end engineer.”});
});
app.listen(3001, function() {
console.log(“Working”);
});
Вы можете указать свое имя и свою биографию.
9. Установите nodemon как глобальную команду. Когда мы устанавливаем модуль как глобальную команду, это означает, что мы можем использовать имя модуля в качестве команды в нашем терминале.
npm i -g nodemon
Nodemon автоматически перезапускает наш проект при изменении кода. Мы будем использовать эту команду при запуске кода нашего сервера.
10. Установите приложение create response как глобальную команду.
npm i -g create-react-app create-react-app client
Модуль create-реагировать-приложение представляет собой настройку сборки без настройки. Мы будем использовать это, чтобы мы могли легко создавать одностраничные приложения React. CRA выполняет настройку за нас. Он создает папку client, в которой будут храниться наши файлы.
11. В терминале зайдите в папку клиента.
cd client
Запустите эту команду.
npm start
Он откроет страницу в вашем браузере, и вы увидите страницу с логотипом React и небольшим количеством контента.
12. Откройте другой терминал. И прямо внутри вашей корневой папки запустите
nodemon
13. Вы также можете увидеть файл App.js внутри папки client/src. Открой это. И добавьте этот код внутри класса App, но перед методом рендеринга.
constructor(props) {
super(props);
this.state = {
name: “”,
bio: “”
};
this.set = this.set.bind(this);
}
set(user) {
this.setState({ name: user.user, bio: user.bio });
}
componentDidMount() {
fetch(“/testApi/user”)
.then(res => res.json())
.then(json => this.set(json))
.catch(err => console.log(err));
}
Внутри метода рендеринга добавьте этот код в оператор return, непосредственно перед тегом изображения.
{this.state.name !== "" &&
<div>
<h1>Hi! My name is {this.state.name}. {this.state.bio}</h1>
</div>
}
Здесь происходит то, что когда этот компонент отображается в браузере, он должен запускать оператор внутри функции componentDidMount. Он отправит запрос на указанный нами URL-адрес, и мы получим объект JSON, содержащий имя и биографию.
Затем мы должны увидеть имя и биографию на нашей странице. (Убедитесь, что nodemon запущен в корневой папке, а npm start запущен в папке клиента на ваших терминалах.)
14. Вы видели свое имя и свою биографию? И вы не должны. Почему? Потому что мы не установили соединение между нашим клиентом и сервером.
Добавьте это в package.json папки вашего клиента. Добавьте запятую после свойства browserslist. Затем добавьте его после запятой.
Или вы можете добавить его после любого свойства, но оно должно быть внутри фигурных скобок JSON.
“proxy”:”http://localhost:3001/"
Что это делает, так это то, что он перенаправляет все запросы от нашего клиента (работающего на порту 3000) на наш сервер Express, который работает на порту 3001. Порт 3001 в свойстве «прокси» должен соответствовать порту нашего сервера Express.
app.listen(3001, function() {
console.log(“Working”);
});
В приведенном выше коде 3001 — это порт, на котором работает ваш сервер Express.
Поэтому, когда мы запрашиваем «testApi/user» в нашей выборке из нашего компонента приложения, он будет перенаправлен на порт, указанный в нашем «прокси».
Не забудьте сохранить ваши файлы.
15. Обновите страницу в браузере. (Проверьте, работают ли оба терминала.) Теперь вы сможете увидеть свое имя и биографию.
Ну это все. Надеюсь, вы узнали кое-что из этой статьи.
Если у вас есть какие-либо вопросы или уточнения, просто прокомментируйте это ниже.
И если вам нужны файлы, которые я создал, вы можете найти их здесь, в моем репозитории GitHub: https://github.com/theproactivedev/cra-with-express
Хорошего дня! Спасибо, что прочитали это! :D
Небольшое предупреждение: я еще не опытный разработчик. Я просто хочу поделиться тем, что я узнал, когда создавал свои JS-приложения с полным стеком.
