Finally, the last phase of the program; most definitely bittersweet. Boy was this a way to finish school...React & Redux. Whew!
By this time, we're pros when setting up the backend. It only takes me roughly 20 minutes to create a Rails API. If only it was the same for the frontend, but that's okay.
For the backend, I utilized several commands to quickly get started:
rails new name --api
rails g scaffolding Name
rails g Name serializer, etc. You get the point!
If only the frontend was just as easy to build! To start, I used this command to build the basic structure of the frontend
create-react-app App Name. This provided some files like index.html to render the app to the DOM and index.css for styling. From this point, I dove right into building my app from scratch to meet the requirements.
One of the requirements was to include five stateless components. Stateless components are portions of your code that do not have state. In other words, this component serves to pass down props when rendered.
The Home.js component is stateless and simply displays a bit of text when rendered. It is then exported to be used as a button link in the Navbar component.
Another requirement was to include routes. When implementing Redux, there are packages one can install to provide navigational components to be declared for easy access within an application. For instance,
react-router-dom. I used this registry to access routes for a user to navigate through the application. Check it out below! This was super helpful when consider RESTful conventions as I worked through the project.
While I only touched on a couple topics, React provides so much more functionality and structure when creating a user friendly application. This project was by far the most challenging, but it was rewarding to see everything come together throughout this journey.