Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Felix Olonde
4,164 PointsIntegrating React with nodejs project
Hello, I am able to write React project on its own but I am not able to integrate it with Nodejs server side code. Any material that can guide me?
2 Answers
Iain Simmons
Treehouse Moderator 32,305 PointsAlso trying searching for the 'MERN' stack, which stands for Mongo Express React Node, which are four framework/libraries that combine the front end (React), a database (Mongo) and server framework (Express, running on Node). It's quite popular, and would have plenty of tutorials and examples available.
Zack Lee
Courses Plus Student 17,662 Pointssince node is server-side and react is client-side, you need to create a way for these 2 things to talk to each other. What you want is to build an API around you node app that react can then consume in order to communicate with the server. you can find resources by googling as well as several tutorials. there is also a course on treehouse that walks through creating a REST API with express.js, which is a node framework. it'll teach you some basics about consuming the APi but won't walk you through exactly how to do it, but the internet has lots of resources for this.
Felix Olonde
4,164 PointsThanks Zack, I tried out this and it was insightful. Thanks again
Zack Lee
Courses Plus Student 17,662 PointsI have a project up on github which uses an express api to GET and POST data to a local mongoDB. It might help with understanding how these things will work together. Its not perfect, and can still use some work. Let me know if you can get it up and running, you'll need foreman as well as mongodb installed on your computer.
Basically, there is a server that runs the react page, as well a server that runs the express api. Foreman is used to run these in parallel. There should be a little info in the read me to get things up and running.
https://github.com/zackjohnlee/simpleBlog
I put this together after going through the RESTapi course which uses express and mongoDB. I wanted to integrate react so this was my starting point. It actually wasn't very difficult. The only thing i cant figure out is how to store an image thats embedded into the rich text editor i used (thus the function has been removed)
Felix Olonde
4,164 PointsHi Zack, I have gone through your project and it is pretty insightful. In my case i have the back-end with users and all I want is to authenticate and authorize the users from the react front end so they can get into the app. Check my code here https://github.com/felixia/reactApp Thanks
Zack Lee
Courses Plus Student 17,662 PointsFelix, check out the course on authorization with express and mongoDB. it'll give you a great idea on how to accomplish this with an API. You can then use my code structure to help understand how to consume it with react.
Felix Olonde
4,164 PointsZack where do you get this url: http://localhost:3100/api/posts/${page} in your code simpleBlog. Thanks
Felix Olonde
4,164 PointsFelix Olonde
4,164 PointsAm currently checking the MERN stack and will let you know the feedback. Thanks