React, a gentle introduction.
What is React?
What makes React different?
Using React you simply express how your app should look based on your data at any given point in time. When your data changes React handles automatically all the UI updates, saving you from imperatively manipulate the DOM. Which makes React very simple and declarative.
Since it’s not viable for performance reasons to actually trash and re-render the entire interface every time state data changes, React uses a fast, in-memory and lightweight representation of the DOM called virtual DOM. React basically uses a very optimized diff algorithm that compares the virtual DOM of the current and the previous state. The difference between them is what actually needs to be changed in the real DOM and React computes the most efficient DOM mutation for you.
React is all about components.
Components are the core of React and the view to your application. They are encapsulated and composable, you can mix and match them to build complex UIs favoring code reuse and separation of concerns.
The other key point of React that makes it compelling is that implements one-way reactive data flow. This simplifies the mental model, it’s easier to reason about than traditional data binding, and makes your app more predictable.
Hello World please!!!
For getting started we will create the canonical Hello World example using React by undertaking the following steps:
- Create a new file and call it hello-world.html.
- Paste the following code in it:
3. Open hello-world.html in a browser and you should see something similar to the next image:
To get a clear picture of what’s going on we need to understand React’s building blocks and terminology. Just like the DOM is a tree of nodes, React’s virtual DOM is a tree of React nodes (ReactNode).
A ReactNode is a building block for a virtual DOM and can be either:
- ReactElement: This is the primary type in React. It’s a light, stateless, immutable, virtual representation of a DOM element.
- ReactText: This is a string or a number. It’s a virtual representation of a Text Node in the DOM.
- ReactFragment: This is an array of ReactNode elements.
That being said, we can explain the example. The ReactDOM.render method takes three parameters: a ReactElement, a regular DOMElement, and a callback function:
ReactDOM.render(ReactElement, DOMElement, callback);
The ReactElement is the root element in the tree of ReactNodes that you have created, the regular DOMElement is a container DOM node for that tree, and the callback is an optional function executed after the tree is rendered or updated, is not used in the example.
The React object is the entry point to the React library. As you may notice it has a method createElement that creates a ReactElement and takes three parameters: type, props and children:
React.createElement(type, props, children);
Let’s take a closer look at each parameter.
The type parameter.
The type parameter can be either:
- String: could be an HTML tag name such as div, p, span, and so on. React support all the common HTML tags and attributes.
- ReactClass: is created via React.createClass method, basically a custom component.
In our example we are rendering a h1 tag, we also can achieve the same result using the built-in factories provided by the React.DOM object:
React.DOM.h1(null, 'Hello, World!!!')
To see a full list of the factories provided, open the console on your browser in the tab that you have the example opened and type:
Press Enter and you’ll find something like this:
The props parameter.
style: 'background: red, color: white, font-family: Verdana'
Let’s see an example that works:
The children parameter.
The children parameter describes what child elements this element should have, if any. A child element could be any ReactNode: a ReactElement, a ReactText or a ReactFragment.
In the hello-world.html example the children we pass in the React.createElement function is a ReactText with “Hello, World!!!”.
Now let’s see a more complex example.
Notice that in the li elements we are providing a special attribute named key that is a requirement for each child in an array or iterator and must be unique in its context.
We can also simplify it a little bit using built-in factories and other tricks.
But imagine a more complex HTML hierarchy and quickly become quite hard to translate it to React code and a nightmare to maintain. How can we simplify this problem?
Meet the controversial JSX.
The previous example using JSX could be written like this:
This is just a little bite of what React can offer you, and I hope you find it useful. In my next post I will cover React components. Don’t miss it!!!