Rails React Blog: how to create a post
In today’s technological age, we are seeing newer and more efficient ways to communicate with each other online. From Tumblr to Twitter, to Facebook, a user is able to send information in an instant. To stand out from most developers, I wanted to create an app that was designed to act like a Tumblr clone and to create a way for people to share thoughts and emotions. In this article, I’m going to break down and show how I created my app, but specifically, I wanted to show how I created postings and blogs for my Tumblr clone.
This is how I created the blog's front end and back end components for my app.
First I decided to work on my back end and create an API for the user to fetch created blogs and their objects of “posts”. The program I’m using for this is rails. For the rails backend I typed into my terminal, rails g controller Blogs and rails g model blog name post. This allows the backend to interpolate name and post as strings. In the blogs model, I made a belongs_to association with users and a has_many relationship with comments. This also consists of adding routes and serializers to the back end for the CRUD methods of my blog.
As seen above, for the blog rails back end portion, I made methods to show users on the front end what the blogs looked like. For this article, we are going to pay attention to the create method. In my create method, whenever a user creates a blog, it saves the blog, else, it creates an error. The reason if because of the one-to-many relationship; the only way a blog can be created is if it is attached to a user–and if it has content inside of the blog–if it is not, it will not show onto the frontend.
Secondly, I then migrated my databases and seated them. Full disclosure, I already had some data already in the seed file of my app, this is so I am able to see on the front end, what and how everything looks like.
I then put them into the terminal rails g controllers and serializers for the next couple of models. Each one has a serializer that responds to each of the models. This is so I can be able to render it onto the page on the front end. Afterward, I created CRUD instances so that way I can update each of my models and methods. The serializers help ferry the code from the front to back and vice versa.
Lastly, after making methods for my models and utilizing my serializers to make the backend-to-frontend interpolation easier, I focused on the react portion of my app.
For the react portion of my blog portion of my app, I then added a src folder and inside of that folder I made react components to show on the front for each of my rails back end associations. I created components for my blog and named them: CreateBlog.js, Blogs.js, BlogForm.js.
In Blogs.js, I set the state to an empty array and made a useEffect to have the saved blogs rendered onto the blogs page. I, then, made containers for blogs in BlogForm.js. In CreateBlogs.js I had three variables set to state, which was later used when I made a function for the onSubmit later on. I created a form for the onSubmit function and put it within the first <div> after the return. I then created input values for blog under blog.name and blog.post for the user to type in the name of the blog post and the post itself for the body. At the bottom of the return, before the last <div>, I have a button to submit the form and send it to the back end to save to the database.
Afterward, when the user submits the form, they are able to see it on the front end when they go back to the blog's page. Where they can like, comment, update the post if need be, etc.
Added step: for me personally, I pushed this entire project to heroku so it can be used in a public manner.
And that is how I was able to make my blogs and have the user save it onto the page. If there is another way to use the handleEvents that I made please let me know
