React-shun?
This week at Operation Spark we’ve been learning about frameworks. We did sprints on Backbone, React, and AngularJS. But, wait a minute Ben, according to React’s documentation, “React is a JavaScript library for building user interfaces.” Well, that may just be because a lot of developers are scared off by the big scary term that is “framework”, and we all know that React is developed by the marketing geniuses also responsible for the big blue social media giant. It is possible that these marketing geniuses have succeeded, because React is one of the most popular libraries or frameworks on the market right now, that allows developers to tie together HTML and JavaScript.
So, I imagine the above paragraph might cause more questions than it answers. Such as, why would a developer be afraid of a framework? And, what is the difference between a library and a framework, anyways? Well, generally libraries are less opinionated, more light weight, are much easier to use whenever you want them to do something; sometimes you can add them to your project by just adding a script tag. While frameworks are more opinionated, they sometimes require you to install them to use with a project, and overall ask you to put code into them in certain places and in a certain manner.
Get Ben Meyers’s stories in your inbox
Join Medium for free to get updates from this writer.
So, which one is React? Well, I’ll leave it up to you to decide, but first I’ll show you how powerful React is. I’ve created a little app to keep track of my record collection. It even lets you cross out recently listened to records. First off, my html file is pretty boring, but I wanted to say that I am referencing my RecordCollection.js app in the body. Also, I’d like to point out that I’ve created a div with the id of “app” to attach my collection to when I call .render() on the ReactDOM. I have a few more records than I’ve put into my app, but right now these seem to be getting the most play, so I started with them.
Now that we’ve got a couple of the little things out of the way, lets iterate through the record collection, and create a new element for each record in the collection. But, how does React get access to the records, you may ask? It gets that access through its props! props is a very useful object that is passed between components in React. You can see above that the records are an array that is passed down to the RecordCollection component. The best part about React is how easy it is to use the HTML right there in our component, and even use JS to build up our HTML elements. You can iterate over them at props.records, and as we iterate using map, we create a new Record element every time.
Next up, we’ll build a Record class which extends the component. This is going to be an important part of our code, which stores the constructor, which holds the state. I like to bind any functions which need binding in my constructor; while you don’t have to bind it here, you definitely have to bind your functions someplace, because in react they lose their ‘this’ binding frequently.
The class is also where we will want to build out our functions. I’ve built a function called onListItemClick, which will change the state of any record you click on. I’ve found that in React changing the state is the best way to change how it looks and acts, so I’ve done just that.
Of course, this won’t actually change how it’s displayed, but the next part will do that based on the current state. In our render function, we are using a ternary to decide whether to put a “line-through” our text based on the state. Our render function is doing something else important as well, returning the <li>s filled with our style and our all important onClick function. This is also where many people prefer to do their function binding.
So, this brings us back to the original question, is React a library or framework? It gives us the use of so many awesome tools like props, state, and setState, lets us intermix HTML and JS all willy nilly, and even provides useful functions like onClick. I didn’t have to download anything special to build this app. But, we do have to use components, states, and render to do much of anything. I lean framework, but I suppose the classification is in the eye of the coder.
