How to use react to build the voting app project?

How to use react to build the voting app project?
0

#1

I have the clementine.js cloned in c9 but i dont know how to use react so that i can build the app in react.


#2

You’ll need to install Node: https://nodejs.org/en/ to run npm. After that, you’re basically set!

// Install create-react-app
> npm install create-react-app

// Create the react app
> create-react-app votingApp

// Change directory:
> cd votingApp

// Run the app:
> npm start

Create-react-app basically sets you up with the layout of your app, providing all the necessary files you’ll need to get building. Also, you can read the official docs here: https://reactjs.org/

EDIT:
Here’s the official installation docs:
https://reactjs.org/docs/installation.html


#3

In addition to what username1001 said, another way to think of it is creating two apps. You have your backend in Node/Express/Mongo that handles your REST calls, and you a frontend app where the user interfaces it. Alternatively, you could have your server serve up the React code. You can search for things like “MERN stack” for that approach.


#4

First of all thank you both for your time. I appreciate it.

I have created an app using create-react-app but what I cant figure out is how to integrate the back end (the express server) and the front end (react app).


#5

Have a look here:


#6

So in you first two lines you mean to say that i built a server side app in express to for database retrievals and sorts.
And in front-end build a react app that request the node server like an api ??


#7

OK, I’ll try again.

You are going to have two separate apps. You’ve built the second one, the front end with create-react-app. This is the client.

But you need a second one, a server, built on node/express/mongo. You will need a separate directory and a separate terminal window. This server will only handle http requests. It will only serve data back and forth. That server (in development) will run on localhost at some port number. That is the address to which your client will direct it’s http requests.

So, you will have a server running at something like localhost:3001 and your client running at localhost:3000 (or whatever). You view the client by opening up “localhost:3000” in your browser and that client will interact with the server on localhost:3001.

They are two separate programs. They always are, but now it is even clearer. When you deploy, instead of the server running on localhost:3000 it will be whatever url heroku gives you. And your client can run anywhere that serves static pages (like github pages). Your client code will have to point to that heroku address for http requests, not the localhost.

I should point out that in development, you will have a third server running on your computer, for the database. Similarly, in production you will have a database running on mLab, or something similar.


#8

Yes, see above. You’re basically right, but I have a more detailed explanation above.


#9

WooooW. Thank You Sooo Much. :grinning:

You sublimated two days of my frustrated mind into a blissful tranquility with just 4 paragraphs.

Appreciate it.


#10

Cool, glad I could help. This was a big logical hurdle for me when I started to understand how server and client relate. I think breaking up the app like you are talking about doing would be a great way to cement that concept.


#11

In this setup would the the backend just be serving JSONs in response to get requests from the client?


#12

That would make sense. Your client would handle the interactions with the user and would use http methods (GET, POST, PUT, DELETE, etc.) to communicate with the server. For example putting new polls in the database, changing the votes, managing the users, etc.

This is different from another common structure where your server has certain routes that serve as an API for the user but also have certain routes that serve up the html/css/js to the client. In the set up vikrant is considering, the server would do nothing but operate as the API and the client code would be separate. In both cases the server functions as an API, it’s just a matter of whether that server is serving the client code, or if it is separate.

Both are perfectly cromulent approaches.


#13

Thanks for your explanation. I’m working on the backend API projects now, so I’m looking forward to working React into it with the clone projects.