In this lesson, we'll learn about the fundamentals of building and utilizing components in React. By utilizing what's known as components, we can easily break up our UI into modular pieces of code that we can reuse in multiple places.

• Fork and Clone the repository
• cd into our newly created directory
• npm install to install our dependencies
• npm start to spin up our app

By John Kagga

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

From Educative.io:

React components let you break up the user interface into separate pieces that can then be reused and handled independently. A React component takes an optional input and returns a React element which is rendered on the screen. A React component can be either “stateful” or "stateless."

In summary, a React component is a function or class that can recieve or handle some kind of information (props/state) and give us back an interactive element in the DOM.

During our first lesson with React, we utilized the React library to create a simple button that incremented some kind of counter. In that lesson we saw two ways of writing a component:

• class based components
• function based components

Class components are an older method of writing components. Although we won't be using them during this course, they are important to familiarize yourself with.

Pros

• declarative and strict syntax
• individual methods to control the behavior of the component
• one method used to control state

Cons

• tons boiler plate code in order to get set up
• many methods that are all used for one thing

Function components were always a popular way of writing of writing components and typically used to build UI elements that were controlled by a class component. With the release of React hooks, we are now able to write all of our components using only the function syntax and manage some kind of state at the same time.

Pros

• easier to set up
• less boilerplate code
• no more confusion on which component should handle logic (for newer developers)

Cons

• most methods now perform more than one thing to control our components behavior
• looser syntax can lead to more bugs
• can cause confusion when writing other functions inside of the component

Now that we've talked about different kinds of components, it's time to actually write one!

Throughtout this course, we'll be using function based components. Lets start with a basic skeleton of what a function based component would look like:

const App = () => {

  return (
    <div></div>
  )
}

In your code editor, let's create a folder called components inside of the src folder. All of the code you write will always go in the src folder.

Inside of the components folder, create a file called Button.js.

Pay special attention to the casing of the file name, all component files will use the PascalCased convention.

Some developers prefer to use the .jsx extension for component files as it can give better syntax highlighting and fancy file icons. .js and .jsx are interpreted the same in a React project. When in doubt consult your employes style guide on which to use.

The import syntax uses the following structure:

import NameForComponent from '../components/FileOfComponent'

Note: This syntax is only used for component files or libraries such as React. When importing stylesheets you do not need a variable name.

Next we'll set up the function for our component. Add the following to Button.js:

const Button = () => {}

Next, we'll return a button element from our Button component:

const Button = () => {

  return (
    <button>Click Me</button>
  )
}

And last step! In order to utilize this component somewhere else in our application, we need to export it:

export default Button

Final Button component:

const Button = () => {

  return (
    <button>Click Me</button>
  )
}

export default Button

Now that we've successfully created a Button component, let's display it in our UI!

Open the App.js file. Add an import statement to the top, this import statement is going to handle bringing in our Button component:

import Button from './components/Button'

Note: You do not need to use file extensions for .js and .jsx files in React when importing!

Next we'll add our Button to the current markup in App.js:

const App = () => {

  return (
    <div>
      <Button />
    </div>
  )
}

Note: Notice the use of () in the return statement! This syntax is used when returning multiple elements from a component! Also, notice how we do not use an opening and closing tag for the component itself. The reason for this is because this component is not set up to use children. We'll talk more about this when we learn about component props.

At this point, check your browser and you should see the following button:

At this point, we should have a beautiful button displayed on our page. What if we wanted multiple buttons? With React, this is pretty straightforward. We can simply add more of the Button component to our markup!

Add the following to the App.js:

const App = () => {
  
  return (
    <div>
      <Button />
      <Button />
      <Button />
      <Button />
    </div>
  )
}

We should now see 4 buttons on our page:

In this lesson, we learned how to:

• Create a component
• How a component is structured
• How to import a component
• How to use a component multiple times

Components are crucial building blocks in React. They allow us to build amazing UI's by reusing most of our code. Gone are the days of writing a button over and over again. By using React, we can create one component and utilize it multiple times. Our current button although simple, is a critical foundation going forward.

• React Components
• Understanding React Components