I recently had the opportunity to build a web app using ReactJS and the PHP framework called Laravel. I was the front and back end web developer, the development operations manager, and the web designer. Somehow, it turned out okay. Note that this is not a tutorial, but that doesn’t mean you won’t be able to glean any useful information from it.
Install All the Packages
Development operations had me pulling my hair out, but the web development side of things (front end and back end) was more manageable. When I installed something, it would work… for the most part. Here’s a list of all the React and Laravel packages I had to install.
- A Laravel package to manage images
- A React package (which was broken) for managing pagination
- A React package for letting users share their entries on social media.
- A React package for using Stripe.
- A React package (which was also broken) that created a popup to let users choose an image from facebook.
- A vanilla JS package for managing cookies.
I’m sure there were many more packages, but those are the ones that come to mind.
The Confusions of React Router V4
Besides taking a few React courses on Teamtreehouse.com, I had never used React for a professional web application. I didn’t quite understand how to use it, but I was able to use it to build the web application. Getting it set up was very confusing though. React had just recently switched over to React Router V4. I never really understood what React Router V4 actually was the whole time I was building the app,. Basically, React Router V4 is a library for conditionally adding and removing (not just hiding) React components based on the URL/path of the site. Don’t try to equate React Router V4 with any routes that you normally use. It won’t work. I was equating React Router with Laravel routes, and I thought of components as Laravel pages. That was definitely not the right way to think about them. They are a lot different. You can wrap a little button component in a route and only display that button on a page with the URL mysite.com/page-with-extra-button. You can put that button (<Route path=”/page-with-extra-button”><MyButton /></Route>) anywhere you want. It can be in a menu, in the footer, in a random component in the middle of another component. It can appear anywhere. You definitely can’t do that with a Laravel route. It is a very strange way of thinking about routes.
The Laravel Back End
There’s not too much to say about the back-end. I set up a couple models in Laravel and their corresponding database tables. Nothing really blew me away or totally confused me. Routes acted like routes. I still don’t quite understand Models, but I sure took advantage of Controller classes and functions.
For the most part, Laravel just acted as an API for React JS, and it acted as a very good API at that.
Development Operations (Launching the React/Laravel App)
I deployed the development project to the live server using git. I set up the app (the website) on a LEMP Digital Ocean droplet. Installing the Laravel dependencies was a bit of a doozy. I remember one composer package needed PHP 7.2 (gotta stay current, right?), and I had to uninstall the previous PHP version and install the new one. That caused some issues. I also had trouble (errors) setting up the MySQL database. Honestly, each of these errors seemed to be like a brick wall, but with enough troubleshooting, I was able to get through each one. In addition to actually building the app (development), I was also in charge of development operations (setting up the server for the site and deploying it) and web design. That’s usually how it goes in small companies. Since I’m not a designer, I got most of my inspiration from other websites.
A Good Result
Because of time constraints, I had to really, really rely heavily on React and Laravel to work in development, and they both performed wonderfully. Would I use React and Laravel to build another web application? The answer is a definite yes.
If you want to read more about my experience with React, check out my article named My Biggest Takeaways from Using React JS.