Using Functional Components in React

React components allow programmers to organize the code that we use to render the display of our page and its functionality into independent, modular, reusable pieces.

Each component can be coded alone from the other. This helps programmers think of the application in parts and also helps for updating elements more easily and efficiently when changes need to be made.

There are two main types of components in React:

Class Components
Functional Components

We will be covering functional components mainly and how we use them to make our lives as programmers easier by making them dynamic.

Functional Components

How to write components:

When writing components one must follow 3 rules:

The component must return JSX.
The component takes in one argument called "props", which is an object.
The function component must begin with a capital letter.

Say we have the following javascript:

function Albums() {
  return (
    <div> This a list of your favorite albums</div>
  )
}

Here we can see that the component simply looks like a function whose name begins with a capital letter. However if you notice, a piece of code that looks like HTML is being returned from the function.

This piece of HTML-like code is called JSX.

JSX is code that isn't valid Javascript, it is a syntax extension so a middle step happens before React can run our code. Babel is a package extension of React that works as a transpiler to turn that JSX into javascript that the browser can recognize.

JSX can only return one top level element but you can always add more children, such as another <div> or another <Component />

Using the Components:

function App() {
  return (
    <div>
      <Albums />
    </div>
  )
}

In this code, you can see that App is a component that is using the Albums component that we created earlier.

Because the App component wraps around the Albums component, we can now say that the App component is the "parent" of the Albums component and the Albums component is one of the "children" of the App component.

Dynamic Components

We can make components dynamic by starting to add something called "props" as the argument to the function.

Such as:

function Album(props) {
  return (
    <div>
      {props.title}
    </div>
  )
}

Here we are passing a piece of data (an object) from a different component into a single Album component so that we can use it with the functionality and UI elements created in Album.

** We use {} curly brackets to evaluate a variable or a function when inside JSX **

So here we are evaluating the props object and accessing specifically the key with the title of the album.

Hierarchy of Components

The component that is passing down props to Album is its parent component.

Let's look at the parent component:

function App() {

const title = "Parachutes"
const artist = "Coldplay"

  return (
    <div>
      <Album title=title 
              artist=artist/>
    </div>
  )
}

Here we can see that the title is being passed down to the component through what looks like an attribute of an HTML element. This is how the data gets passed from a parent component to a child component.

More On Dynamic Components

Because components are reusable, we can add multiple ones inside another component.

Such as:

function Albums() {
  return (
    <div>
      <Album />
       <Album />
        <Album />
    </div>
  )
}

But a better way to do this would be to do it dynamically:

function Albums(props) {
   const albumList = props.albums.map(albumObj => <Album key={albumObj.id} album={albumObj} />)

    return (
        <div>
            {albumList}
        </div>
    )
}

Here we are using the map function to map through an array of albums (props.albums) that was passed down through props from another component and then creating a new component of Album for each of those array elements.

If you notice, when we map the array, we are passing a key attribute to each Album component. This is a unique identifier that distinguishes each component from the rest, such as its object id. This is necessary, otherwise, React will through a warning about it, saying that each Component should be distinct/unique.

Final tip:

The only downside of props is that they can only be passed from a parent component to a child component, so plan out the hierarchy of your components before beginning to code your application. For passing data from child to parent, you can use state in the parent component and manipulate it from the child component by passing the set state function in the props.