Як створити інтерфейс React та серверну частину Node / Express та підключити їх

У цій статті я розповім вам про процес створення простої програми React та підключення її до простого API Node / Express, який ми також створимо.

Я не буду вдаватися в детальні відомості про те, як працювати з будь-якою з технологій, про які я згадаю в цьому посібнику, але я залишу посилання, якщо ви хочете дізнатися більше.

Ви можете знайти весь код у цьому сховищі, яке я створив для підручника.

Завдання - дати вам практичний посібник з налаштування та підключення інтерфейсного клієнта та інтерфейсу API .

Перш ніж ми забруднимо руки, переконайтеся, що на вашому комп'ютері запущений Node.js.

Створіть головний каталог проекту

У своєму терміналі перейдіть до каталогу, де ви хочете зберегти свій проект. Тепер створіть новий каталог для свого проекту та перейдіть до нього:

mkdir my_awesome_project cd my_awesome_project

Створіть додаток React

Цей процес справді простий.

Я буду використовувати додаток create-response-Facebook, щоб ... як ви здогадалися, легко створити додаток для реагування з іменем client :

npx create-react-app client cd client npm start

Давайте подивимося, що я зробив:

  1. Використовував npm npx для створення програми для реагування та називав її клієнтом.
  2. cd (змінити каталог) у клієнтському каталозі.
  3. Запустив додаток.

У своєму браузері перейдіть до // localhost: 3000 /.

Якщо все гаразд, ви побачите сторінку привітання з реакцією. Вітаємо! Це означає, що у вас на вашому локальному комп'ютері запущена основна програма React . Легко, правда?

Щоб зупинити додаток для реагування, просто натисніть Ctrl + cна терміналі.

Створіть програму Express

Гаразд, це буде так само просто, як і попередній приклад. Не забудьте перейти до верхньої папки проекту.

Я буду використовувати Express Generator Application, щоб швидко створити скелет програми та назвати його api:

npx express-generator api cd api npm install npm start

Давайте подивимося, що я зробив:

  1. Використовував npx npx для глобальної установки експрес-генератора.
  2. Використав експрес-генератор для створення експрес-програми та назвав її api.
  3. cd в каталог API.
  4. Встановив усі залежності.
  5. Запустив додаток.

У своєму браузері перейдіть до // localhost: 3000 /.

Якщо все гаразд, ви побачите експрес-сторінку привітання. Вітаємо! Це означає, що тепер у вас є основна програма Express, яка працює на вашому локальному комп'ютері. Легко, правда?

Щоб зупинити додаток для реагування, просто натисніть Ctrl + cна терміналі.

Налаштування нового маршруту в Express API

Гаразд, давайте забруднимо руки. Час відкрити улюблений редактор коду (я використовую VS Code) і перейти до папки проекту.

Якщо ви назвали додаток для реагування клієнтом, а експрес-додаток - api , ви знайдете дві основні папки: client і api.

  1. Усередині каталогу API перейдіть до bin / www і змініть номер порту в рядку 15 з 3000 на 9000. Пізніше ми будемо запускати обидві програми одночасно, тож це дозволить уникнути проблем. Результат повинен бути приблизно таким:

2. На api / routes створіть файл testAPI.js і вставте такий код:

var express = require(“express”); var router = express.Router(); router.get(“/”, function(req, res, next) { res.send(“API is working properly”); }); module.exports = router;

3. У файл api / app.js вставте новий маршрут у рядок 24:

app.use("/testAPI", testAPIRouter);

4. Гаразд, ви “велете” експрес-курсу використовувати цей маршрут, але ви все одно повинні його вимагати. Давайте зробимо це в рядку 9:

var testAPIRouter = require("./routes/testAPI");

Єдині зміни - у рядку 9 та рядку 25. Це має закінчитися приблизно так:

5. Вітаємо! Ви створили новий маршрут.

Якщо ви запустите програму API (у своєму терміналі перейдіть до каталогу API та “ npm start” ) і перейдіть до // localhost: 9000 / testAPI у вашому браузері, ви побачите повідомлення: API працює належним чином.

Підключення клієнта React до Express API

  1. У вашому редакторі коду давайте працювати в каталозі клієнта . Відкрити app.js файл , розташований в my_awesome_project / клієнт / app.js .
  2. Тут я буду використовувати Fetch APIto retrieve data from the API. Just paste this code after the Class declaration and before the render method:
constructor(props) { super(props); this.state = { apiResponse: "" }; } callAPI() { fetch("//localhost:9000/testAPI") .then(res => res.text()) .then(res => this.setState({ apiResponse: res })); } componentWillMount() { this.callAPI(); }

3. Inside the render method, you will find a <;p> tag. Let’s change it so that it renders the apiResponse:

;{this.state.apiResponse}

At the end, this file should look something like this:

I know!!! This was a bit too much. Copy paste is your friend, but you have to understand what you are doing. Let’s see what I did here:

  1. On lines 6 to 9, we inserted a constructor, that initializes the default state.
  2. On lines 11 to 16, we inserted the method callAPI() that will fetch the data from the API and store the response on this.state.apiResponse.
  3. On lines 18 to 20, we inserted a react lifecycle method called componentDidMount(), that will execute the callAPI() method after the component mounts.
  4. Last, on line 29, I used the <;p> tag to display a paragraph on our client page, with the text that we retrieved from the API.

What the heck!! CORS ?

Oh yeah, baby! We are almost done. But if we start both our apps (client and API) and navigate to //localhost:3000/, you still won't find the expected result displayed on the page. If you open chrome developer tools, you will find why. In the console, you will see this error:

Не вдалося завантажити // localhost: 9000 / testAPI: На запитаному ресурсі немає заголовка 'Access-Control-Allow-Origin'. Отже, джерело '// localhost: 3000' не має доступу. Якщо непрозора відповідь відповідає вашим потребам, встановіть режим запиту на "no-cors", щоб отримати ресурс із вимкненою системою CORS.

Це просто вирішити. Нам просто потрібно додати CORS до нашого API, щоб дозволити перехресні запити. Давайте зробимо саме це. Ви повинні перевірити тут, щоб дізнатись більше про CORS.

  1. У своєму терміналі перейдіть до каталогу API та встановіть пакет CORS :
npm install --save cors

2. У редакторі коду перейдіть в каталог API і відкрити API / app.js my_awesome_project / файл.

3. У рядку 6 потрібно CORS:

var cors = require("cors");

4. Тепер у рядку 18 “скажи” експрес використовувати CORS :

app.use(cors());

Файл API app.js повинен закінчуватися приблизно так:

Чудова робота. Це все зроблено !!

В порядку! Ми все готові!

Тепер запустіть обидві програми (клієнт та API) у двох різних терміналах, використовуючи команду npm start .

Якщо ви переходите до // localhost: 3000 / у вашому браузері, ви повинні знайти щось на зразок цього:

Звичайно, цей проект, як є, багато не зробить, але є початком роботи програми Full Stack. Ви можете знайти весь код у цьому сховищі, яке я створив для підручника.

Далі я працюватиму над деякими додатковими підручниками, наприклад, як підключити це до бази даних MongoDB і навіть, як запустити все це всередині контейнерів Docker.

Як каже мій добрий друг:

Будьте сильними і кодуйте !!!

... і не забудьте бути чудовими сьогодні;)