A Simple App with TypeScript, React and Styled Components - Part 1: setting up the tools

this series of tutorials, we are going to create a simple web applications using 3 technologies:

• TypeScript as our language of choice
• React will be our framework to develop our app
• Styled Components to manage styling with CSS-in-JS

The aim is to learn the basics of these tools and have you write your own application in no time.
Let's see what you'll need to get started.

Prerequisites

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 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 and Babel(configured to compile TypeScript), as well as web-vitals.
All of this in a single command!

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

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:

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:

npm i styled-components

Then, we install the styled-components types for TypeScript:

npm i --save-dev @types/styled-components

Read more about these types at: https://github.com/DefinitelyTyped/DefinitelyTyped.

We've just installed the styled-components declaration file. 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:

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:

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:

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