Hi guys,
I am learning React and I like to think I'm able to develop a small web app. However, I'm having trouble trying to figure out how to create a server and use that WebApplication.
I have learnt a fair amount of NodeJS (with the loopback.io framework) and now I'm curious on how to mix them both together (show React web applications for different routes).
Any advice would be appreciated.
Cheers, Joey
Hi Joey,
I guess you can make node.js based webapps and know basics of React, but are confused about how to go ahead and combine them. In case you don't quite understand React, then go through this tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/ . It has 3 parts, if you do all three parts you would understand React, Build tools (Gulp here) and Flux (an architecture pattern).
In case you need a project to work on, so that you get a hands on practice. I will breakdown steps for you-
Make a simple CRUD API in Node (Express or whatever framework you use).
Use those API End points directly in your React components.
Mount these React Components in the views of your application. (Here's where build tool will help you, at this point you will have a webapp using React + Node but you will realise a need to manage data flow and states, and there enters Flux)
Read about Flux here medium.com/brigade-engineering/what-is-the-flux-a…
Refactor your previous code to use flux also.
At the end you would have a pretty good understanding of Flux, react and node put together.
In case you need to see a practicle implementation of React+Flux+Node(Express). See this repo github.com/prank7/devComm . Its a very simple comment system but uses all of these technologies.
More than happy to answer any questions!
I would use express (or whatever else you would like) to set up initial request handling and statically serve the React app itself. Then, once you have gone thru the "gateway" to the individual React app that you're trying to access, use React.Router to handle navigation within that individual React app. This way, you can use multiple, separate React apps on different pages in your app, but still have React handle the front-end navigation through the individual app itself.
As an added bonus, I believe that loopback and Express play pretty well together, so there shouldn't be much of an issue there. If you're going to be doing much more Node work in the future, Express is good to know. It is as near standard as it gets for Node app frameworks.
Sandeep Panda
co-founder, Hashnode
Hey Joey,
Recently I wrote a tutorial on how to build a simple blogging app using React and Node.js. Read it here. You can clone the repo from GitHub and start following the tutorial. As this is a little advanced stuff I recommend going through the following resources first.
Using React with Node.js is fairly easy. You just need some practice.
Let me know if you have any questions!