Как да създадете React интерфейс и Node / Express бекенд и да ги свържете

В тази статия ще ви преведа през процеса на създаване на просто приложение React и свързването му с прост Node / Express API, който също ще създаваме.

Няма да навлизам в подробности за това как да работя с някоя от технологиите, които ще спомена в този урок, но ще оставя връзки, в случай че искате да научите повече.

Можете да намерите целия код в това хранилище, което направих за урока.

Целта тук е да ви даде практическо ръководство за това как да настроите и свържете клиентския интерфейс и back-end API .

Преди да си замърсим ръцете, уверете се, че Node.js работи на вашата машина.

Създайте главната директория на проекта

Във вашия терминал отидете до директория, в която искате да запазите проекта си. Сега създайте нова директория за вашия проект и навигирайте в нея:

mkdir my_awesome_project cd my_awesome_project

Създайте приложение React

Този процес е наистина ясен.

Ще използвам приложението за създаване на реакция на Facebook, за да ... познаете, лесно да създам приложение за реакция с име клиент :

npx create-react-app client cd client npm start

Нека да видим какво съм направил:

  1. Използва npx на npm за създаване на приложение за реакция и го нарече клиент.
  2. cd (промяна на директорията) в клиентската директория.
  3. Стартира приложението.

В браузъра си отидете до // localhost: 3000 /.

Ако всичко е наред, ще видите страницата за реакция с реакция. Честито! Това означава, че вече имате основно приложение React, работещо на вашата локална машина. Лесно нали?

За да спрете приложението си за реакция, просто натиснете Ctrl + cтерминала.

Създайте Express App

Добре, това ще бъде толкова просто, колкото и предишния пример. Не забравяйте да отидете до горната папка на вашия проект.

Ще използвам Express Application Generator, за да създам бързо скелет на приложение и да го кръстя api:

npx express-generator api cd api npm install npm start

Нека да видим какво съм направил:

  1. Използва npx на npm за глобално инсталиране на express-generator.
  2. Използва се express-generator за създаване на експресно приложение и го нарече 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 / маршрути създайте файл 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 Client към Express API

  1. На вашия редактор на код, нека работим в клиентската директория. Open 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“. Поради това на Origin '// localhost: 3000' не е разрешен достъп. Ако непрозрачен отговор отговаря на вашите нужди, задайте режима на заявката на „no-cors“, за да извлечете ресурса с деактивиран CORS.

Това е лесно за решаване. Просто трябва да добавим CORS към нашия API, за да позволим заявки за кръстосан произход. Нека направим точно това. Трябва да проверите тук, за да научите повече за CORS.

  1. В своя терминал отидете до директорията на API и инсталирайте пакета CORS :
npm install --save cors

2. На своя код редактор отидете в директорията на API и отворете my_awesome_project / API / app.js файла.

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.

Както казва един мой добър приятел:

Бъдете силни и кодирайте !!!

... и не забравяйте да бъдете страхотни днес;)