Analytics Integration with TypeScript, React and Styled Components - Part 1: Setting up the Tools
Published: 2022-12-05 08:13:41

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gej9hpsbiplwl9p0g5as.png)

In this series of tutorials, we are going to create a simple web applications using 3 technologies:
- [TypeScript](https://www.typescriptlang.org/) as our language of choice
- [React](https://reactjs.org/) will be our framework to develop our app
- [Styled Components](https://styled-components.com/) to manage styling with CSS-in-JS

We will learn how to track user actions in the app using Google Analytics 4. We'll also use the [Web Vitals](https://github.com/GoogleChrome/web-vitals) library to measure and send the app's performance data to GA4.

The aim is to dive into the basics of modern front-end workflows, and how they integrate with Google Analytics.

# Prerequisites

In this first part of the tutorial, we'll learn how to set up the basic tools for this application.

To do this tutorial you'll need:
- your command line tool of choice
- node, npm and npx installed on your computer. At the time of writing I'm using node 16.11.0, npx 8.0.0 and nvm 0.39.1.

I'm also using VSCode and the Git bash command line, but you can use whatever command line and code editor you prefer.

# Creating a new React app with TypeScript

The first step is to use [`create-react-app`](https://create-react-app.dev/) to generate a simple application as a starting point. `create-react-app` spares us the work of configuring several build tools, and makes our life easier. Among many others, it will automatically set up [Webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/)(configured to compile TypeScript), as well as [web-vitals](https://github.com/GoogleChrome/web-vitals).
All of this in a single command!

Go to the folder where you want you application to live, then type the below in your command line:

```jsx
npx create-react-app my-react-ts-app --template typescript
```

That's it ! Your application now lives in a new folder called `/my-react-ts-app`. You'll notice a few configuration files already in place such as `package.json` and `tsconfig.json`. You also have the source files for the application itself already in place in the `/src` folder.

Start your application by typing:

```bash
npm start
```

# Install Styled Components for TypeScript

The next step is to add Styled Components to our apps. Start by installing the styled-components library:

```bash
npm i styled-components
```

Then, we install the styled-components types for TypeScript:
```bash
npm i --save-dev @types/styled-components
```
Read more about these types at: [https://github.com/DefinitelyTyped/DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped).  

We've just installed the styled-components [declaration file](https://medium.com/jspoint/typescript-type-declaration-files-4b29077c43). Ready to go!



# Add a new styled component

Now we'll create a very basic style component, with conditional styling. Create a new file called `Heading.tsx` with the following content:

```typescript
import styled from 'styled-components';

export const Heading = styled.h1<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

export default Heading;
```

This will create a new `<h1>` component class that takes a boolean prop called `active`, If `active` is set to `true`, we set header's color to blue, otherwise we'll paint it red.

Let's test it: go to App.tsx and copy the below content:

```typescript
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Heading from './Heading';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Heading active={false}>My Heading</Heading>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}


export default App;
```

We've imported the `Heading` component class, and inserted a heading with `active` set to `false`.
Here's what the result should look like:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qwc25xcg5m42qcmw16b.png)

Well done! You're ready to build your React application in TypeScript using Styled Components!