Eric Simons
Outline
What we're going to make
Usually the simplest example of anything programming related is an implementation of “Hello World” which, for those who are unfamiliar, is meant to be a greeting to all people on earth. Lets not do that. Instead, lets take a cue from the brilliant mind of Sun Tzu (“Keep your friends close but enemies closer”) and the very eloquent rapper Chamillionaire: lets share a warm “hello" with our “haters”.
How we're going to make it
To do this, we’ll create a React component <Hello /> that outputs a DIV that looks like this: <div>Hello, haters!</div>. But how does a custom React component like <Hello /> transform into a real HTML element like our DIV?
React’s render method
The answer is React’s render method, which essentially just spits out any HTML that you tell it to (as long as it’s all contained in one parent HTML element). In fact, the simplest React component you could possibly write is just a render method that outputs a single HTML element (which is exactly what we’re about to do).
You may have heard that React uses what’s called a “Virtual DOM”, which basically means it manages and programmatically updates every single DOM node in your component. Thus, React must be fully aware of all DOM nodes that your component consists of, and it does so by creating & tracking those nodes for you. What this means is that you can’t just write your desired HTML as you normally would, as React won’t be able to parse it. Instead, React has a method called createElement that is used to define the DOM nodes you want to output. For example, this is what our <Hello /> component’s code would look like:
var Hello = React.createClass({
render: function () {
return (
React.createElement('div', null, 'Hello, haters!')
);
}
});
Right now you’re probably like
because that code looks super weird compared to how we normally write HTML. The good news is that you’re not the first to realize this, and some brilliant folks have created a solution called JSX.
JSX
JSX allows you to write regular old HTML that then gets processed down into createElement’s. This is what our code looks like when we use JSX:
var Hello = React.createClass({
render: function() {
return <div>Hello, haters!</div>;
}
});
Not only does this code look significantly cleaner, but it also allows us to use multiple lines, enter arbitrary strings, and allow for better readability of our code. There is one “gotcha” when using JSX though — it needs to be transformed before it can run (aka turn our elements into React.createElements), otherwise the browser will throw errors. This is typically done with a JSX transformer extension for Gulp or Grunt, but there is also a transformer available that will do it in the browser on runtime. You should never use the in-browser transformer in production environments as it will significantly slow down your rendering speeds. However, for the sake of this introductory course, I’m hosting all of the examples in an online sandbox you can modify which requires the in-browser version.
Create the hello world component
Using the completed code of our <Hello /> component above, lets make it actually appear on the screen. To do this, we’ll need to attach this React component to an existing DOM element on the page. It’s recommended that you don’t attach any React components to the <body> element, so typically you’ll want to create a DIV and then retrieve it with document.getElementById. Then we can use React’s DOM helper library to render our component to our desired DOM node. Specifically, we’ll call ReactDOM.render and pass along the <Hello /> component as well as the DOM node for our DIV with ID container:
ReactDOM.render(<Hello />, document.getElementById('container'));
You can view the running code here!
It’s worth noting that we could get the same exact output by only having the following:
ReactDOM.render(<div>Hello, haters!</div>, document.getElementById('container'));
However, by abstracting our DIV into the <Hello /> component, we can reuse it over and over in our application — and if we ever need to make a change to the <Hello /> component, everything that includes it will automatically be using the updated component.
A concrete use case might better illustrate how amazing this is. For example, Facebook uses the comment box on many parts of their site: photos, posts, life events, etc. Imagine if they had to manage all of the functionality of those comment boxes separately - whether it’s validating the text the user entered, watching for the enter key to be pressed, submitting the data to the server, or any of the other dozens of small functionality bits it requires. By using React, Facebook can have just one <Comment /> component that every photo, post, etc can repeatably include — and if they ever need to change how comments work in all parts of their product, they only have to change the code for that one component instead of dozens of different files.
That, my friends, is the power of React. There’s much more to learn, so keep following along!