React.js: You Can Make Another Facebook with It
One of the most important JavaScript libraries I’ve ever learned throughout my career as a programmer, without a doubt, is React.js, or React for short. A web application framework developed by Facebook (yes, that Facebook), it is primarily known to be a useful tool for web developers, especially frontend developers, to separate the many features that go into a typical web app into smaller parts for increased convenience.
In a lot of ways, React is to JavaScript what Ruby on Rails is to Ruby: a framework that is easy to set up (it even has its own “rails new” in “create-react-app”), comes with a lot of cool toys out of the box to help anyone start building (such as index.css and app.css files that ensure you won’t be looking at another boring HTML page once you boot up the app), and provides enough flexibility for developers to build potentially beautiful apps and achieve feats that they otherwise may not obtain with vanilla JavaScript or Ruby. React also has its own library for providing multiple routes to what would otherwise be a completely one-paged app — React Router, which is similar to routing in Rails where the routes.rb file can provide accessibility to all the RESTful routes.
However, React’s approach to DOM manipulation and event handling is quite different from that of original recipe JavaScript — it handles all of its rendering and functionality by the use of components, smaller pieces that all contribute a separate role in the overall look and feel of the bigger app and may contain events that push them toward that goal. Components are, in essence, jigsaw puzzle pieces that, when properly put together, create a bigger picture, and that bigger picture is the app as a whole.
But let’s look at a basic React app to show us what I’m talking about. I want to build a simple social media platform that allows the user to look at every post that exists there. I also want an event such that when I click on a user’s name, that name appears at the top of the list of posts wrapped in an h2 tag. On the backend side of things, I only need one model: post. Where do I plan on getting these posts? Well, we could generate an API using Rails (as I demonstrate here), but this time we’ll make a db.json file instead with all our posts. A post contains the name of the user who posted it as well as its content.
Make sure you use a different port for the backend so that your frontend and backend won’t be running on the same port.
On the frontend side, our app tree is as follows: App → PostContainer → Post. Let’s make sure our PostContainer component can be accessed to in our App.js file.
Then in our PostContainer component, fetch our post data using componentDidMount(). This is also where we’re putting our click handler. Below, when creating our Post component, pass in the props id, onClick (which is going to be the click handler in our PostContainer component), and the post object itself, which gives us access to a post’s user and content. These props (as well as, well, props in general) can only be passed down from parent component to child component. It cannot go the other way around.
In our Post component, make sure that the onClick prop we passed down applies to the HTML corresponding to the name of the post’s user so that the state of the inner text of the h2 tag changes depending on which user is clicked.
Let’s look at the finished product. We want to make sure all the posts have been properly rendered and that our click handler is working the way it should.
I have all the posts. Now to click on all the users there.
Okay, sweet. Our Mugtome app is ready to go.
I definitely see the potential React has when it comes to building small social media platforms that capitalize on the multitasking nature of bigger sites (YouTube, for instance, contains a nav bar, a search bar, an icon that takes you to your channel, and a list of recommended videos to watch upon starting it up, among other things as of this writing), and not just ones that are small as our Mugtome is. If we were to make it a bit bigger, we could add profiles for users with their own avatars and other information, a list of friends a user has, and maybe even a form that takes in a user’s name and password if we have the time for it. All of these features would likely be handled by separate components.
With its unique component-based structure as well as its flexibility and overall developer-friendliness, React makes me confident that learning it will take me one step closer to building truly professional web applications. You can make another Facebook with it, like I just did (well, sort of).
