4

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.com/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

Improve this question
7
  • I'd recommend 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.com/create-react-app-express-backend Using create-react-app to set up the initial React application, and reuse your express server for data. 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. Commented Jun 20, 2017 at 7:05
  • Also, isn't it possible to do in my Node JS application itself? 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 common way is to connect via REST API. 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. Commented Jun 20, 2017 at 7:12

3 Answers 3

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

As said, as of now just to get my server ready, I used the views folder of my node js structure to create a HTML page from where I can make user to enter some parameters and make server process on those parameters and formulate the JSON response. So, now you are saying that I should create separate front end react app using create-react-app, then I should use REST API to connect client with server and send my formulated JSON to react? Can you throw more light on connection things like some examples?
As I said, Please take your time to read through @Grandas ' answer. And Yes, create them separately. One project for your server and another for client.
0

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.com/Hashnode/mern-starter

Improve this answer

Comments

0

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.com/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.com/package/axios.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.