So richten Sie React und Node JS in einem Projekt ein

Hallo alle,
Ich bin Ganpat Kakar. Ich bin Software-Ingenieur mit 4-jähriger Berufserfahrung in der Front-End- und Back-End-Webentwicklung.

Hier werden wir React js plus node js, Full-Stack-Umgebung, einrichten.

Reaktionsaufbau :-

Öffnen Sie Ihr Arbeitsverzeichnis und führen Sie diese Befehle im Terminal => aus

  1. mkdir hello_fullstack
  2. npm i -g create-react-app
  3. cd hallo_voll
  4. create-react-app-Client
  5. CD-Client/
  6. npm starten
  7. Öffnen Sie package.json und fügen Sie diese Zeile vor Abhängigkeiten hinzu: –
    “Proxy”: “
    So sieht unser Client-Ordner package.json aus:-
{
 "name": "client",
 "version": "0.1.0",
 "private": true,
 "proxy": "
 "dependencies": {
 "react": "¹⁶.4.1",
 "react-dom": "¹⁶.4.1",
 "react-scripts": "1.1.4"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test - env=jsdom",
 "eject": "react-scripts eject"
 }
}

Die Einrichtung unserer Reaktions-App ist abgeschlossen. Klicken Sie auf die URL in Ihrem bevorzugten Browser.

Screenshot vom 21.06.2018 um 6.42.00 Uhr.png

Node Js-Setup (Express Framework): –

Wir werden mit dem vorherigen React-Setup-Terminal fortfahren:

  1. cd .. (Terminal zu hello_fullstack navigieren)
  2. mkdir-Server
  3. npm install express-generator -g
  4. express – – view=ejs-Server
  5. CD-Server
  6. npm installieren
  7. npm install nodemon (nodemon hält unseren Server am Laufen, also müssen wir den Server starten, nachdem wir jede einzelne Änderung vorgenommen haben)
  8. Öffnen Sie package.json des Serverordners und suchen Sie das Skript
"scripts": {
 "start": "node ./bin/www"
 }

ändern Sie diesen Code in

"scripts": {
 "start": "nodemon ./bin/www"
 } 

Unser Knoten js => package.json sieht so aus: –

{
 "name": "server",
 "version": "0.0.0",
 "private": true,
 "scripts": {
 "start": "nodemon ./bin/www"
 },
 "dependencies": {
 "cookie-parser": "~1.4.3",
 "debug": "~2.6.9",
 "ejs": "~2.5.7",
 "express": "~4.16.0",
 "http-errors": "~1.6.2",
 "morgan": "~1.9.0",
 "nodemon": "¹.17.5"
 },
 "main": "app.js",
 "devDependencies": {},
 "keywords": [],
 "author": "",
 "license": "ISC",
 "description": ""
}

Unser Node js (Express-Setup ist fertig).
Aber bevor wir unseren Servercode starten, müssen wir einige Einstellungen für node js ändern.
Öffnen Sie Ihren bevorzugten Editor und öffnen Sie den Ordner hello_fullstack.
Navigieren Sie zu server/bin/www =>
Hier sehen Sie eine Zeile “var port = normalizePort(process.env.PORT || ‘3000’);”
Ändern Sie also den Port von 3000 auf 3001 oder eine andere Portnummer, aber nicht 3000. Weil wir Portnummer 3000 für die Reaktions-App verwenden.
Jetzt funktionieren also sowohl React als auch Node js, aber sie sind nicht verbunden, sowohl React als auch Node js können nicht kommunizieren.
Hier arbeiten wir am Proxy-Teil, der unsere React- und Node-js-Projekte verknüpfen wird.
Also zurück zu unserem Terminal => Verzeichnis hello_fullstack

  1. npm init -y
    Es wird eine package.json-Datei erstellt.
    Öffnen Sie Ihren Editor und bearbeiten Sie diese Datei „package.json“ mit dem folgenden Code. (Beachten Sie, dass sich diese package.json-Datei außerhalb des Server- und Client-Ordners befindet.)
{
 "name": "kmail",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "client": "cd client && npm start",
 "server": "cd server && npm start",
 "start": "concurrently - kill-others \"npm run server\" \"npm run client\""
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "concurrently": "³.5.1"
 }
}

und im Terminal run command => npm install
Hurra!!!!! Unser Setup ist fertig.
Jetzt ist es an der Zeit, unser React + Nodejs-Projekt zu testen.
Navigieren Sie in unserem Terminal zum Projektordner (hello_fullstack) und führen Sie den Befehl => aus

npm start

Unser Projekt läuft ordnungsgemäß im Browser, unser React funktioniert und unser Express funktioniert.
Führen Sie nun einige Ajax-Aufrufe von der Reaktions-App aus, um unsere Server-APIs anzurufen.
Viel Glück bei deiner Entwicklung.
Vielen Dank fürs Lesen.

Similar Posts

Leave a Reply

Your email address will not be published.