Start with the button component

The React application created by create-react-app has a single component, App. CodeSandbox keeps it in src/index.js.

As I mentioned one of the main building blocks of the application is a button.

We’re going to have 4 of them, so it makes perfect sense to separate that, and move it to its own component:

const Button = () => {

}

The component will render a button:

const Button = () => {
  return <button>...</button>
}

and inside of this button we must show the number this button is going to increment our count of. We’ll pass this value as a prop:

const Button = props => {
  return <button>+{props.increment}</button>
}

Notice how I changed the function signature from const Button = () => {} to const Button = props => {}. This is because if I don’t pass any parameter, I must add () but when I pass one single parameter I can omit the parentheses.

Now add import React from 'react' on top, and export default Button at the bottom, and save this to src/components/Button.js. We need to import React because we use JSX to render our output, and the export is a way to make Button available to components that import this file (later on, App):

import React from 'react'

const Button = props => {
  return <button>+{props.increment}</button>
}

export default Button

Our Button component is now ready to be put inside the App component output, and thus show on the page.

---

Go to the next lesson