What is a React component?

A React component is your building block when writing code. A react app, no matter how big or large, is just a bunch of different components that has been put together.

On a technical level, a component in React is a function that returns JSX. That's the most basic way to look at it. It goes like this:

1. You call/use/execute a component.
2. The component execute all the code inside of itself, and JSX is the end result.
3. The JSX is returned from the component, and React will compile the JSX to HTML and render it on a page.

Let's create our first React component

// App.js

const App = () => {
  return (
    <div>
      <div>This component is called App</div>
    </div>
  );
};

export default App;

This is a very basic component, inside the file App.js. Let's break it down:

The first part:

const App = () => {

This is just like a regular JavaScript (JS) arrow function. The only difference is that the first letter of a component has to be capitalized. That's how React knows to treat the function as a component.

The second part:

return (
    <div>
      <div>This component is called App</div>
    </div>
  );

The same as a regular function, you can return something. Here, we return JSX code, which will eventually gets compiled to HTML and then rendered. This is just a simple div tag with the text "This component is called App".

And the last part:

export default App

This is the ES6 export functionality. We export a function, so that it can be imported and used in other files. We simply write "export default" followed be the name of the component.

Now, let's create another component, called Header.js:

// Header.js
const Header = () => {
  return <h1>This is the header</h1>;
};

export default Header;

Now that we have two components, let's try to combine them!:

// App.js

import Header from "./Header";

const App = () => {
  return (
    <div>
      <div>This component is called App</div>
      <Header />
    </div>
  );
};

export default App;

This is almost the same component as last time, except 2 differences:

• First, we import the Header component into the App.js file.
• Secondly, we call that imported Header component. We call a component by adding a self-closing tag around it.

This is the basics of how we combine components together in React and build a webpage. Now you could add as many components as you want. For example, if we added "Navigation", "Article" and a "Footer" components, we would basically have a web page ready!

Before we move on, let's see another way of building that component:

// App.js

const App = () => {
  return (
    <div>
      <div>This component is called App</div>
      <h1>This is the header</h1>
    </div>
  );
};

export default App;

This component will render the exact same HTML as the last example above. The only difference is that we use a h1 tag with the text "This is the header", instead of using the component "Header".

Let's add some JS

We can also use JS in our component. Like this:

// App.js

import Header from "./Header";

const App = () => {
  const message = "This component is called App";

  return (
    <div>
      <div>{message}</div>
      <Header />
    </div>
  );
};

export default App;

Here, we use JS to store the string "This component is called App" inside a variable. Then we call it in JSX by using curly brackets.

Why do we use components?

There are many reasons we use components. Here are a few:

• Makes the code easier to read. Instead of having 100 lines of code, we can split up the code into separate components.

• Reusability. We can call a component as many time as we want. If we create good components, then we can use them all over our application.

• Components and UI are a perfect match. We can break down the UI of a website into smaller pieces, such as: Nav, Header, Sidebar, Content, Footer. Then we just make these components, and the website is done. This makes creating web app from design easier for us developers.

// App.js

import Header from "./Header";

const App = () => {
  return (
    <div>
      <div>This component is called App</div>
      <Header />
      <Header />
    </div>
  );
};

export default App;

We can call a component multiple times of we want to. And we can call as many components as we need.

Rules of components

There are some rules we should have in mind when working with components:

• All components first letter must be capitalized for React to know it's a component. Like App.js or Header.js

• All components have a props object attached to it. This is our main way of making components content dynamic.

• At its core, a component is a function that returns JSX.

• It's better to have many small components then a few big components. Make smaller components that have 1 purpose/goal. It will make components more reusable.

Closing

Components are a huge part of React. This is just a simple introduction of the basics, but it will still get you a long way.

As always, if you have any comments, questions or I wrote something wrong, don't hesitate to comment/get in touch.