The Complete Introduction to React


The term "component" is used by many other frameworks and libraries. We can even write web components natively using HTML5 features like custom elements and HTML imports.

Components, whether we are working with them natively or through a library like React, have many advantages.

First, components make your code more readable and easier to work with. Consider this UI:

HTML-Based UI

<a href=”http://facebook.com”> <img src=”facebook.png” />
</a>

What does this UI represent? If you speak HTML, you can parse it quickly here and say, “it’s a clickable image.” If we’re to convert this UI into a component, we can just name it ClickableImage!

When things get more complex, this parsing of HTML becomes harder so components allow us to quickly understand what a UI represent using the language that we’re comfortable with. Here’s a bigger example:

<TweetBox> <TextAreaWithLimit limit="280" /> <RemainingCharacters /> <TweetButton />
</TweetBox>

Without looking at the actual HTML code, we know exactly what this UI represents. Furthermore, if we need to modify the output of the remaining characters section we know exactly where to go.

React components can also be reused in the same application and across multiple applications. For example, here’s a possible implementation of the ClickableImage component:

ClickableImage Render Function

const ClickableImage = ({ href, src }) => { return ( <a href={href}> <img src={src} /> </a> );
};

Having variables for both the href and the src props is what makes this component reusable. For example, to use this component we can render it with a set of props:

<ClickableImage href="http://google.com" src="google.png" />

And we can reuse it by using a different set of props:

<ClickableImage href="http://bing.com" src="bing.png" />

In functional programming, we have the concept of pure functions. These are basically protected against any outside state; if we give them the same input, we’ll always get the same output.

If a React component does not depend on (or modify) anything outside of its definition (for example, if it does not use a global variable) we can label that component pure as well. Pure components have a better chance at being reused without any problems.

We create components to represent views. For ReactDOM, the React components we define will represent HTML DOM nodes. The ClickableImage component above was composed of two nested HTML elements.

We can think of HTML elements as built-in components in the browser. We can also use our own custom components to compose bigger ones. For example, let’s write a component that displays a list of search engines.

const SearchEngines = () => { return ( <div className="search-engines"> <ClickableImage href="http://google.com" src="google.png" /> <ClickableImage href="http://bing.com" src="bing.png" /> </div> );
};

Note how I used the ClickableImage component to compose the SearchEngines component!

We can also make the SearchEngines component reusable as well by extracting its data into a variable and designing it to work with that variable.

For example, we can introduce a data array in a format like:

const data = [ { href: "http://google.com", src: "google.png" }, { href: "http://bing.com", src: "bing.png" }, { href: "http://yahoo.com", src: "yahoo.png" }
];

Then, to make <SearchEngines data={data} /> work, we just map the data array from a list of objects into a list of ClickableImage components:

const SearchEngines = ({ engines }) => { return ( <List> {engines.map(engine => <ClickableImage {...engine} />)} </List> );
}; ReactDOM.render( <SearchEngines engines={data} />, document.getElementById("mountNode")
);

This SearchEngines can work with any list of search engines we give to it.