Creating React Components

Creating React components is a fast and easy process, no different than declaring other JavaScript variables. They can be either JavaScript functions or JavaScript classes.

Where do I create React components?

If you haven’t created a React app yet, check out our Hello World tutorial.

You can create React components anywhere in your App that you want. Typically though, it’s best practice to create React components in their own files and export them for use in other files that need them.

The neat thing about creating React components is that they now become essentially your own custom HTML tags that you can use with the rest of your JSX. You can now “render”, or place this tag within another React component, for example <Hello/>.
Your React component name must start with a capital letter.

Once created, the component can be “rendered” or placed within any JSX block in your existing React app. You can either close the tag off, or you can open the tag and add children components to this tag. You can also write out this JSX component and store it in another variable, and then render it by reference it inside curly braces inside your React app. More on that shortly.

1 Functional Components

As the React docs tell us, “The simplest way to define a component is to write a JavaScript function”. This is a normal JavaScript function except that it returns a JSX React element. JSX, if you’re not familiar, is just a special type of HTML that is adapted for JavaScript.

function Banner(){
  return <div> Hello World </div>;
}

2 Creating components with styled-components

So how do we style our new React component? Well, there are 3 ways to style a component as well. You can inline style, like so:

function Banner(){
  return <div style={{border: '1px solid red'}}> Hello World </div>;
}

You can also add a CSS class with the className attribute, which is the JSX alias for the HTML class attribute. We can’t type class because its already a reserved word in JS. Anyway, adding a CSS class looks like this:

function Banner(){
  return <div className="border-red"> Hello World </div>;
}
// App.css
.border-red {
  border: 1px solid red; 
}

The third way is our favorite, which is to use styled-components. Here, we don’t need to add any CSS files or classNames, we just define the CSS directly in the component definition. Check out our full guide on styled-components. First you have to install styled-components.

// In your terminal first type: yarn add styled-components
// Then you can import it like so: 
import styled from 'styled-components'
// Here you can see we are using the backtick ` (not ') to define the style block. 
const Banner = styled.div`
  border: 1px solid red; 
` 

3 Class components

Before React Hooks, Class components were the recommended way of creating React components with full life-cycle methods and state. This uses the ES6 Class methods. Here is an example of a class component:

import React from 'react'
class Banner extends React.Component {
  render(){
    return <div> Hello World </div> 
  }
}
 

Class components are not deprecated and will continue to live on for the foreseeable future, so they are important to learn.

Now that we know how to create React components, let's make them render dynamically with props.