Cara Membuat aplikasi create-react dengan Node Back-end API

Ini adalah pertanyaan yang sangat umum di antara developer React yang lebih baru, dan satu pertanyaan yang saya miliki ketika saya memulai dengan React dan Node.js. Dalam contoh singkat ini saya akan menunjukkan kepada Anda bagaimana membuat create-react-apppekerjaan dengan Node.js dan Express Back-end.

buat-reaksi-aplikasi

Buat proyek menggunakan create-react-app.

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

Buat /clientdirektori di bawah example-create-react-app-expressdirektori dan pindahkan semua kode boilerplate React yang dibuat oleh create-react-appke direktori klien baru ini.

cd example-create-react-app-expressmkdir client

Server Node Express

Buat package.jsonfile di dalam direktori root ( example-create-react-app-express) dan salin konten berikut:

{ "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" } }

Perhatikan yang saya gunakan concurrently untuk menjalankan aplikasi React dan Server pada saat yang bersamaan. The –kill-others-on-failbendera akan membunuh proses lainnya jika salah satu keluar dengan kode non zero status.

Instal nodemon secara global dan ketergantungan server:

npm i nodemon -g yarn

Buat server.jsfile dan salin konten berikut:

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}`));

Ini adalah server Express sederhana yang akan berjalan pada port 5000 dan memiliki dua rute API: GET- /api/hello, dan POST- /api/world.

Pada titik ini Anda dapat menjalankan server Express dengan perintah berikut (masih di dalam direktori root):

node server.js

Sekarang arahkan ke //localhost:5000/api/hello, dan Anda akan mendapatkan yang berikut:

Kami akan menguji POSTrute setelah kami membangun aplikasi React.

Aplikasi React

Sekarang beralih ke clientdirektori tempat aplikasi React kita berada.

Tambahkan baris berikut ke package.jsonfile yang dibuat oleh create-react-app.

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

Kunci untuk menggunakan server ujung belakang Express dengan proyek yang dibuat dengan create-react-appadalah menggunakan proxy. Ini memberi tahu server pengembangan paket Web untuk mem-proxy permintaan API kami ke server API kami, mengingat server Express kami sedang berjalan localhost:5000.

Sekarang ubah ./client/src/App.jsuntuk memanggil API Ekspres Back-end kami, perubahan dicetak tebal.

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 ( 

Edit src/App.js and save to reload.

Learn React

{this.state.response}

Post to Server:

this.setState({ post: e.target.value })} /> Submit

{this.state.responseToPost}

); } } export default App;

Kami membuat callApimetode untuk berinteraksi dengan GETrute API Ekspres kami , kemudian kami memanggil metode ini componentDidMountdan akhirnya menyetel status ke respons API, yang akan menjadi Hello From Express .

Perhatikan bahwa kami tidak menggunakan URL yang sepenuhnya memenuhi syarat //localhost:5000/api/hellountuk memanggil API kami, meskipun aplikasi React kami berjalan pada port yang berbeda (3000). Ini karenaproxybaris yang kami tambahkan ke package.jsonfile sebelumnya.

Kami memiliki formulir dengan satu masukan. Saat mengirimkan panggilan handleSubmit, yang pada gilirannya memanggil POSTrute API Ekspres kami kemudian menyimpan respons ke status dan menampilkan pesan kepada pengguna: Saya menerima permintaan POST Anda. Inilah yang Anda kirimkan kepada saya: [pesan dari masukan] .

Sekarang buka ./client/src/App.cssdan ubah .App-headerkelas sebagai berikut (perubahan dicetak tebal)

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

Menjalankan Aplikasi

Jika Anda masih memiliki server yang berjalan, lanjutkan dan hentikan dengan menekan Ctrl + C di terminal Anda.

Dari direktori root proyek, jalankan perintah berikut:

yarn dev

Ini akan meluncurkan aplikasi React dan menjalankan server pada saat yang bersamaan.

Sekarang navigasikan ke //localhost:3000dan Anda akan menekan aplikasi React yang menampilkan pesan yang datang dari GETrute Express kami . Bagus ?!

Sekarang, ketik sesuatu di kolom input dan kirimkan formulir, Anda akan melihat respons dari POSTrute Express ditampilkan tepat di bawah kolom input.

Terakhir, lihat di terminal Anda, Anda akan melihat pesan yang kami kirim dari klien, itu karena kami memanggil console.logbadan permintaan di POSTrute Ekspres.

Penerapan Produksi ke Heroku

Buka server.jsdan ganti dengan konten berikut:

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}`));

Buka ./package.jsondan tambahkan berikut ini ke scriptsentri

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

Heroku akan menjalankan startskrip secara default dan ini akan melayani aplikasi kita. Kemudian kami ingin menginstruksikan Heroku untuk membangun aplikasi klien kami, kami melakukannya dengan heroku-postbuildskrip.

Sekarang, pergilah ke Heroku dan masuk (atau buka akun jika Anda belum punya).

Buat aplikasi baru dan beri nama

Klik pada tab Deploy dan ikuti instruksi penerapan (yang menurut saya cukup jelas, tidak ada gunanya mereplikasi di sini?)

Dan itu saja, Anda dapat membuka aplikasi Anda dengan mengklik tombol Buka aplikasi di pojok kanan atas dalam dasbor Heroku untuk aplikasi Anda.

Kunjungi aplikasi yang diterapkan untuk tutorial ini: //cra-express.herokuapp.com/

Opsi Penerapan Lainnya

Saya menulis tentang opsi penerapan lain di sini:

  • Netlify
  • Sekarang
  • Heoku (penjelasan lebih mendalam)

Struktur Proyek

Ini akan menjadi struktur proyek akhir.

Dapatkan kode lengkap di repositori GitHub.

Terima kasih telah membaca dan saya harap Anda menikmatinya. Ada pertanyaan, saran beri tahu saya di komentar di bawah!

Anda dapat mengikuti saya di Twitter, GitHub, Medium, LinkedIn atau semuanya.

This post was originally posted on my personal blog website.

Update 8/25/19: I have been building a prayer web app called "My Quiet Time - A Prayer Journal". If you would like to stay in the loop please sign up through the following link: //b.link/mqt  

The app will be released before the end of the year, I have big plans for this app. To see some mockup screenshots follow the following link: //pc.cd/Lpy7

My DMs on Twitter are open if you have any questions regarding the app ?