I've my server code ready in Node JS Express and I've got my response in JSON form. I've followed following tutorial to set up project Structure in Node JS Express : ;list=PL55RiY5tL51oGJorjEgl6NVeDbx_fO5jR

Now, I want to make the front end for the same application in React. So, here what I mean is my server is in Node JS Express and front end should should be in React. Considering a beginner in React, please suggest me some tutorials or examples where I can atleast start making my UI and fit this into project structure created using Node JS Express.

I tried finding it myself, but in every application React JS is itself creating its server but I've my server up and running in Node JS express. Please guide.

Please click on this link to see my Node JS Project Structure

I've my server code ready in Node JS Express and I've got my response in JSON form. I've followed following tutorial to set up project Structure in Node JS Express : https://www.youtube./watch?v=65a5QQ3ZR2g&list=PL55RiY5tL51oGJorjEgl6NVeDbx_fO5jR

Now, I want to make the front end for the same application in React. So, here what I mean is my server is in Node JS Express and front end should should be in React. Considering a beginner in React, please suggest me some tutorials or examples where I can atleast start making my UI and fit this into project structure created using Node JS Express.

I tried finding it myself, but in every application React JS is itself creating its server but I've my server up and running in Node JS express. Please guide.

Please click on this link to see my Node JS Project Structure

• javascript
• node.js
• reactjs
• express

• I'd remend starting with 2 separate apps - react for the frontend and node for the backend. Basically anything client-interaction related would sit on the frontend application. When data needs to be fetched the client application would make a request to the express server, and it would only be responsible for serving data. You could try something similar to this: daveceddia./create-react-app-express-backend Using create-react-app to set up the initial React application, and reuse your express server for data. – Grandas Commented Jun 20, 2017 at 7:01
• ok so do you mean that I should create a separate project for frontend? If yes, how do I connect my server with fronend application? because I need to pass parameters entered by client to server to do required processing and then send the json response back to the client. – Nikitasha Commented Jun 20, 2017 at 7:05
• Also, isn't it possible to do in my Node JS application itself? – Nikitasha Commented Jun 20, 2017 at 7:06
• Like what I've answered below. There are many ways to "connect" your client to your server. The most mon way is to connect via REST API. – ickyrr Commented Jun 20, 2017 at 7:10
• @Grandas has provided you with a good material to read on. I just did a quick scan on it but it's really understandable for you. – ickyrr Commented Jun 20, 2017 at 7:12

3 Answers 3

I suggest using create-react-app. It's a cli so you don't need to setup your project from scratch by yourself. They also have some tutorials that you can get started on.

Meteor JS could easily solve your issues and it's a good starting point for you.

If you'd like the first one (create-react-app) I think you should get yourself used to React first. And try connecting to your server via REST.

I suggest you should check out this website to create production ready apps using MERN(Mongo, express, react, node) stack.

http://mern.io/

Or their github repository https://github./Hashnode/mern-starter

Start using frontend on react using create-react-app. You can clone the project from github and it can give you the boilerplate code that you will need to start your apllication. The link for cloning the same is https://github./facebook/create-react-app.

Once you have cloned the project you can create a folder called server in your root path and copy your nodejs/express code inside that. You can create REST API endpoints in your backend and hit them from frontend using axios. This way you can easily recieve the response from backend to frontend. Please follow the following link to learn axios: https://www.npmjs./package/axios.