Creating Function-Based Components

Learn about the function-based components for the header of our app.

We'll cover the following

Creating a Header component
- Test yourself

In this section, we are going to start by creating a component for the header of our app, which will contain our app name and the ability to search for questions. Then, we’ll implement some components so that we can start to build the home page of the app, along with some mock data.

Creating a Header component

We can create a basic Header component and reference it within our App component by carrying out the following steps:

Create a new file called Header.tsx in the “src” folder.
Import React into the file with the following import statement:

Get hands-on with 1200+ tech skills courses.

Introduction

Getting Started

Creating Decoupled React and ASP.NET 5 Apps

Building a Frontend with React and TypeScript

Styling React Components with Emotion

Routing with React Router

Working with Forms

Managing State with Redux

Interacting with the Database with Dapper

Creating REST API Endpoints

Improving Performance and Scalability

Securing the Backend

Interacting with RESTful APIs

Adding Automated Tests

Configuring and Deploying to Azure

Implementing CI and CD with Azure DevOps

Conclusion

Creating Function-Based Components

Creating a Header component