## Components

This byte assumes you have created an application using `create-react-app`.

Elements are the most granular building blocks in React. However, the main building blocks in React are called **components**.

A component is most simply described as a part of a user interface. In React, instead of building an entire page, we break the page and the entire application down into smaller, reusable pieces, and think about them in isolation.

In practice, a component is a JavaScript function, which returns a React element.

Lets turn the current Hello World element in the boilerplate into a component.

First, let's change the content inside our `App.js` component `src/components/app.js`, enter the following code:

import React from 'react';

const App = () => <h1>Hello World</h1>;

// The above utilises an implicit return, which is a feature of arrow-functions.
// It is the same as this:
// const App = () => {
//  return <h1>Hello World</h1>;
// }
// or this:
// function App() {
//   return <h1>Hello World</h1>;   
// }

export default App;

This is our first React component.

N.B. the `export default` statement is just a newer version of `module.exports`

The juicy part here is the line `const App = () => <h1>Hello World</h1>;`

As we said, this is a function, which returns a React element.

## Rendering Components

We can render components in React using JSX, just like we can with any element.

Update your `src/index.js` file from this:

import 'raf/polyfill';
import React from 'react';
import { render } from 'react-dom';

render(<h1>Hello World!</h1>, document.getElementById('root'));

import 'raf/polyfill';
import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

render(<App />, document.getElementById('root'));

Here, instead of rendering the plain React element, we are rendering the `App` component.

By convention - elements (`div`, `h1` etc.) are all lowercase, whereas React components begin with a capital letter (`App` instead of `app`).

Being able to render and use components in this way is the great power of React. We can go and update the `App` component in any way we like, without having to change it at this top level.

Additionally, we could render different components inside of our `App` component, so it might look something like this (this is an example - it won't work as you don't have the actual components):

const App = () => (
  <div className="app">
    <NavBar />
    <SideBar />
    <Articles />
    <Footer />
  </div>
);

Each of the sub-components in App could also be made up of smaller components. Working in this way makes our code cleaner and more focussed - each component can have a clearly defined responsibility - and it also allows you to re-use code. Assume you were making a website with lots of lists - you could create a single `<List />` component, and reuse the same markup throughout the site, without having to repeat yourself. Any changes you wanted to make to how the list looks or functions would be done from a central place.