Cum să faci să creezi-reacționează-aplicația să funcționeze cu un Node Back-end API

Aceasta este o întrebare foarte frecventă în rândul dezvoltatorilor React mai noi și o întrebare pe care am avut-o când începusem cu React și Node.js. În acest scurt exemplu vă voi arăta cum să faceți create-react-app lucrați cu Node.js și Express Back-end.

creați-reacționați-aplicație

Creați un proiect folosind create-react-app.

npx create-react-app example-create-react-app-express

Creeaza o /client director sub example-create-react-app-express director și mutați tot codul React boilerplate creat de create-react-app către acest nou director client.

cd example-create-react-app-expressmkdir client

Serverul Node Express

Creeaza o package.json fișier din directorul rădăcină (example-create-react-app-express) și copiați următorul conținut:

{
  "name": "example-create-react-app-express",
  "version": "1.0.0",
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail "yarn server" "yarn client""
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}

Observați că îl folosesc concurrently pentru a rula aplicația React și Server în același timp. –kill-others-on-fail semnalizatorul va ucide alte procese dacă unul iese cu un cod de stare diferit de zero.

Instalare nodemon la nivel global și dependențe de server:

npm i nodemon -g
yarn

Creeaza o server.js fișier și copiați următorul conținut:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/hello', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.post('/api/world', (req, res) => {
  console.log(req.body);
  res.send(
    `I received your POST request. This is what you sent me: ${req.body.post}`,
  );
});

app.listen(port, () => console.log(`Listening on port ${port}`));

Acesta este un server Express simplu care va rula pe portul 5000 și are două rute API: GET – /api/hello, și POST –/api/world.

În acest moment puteți rula serverul Express cu următoarea comandă (încă în directorul rădăcină):

node server.js

Acum navigați la http://localhost:5000/api/hello, și veți obține următoarele:

Vom testa POST rută odată ce construim aplicația React.

Aplicația React

Acum treceți la client director în care trăiește aplicația noastră React.

Adăugați următoarea linie la package.json fișier creat de create-react-app.

"proxy": "http://localhost:5000/"

Cheia utilizării unui server back-end Express cu un proiect creat cu create-react-app este să folosiți un proxy. Acest lucru îi spune serverului de dezvoltare a pachetului Web să proxyze solicitările noastre API către serverul nostru API, dat fiind că serverul nostru Express rulează pe localhost:5000.

Acum modificați ./client/src/App.js pentru a apela back-end-ul nostru Express API, modificările sunt cu caractere aldine.

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {
  state = {
    response: '',
    post: '',
    responseToPost: '',
  };
  
  componentDidMount() {
    this.callApi()
      .then(res => this.setState({ response: res.express }))
      .catch(err => console.log(err));
  }
  
  callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);
    
    return body;
  };
  
  handleSubmit = async e => {
    e.preventDefault();
    const response = await fetch('/api/world', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ post: this.state.post }),
    });
    const body = await response.text();
    
    this.setState({ responseToPost: body });
  };
  
render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        <p>{this.state.response}</p>
        <form onSubmit={this.handleSubmit}>
          <p>
            <strong>Post to Server:</strong>
          </p>
          <input
            type="text"
            value={this.state.post}
            onChange={e => this.setState({ post: e.target.value })}
          />
          <button type="submit">Submit</button>
        </form>
        <p>{this.state.responseToPost}</p>
      </div>
    );
  }
}

export default App;

Noi creăm callApi metoda de a interacționa cu GET Rută Express Express, apoi numim această metodă în componentDidMount și, în cele din urmă, setați starea la răspunsul API, care va fi Bună ziua de la Express.

Observați că nu am folosit o adresă URL complet calificată http://localhost:5000/api/hello pentru a apela API-ul nostru, chiar dacă aplicația noastră React rulează pe un alt port (3000). Acest lucru se datorează proxy linie pe care am adăugat-o la package.json fișier mai devreme.

Avem un formular cu o singură intrare. La trimiterea apelurilor handleSubmit, care la rândul său ne numește POST Ruta Express Express salvează apoi răspunsul la stare și afișează un mesaj către utilizator: Am primit solicitarea dvs. POST. Iată ce mi-ai trimis: [message from input].

Acum deschis ./client/src/App.css și modificați .App-header clasa după cum urmează (modificări cu caractere aldine)

.App-header {
...
  min-height: 50%;
...
  padding-bottom: 10px;
}

Rularea aplicației

Dacă aveți în continuare serverul care rulează, continuați și opriți-l apăsând Ctrl + C în terminalul dvs.

Din directorul rădăcină al proiectului executați următoarele:

yarn dev

Aceasta va lansa aplicația React și va rula serverul în același timp.

Acum navigați la http://localhost:3000 și veți accesa aplicația React afișând mesajul care vine de la GET Traseu expres. Grozav ?!

Acum, tastați ceva în câmpul de introducere și trimiteți formularul, veți vedea răspunsul din POST Rută expresă afișată chiar sub câmpul de introducere.

În cele din urmă, aruncați o privire la terminalul dvs., veți vedea mesajul pe care l-am trimis de la client, asta pentru că sunăm console.log asupra organismului de solicitare din POST Traseu expres.

Implementarea producției la Heroku

Deschis server.js și înlocuiți cu următorul conținut:

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// API calls
app.get('/api/hello', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.post('/api/world', (req, res) => {
  console.log(req.body);
  res.send(
    `I received your POST request. This is what you sent me: ${req.body.post}`,
  );
});

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')));
    
  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}

app.listen(port, () => console.log(`Listening on port ${port}`));

Deschis ./package.json și adăugați următoarele la scripts intrare

"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"

Heroku va rula start script în mod implicit și acest lucru va servi aplicația noastră. Apoi vrem să îi instruim lui Heroku să construiască aplicația noastră pentru clienți, o facem cu heroku-postbuild scenariu.

Acum, mergeți la Heroku și conectați-vă (sau deschideți un cont dacă nu aveți unul).

Creați o aplicație nouă și dați-i un nume

Faceți clic pe Implementați și urmați instrucțiunile de implementare (care cred că sunt destul de auto-explicative, nu are rost să le replicați aici?)

Și asta este, vă puteți deschide aplicația făcând clic pe Deschide aplicatia butonul din colțul din dreapta sus al tabloului de bord Heroku pentru aplicația dvs.

Accesați aplicația implementată pentru acest tutorial: https://cra-express.herokuapp.com/

Alte opțiuni de implementare

Aici scriu despre alte opțiuni de implementare:

• Netlify
• Acum
• Heoku (explicație mai aprofundată)

Structura proiectului

Aceasta va fi structura finală a proiectului.

Obțineți codul complet pe Depozitul GitHub.

Vă mulțumesc pentru lectură și sper că v-a plăcut. Orice întrebare, sugestie anunță-mă în comentariile de mai jos!

Poți să mă urmărești mai departe Stare de nervozitate, GitHub, Mediu, LinkedIn sau pe toate.

Această postare a fost inițial postată pe pagina mea personală site-ul blogului.

Actualizare 25.08.19: Am construit o aplicație web de rugăciune numită „Timpul meu liniștit – Un jurnal de rugăciune“. Dacă doriți să rămâneți în buclă, vă rugăm să vă înscrieți prin următorul link: http://b.link/mqt

Aplicația va fi lansată înainte de sfârșitul anului, am planuri mari pentru această aplicație. Pentru a vedea câteva capturi de ecran cu machete, urmați următorul link: http://pc.cd/Lpy7

DM-urile mele Stare de nervozitate sunt deschise dacă aveți întrebări cu privire la aplicație?