Create React + Node.js app
Hello, in this video, we create a react app and a node.js app from scratch and then connect them to each other .
We will try to keep them as easy and simple as it can be.
Steps to follow:
1) MAIN FOLDER: create a frontend folder by using
npx create-react-app frontend
2) MAIN FOLDER: create a backend folder
3) BACKEND FOLDER: open CMD on BACKEND folder and:
a) create a “server.js” file and leave it empty
b) npm init -y
c) npm install express –save
d) open server.js file add the basic node.js code. For arrow function, you can type “afn”
e) make a test if works. Open CMD on backend folder and type: node server.js
4) FRONTEND: open CMD on frontend folder and type “npm install react-router-dom –-save”
5) FRONTEND: make a test if it works. Open CMD on Frontend and type: npm start
6) FRONTEND: make a cleanup, delete all icons, manifest, test files and irrelevant code. Unite css files.
7) FRONTEND: create a components folder, and create two components: Articles.js and About.js and Home.js. When you create component, you can type “rfc”
8) BACKEND: open package.json in backend folder and rewrite "scripts" part as shown in video. This is the most important step.
10) FRONTEND: go to package.json on vscode and add this line above “eslint”
“proxy”: http://localhost:4000/
11) BACKEND: open CMD on backend to start node.js+react by typing “npm run dev”
12) FRONTEND: on CMD, run command “npm run build”
13) BACKEND: lets point our node.js properly to the react frontend. This is not mandatory for now, but when we put our project into production, and deploy it on HEROKU, we might need it. Copy the steps that we have taken in the video.
14) BACKEND: we still don’t see any effect, it our backend is really connected to frontend. To test it, we will create a route, which we send some data.
15) FRONTEND: by using fetch lets grab the data from node.js and print it by using map() function. Alternatively, you can also use JSON.stringify() function.
16) BACKEND: test, if everything works: npm run dev
NOTE: All videos on this channel are for exercise purposes. For tutorial purposes I kindly advise you to watch great teachers below:
Node-React-Javascript:
1) The Net Ninja:
/ thenetninja
2) Dave Gray :
/ davegraytea. .
Solidity:
1) Smart Contract Programmer: https://www.youtube.com/channel/UCJWh...
2) Eat the Blocks:
/ eattheblocks