# How to use react to build the voting app project? **URL:** \ **Category:** General\ **Created:** [November 30, 2017, 7:42am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557 "2017-11-30T07:42:39Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![vikrant17](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vikrant17/32/69019_2.png) [@vikrant17](https://forum.freecodecamp.org/u/vikrant17)\ **Post date:** [November 30, 2017, 7:42am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/1 "2017-11-30T07:42:39Z")
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. ---
**Author:** ![username1001](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/username1001/32/72268_2.png) [@username1001](https://forum.freecodecamp.org/u/username1001)\ **Post date:** [November 30, 2017, 8:26am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/2 "2017-11-30T08:26:03Z")
You’ll need to install Node: [https://nodejs.org/en/](https://nodejs.org/en/) to run npm. After that, you’re basically set! ```auto // 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/](https://reactjs.org/) EDIT: Here’s the official installation docs: [https://reactjs.org/docs/installation.html](https://reactjs.org/docs/installation.html) ---
**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\ **Post date:** [November 30, 2017, 8:33am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/3 "2017-11-30T08:33:34Z")
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. ---
**Author:** ![vikrant17](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vikrant17/32/69019_2.png) [@vikrant17](https://forum.freecodecamp.org/u/vikrant17)\ **Post date:** [November 30, 2017, 3:51pm UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/4 "2017-11-30T15:51:44Z")
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). ---
**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\ **Post date:** [November 30, 2017, 4:10pm UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/5 "2017-11-30T16:10:03Z")
Have a look here: > ---
**Author:** ![vikrant17](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vikrant17/32/69019_2.png) [@vikrant17](https://forum.freecodecamp.org/u/vikrant17)\ **Post date:** [November 30, 2017, 5:05pm UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/6 "2017-11-30T17:05:05Z")
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 ?? ---
**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\ **Post date:** [November 30, 2017, 5:14pm UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/7 "2017-11-30T17:14:05Z")
> [@vikrant17](#): > > …but what I cant figure out is how to integrate the back end (the express server) and the front end (react app). 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. ---
**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\ **Post date:** [November 30, 2017, 5:15pm UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/8 "2017-11-30T17:15:31Z")
> [@vikrant17](#): > > 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 ?? Yes, see above. You’re basically right, but I have a more detailed explanation above. ---
**Author:** ![vikrant17](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vikrant17/32/69019_2.png) [@vikrant17](https://forum.freecodecamp.org/u/vikrant17)\ **Post date:** [December 1, 2017, 5:40am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/9 "2017-12-01T05:40:03Z")
WooooW. Thank You Sooo Much. 😀 You sublimated two days of my frustrated mind into a blissful tranquility with just 4 paragraphs. Appreciate it. ---
**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\ **Post date:** [December 1, 2017, 6:00am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/10 "2017-12-01T06:00:53Z")
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. ---
**Author:** ![colinthornton](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/colinthornton/32/62129_2.png) [@colinthornton](https://forum.freecodecamp.org/u/colinthornton)\ **Post date:** [December 1, 2017, 6:18am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/11 "2017-12-01T06:18:11Z")
In this setup would the the backend just be serving JSONs in response to get requests from the client? ---
**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\ **Post date:** [December 1, 2017, 6:55am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/12 "2017-12-01T06:55:47Z")
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. ---
**Author:** ![colinthornton](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/colinthornton/32/62129_2.png) [@colinthornton](https://forum.freecodecamp.org/u/colinthornton)\ **Post date:** [December 1, 2017, 7:23am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/13 "2017-12-01T07:23:27Z")
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. ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [January 17, 2021, 9:37am UTC](https://forum.freecodecamp.org/t/how-to-use-react-to-build-the-voting-app-project/161557/14 "2021-01-17T09:37:00Z")