Sharing my thoughts on a practice project learning how to connect a React JS frontend and Ruby on Rails backend. This is my very first time doing something like this and I've been wanting to do it for awhile because understanding how all of the moving parts work will help me greatly with my own digital analytics work.
I decide to go with a blog. Coding a blog is something that may be a very typical project for code newbies but in reality it's perfect to learn the relationships between data across client and server side applications. Since I've been interested and curious about how fetching data from APIs work I also decided to add a page where I'm pulling data from the NewsAPI. It's been fun so let's go straight to the details.
Looks terrible but the point is not styling but understanding the moving parts.
Ruby on Rails Backend
Coding the backend was easy. I did Rails new in the command line to start a new project with boiler plate code. I added a database table for Post with string and text attributes for a title, body and author. I also added a table for comments because I wanted to add that functionality but then didn't move on with it (for now) because I wanted to add the functionality to request data from NewsAPI.
I then moved on to create my models, actions and routes. I added a Post model with has_many relation ship with comments validating the table attributes I previously mentioned and then added a comments model with a belongs_to relationship to Posts.
In terms of actions, I added a Post controller with CRUD actions and strong params. The difference between coding actions in a RoR setup versus working them for a client side application is that instead of rendering server side views we are rendering JSON objects. Love JSON data, in analytics we use this format all the time so this was very fun to me to work on using serializers.
And thats was it for the backend. Before moving on to the frontend I tested the application with seeded data or dummy data and after QA and making sure data was flowing how it was supposed to I moved on to the frontend. This last part id crucial because if you move on to your frontend without knowing that your backend works you run the chance of getting errors in the frontend without knowing if the issue was in either side so test your backend!
React JS and Redux Frontend
Now the fun part, working with React JS. I've been learning React for a few months now and every project I start I get to like it more and more. For my frontend, I have a class for PostContainer with all of my routes. I'm using BrowserRouter with an alias of Route for the homepage, a blog feed, blog creation page and another one for the fetched news from NewsAPI.
I have a folder with a combination of five functional and class components. Among these I have one for the homepage, another one for the nav, news and blog feeds plus another for a form used for when users create new blog posts.
In terms of the actions, I have them in one action folder for the posts using get and post methods. I decided to keep it simple and coded two to fetch post data using localhost in my fetch method aligned with my nested routes specified in my RoR config folder in the backend. For pulling data from the NewsAPI though I had to create an account, get a client id, and use their endpoint to fetch data but I coded this one on the news component. This is something that I can improve in the future. Having the action separate from the component will allow me to have cleaner files.
Comments