Implementing a functional component to render a piece of UI

Everything we’ll do in React will revolve around components. There are different types of components that we can use, and we’re going to start with the simplest type, the Functional Component. Simply put, we can use basic functions as components. These functions will simply return out some sort of JSX, which will then be rendered out to the Browser.

Our most basic of components looks like this. It looks exactly like an anonymous arrow function that we’ve named BasicComponent. In fact, that is literally what this is.

const BasicComponent = () => <h1>Hello World</h1>;

1. Create a wrapper element App and pass it in to ReactDOM.render

const App = () => (
  <div>
   // Our components go in between these parent div tags
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

2. Build out some reusable functional components

const Header = () => {
  return <h1>Hello From React</h1>;
};

const BasicInput = () => {
  return <input type="text" placeholder="Change the world, one input at a time" />;
};

const BasicButton = () => {
  return <button>Click me I'm a button!</button>;
};

3. Pass the components into our wrapper <App/> component and Capitalize the Components

const App = () => (
  <div>
    <Header />
    <BasicInput />
    <BasicButton />
  </div>
);

Challenge

Build out a few pieces of composed components from scratch.

This is a React Cheat Sheet and here is another.