Show the interface

This is the App component at this point, stored in the file src/index.js:

import React from "react"
import ReactDOM from "react-dom"

import "./styles.css"

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

A note on semicolons: I don’t use semicolons, I think the resulting code is cleaner, and they don’t really make any difference in 99.9% of the cases. You can still use them if you prefer.

Let’s remove all that’s inside the div rendered by App.

import React from "react"
import ReactDOM from "react-dom"

import "./styles.css"

function App() {
  return (
    <div className="App">
    </div>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

We now import the Button compnent from the Button file:

import Button from './components/Button'

and we can now use Button inside our App component, and thus show on the page:

function App() {
  return (
    <div className="App">
      <Button />
    </div>
  )
}

We pass the increment prop to it, so it can show that value inside the button text:

function App() {
  return (
    <div className="App">
      <Button increment={1} />
    </div>
  )
}

You should now see a button showing up in the page, with a +1 text on it.

Let’s add 3 more buttons:

function App() {
  return (
    <div className="App">
      <Button increment={1} />
      <Button increment={10} />
      <Button increment={100} />
      <Button increment={1000} />
    </div>
  )
}

and finally we add a counter, which our buttons will increment when clicked.

We store the counter result in the count variable, which I declare as a let (see here for more info on let if you are unfamiliar with it).

We then print this variable in the JSX:

function App() {
  let count = 0

  return (
    <div className="App">
      <Button increment={1} />
      <Button increment={10} />
      <Button increment={100} />
      <Button increment={1000} />
      <span>{count}</span>
    </div>
  )
}

---

Go to the next lesson