REACTJS - The 'V' in MVC

This past Monday, I gave my first ever tech talk! Although it was VERY short and was only a basic intro, it was such a great way for me to ease into giving tech talks. Since I’m on the planning team for the DSM WebGeeks, I was asked to give a brief overview of how REACTJS compares to other JavaScript frameworks. Honestly, I was a bit hesistant as I know hardly anything about JavaScript, but I took on the challenge! (Background story: I joined DSM WebGeeks team because I wanted to learn more about web development and help diversify the user group)

I spent last weekend learning about what ReactJS is, and now I’m excited to tell you all about what I have learned! Here are the slides. They are very fun, trust me!

REACTJS Intro

There are an overwhelming amount of javascript frameworks out there, making it very difficult to determine which javascript framework is best for your app. Nodejs, angularjs, emberjs, backbonejs, to name a few. Oh my! There are soo many! Most of these frameworks are vastly different from ReactJs because they are all MVC frameworks. An MVC framework consists of a model, view, and controller. You can think of how a MVC works similar to a human body.

Here’s an analogy for you: A model:ideas::controller:nervous system::view:a physical body. A model is like the object representation of your ideas. Your model of ideas travel through the controller which is analogous to the nervous system. Here the nervous system sends the models of ideas to the correct destination in order to generate the desired action. The actions are then rendered to a view, which is analogous to the physical body. Let’s say that all these MVC JS frameworks have a view that’s analogous to a physical body of a child, like Charlie Brown. He’s weak, slow, and can’t handle large amounts of ideas.

Now, enter ReactJS, with a physical body like Thor. Strong, fast, and can handle anything thrown at him. ReactJS is just that. It is only Thor. Meaning it only has a view, and doesn’t have a model or controller. So just like a human body, one cannot fully function with just a view. Therefore, you cannot build a working application using just ReactJS. Ideally, React is the best fit for your app when you are dealing with large amounts of data that needs to be rendered through the same UI.

React was created by Facebook and Instagram with a single purpose in mind: to create a framework that can handle large amounts of data with fast performance. Think how Facebook’s and Instagram’s user experience works. The UI is a simple template, but it renders a ginormous amount of data constantly. So if you are making an app that is working with a lot of data and need to render it, then ReactJS is for you!

Another great thing about ReactJS is that is super easy to use. I learned the basics of it within a weekend! Everything in ReactJS is built with components. Components = reusability => testability and separation of concerns!

Here is an example of a component I built. It displays “Hello World!” with a hovertext “Goodbye!”.

 var Headline = React.createClass({
                render: function() {
                    return <h1 title={this.props.hovertext} className="bold">{this.props.children}</h1>
                }
            });

Snippet to render my component:

        	React.render(<div className="jumbotron"><Headline hovertext="Goodbye!"> Hello World!</Headline></div>, document.getElementById('content-col'));

I wanted to add an apple button that displays an alert when I click it:

var AppleButton = React.createClass({
                appleClick: function(){
                    alert("An Apple a Day Keeps The Doctor Away");
                
                },
                render: function(){
                    return <button onClick={this.appleClick} type="button" className="btn btn-default">
                            <span className="glyphicon glyphicon-apple"></span>
                            </button>
                }
            });

Snippet to render my component with the apple button:

React.render(<div className="jumbotron"><Headline hovertext="Goodbye!"> Hello World! <AppleButton/></Headline></div>, document.getElementById('content-col'));

Not too shabby right? Check it out here.