DEV Community

Cover image for The Final Chapter - React Redux
Gia Jennings
Gia Jennings

Posted on • Updated on

The Final Chapter - React Redux

Finally, the last phase of the program; most definitely bittersweet. Boy was this a way to finish school...React & Redux. Whew!

Image description

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.

Home.js component

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.

Image description

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.

Top comments (0)