DEV Community

Cover image for Setup ReactJs + TS + Styled-Componets + Redux
Shubham Sharma
Shubham Sharma

Posted on

Setup ReactJs + TS + Styled-Componets + Redux

Intro

In this blog tutorial, we will see how we can setup a ReactJs project with Typescript, styled-components and redux toolkit.

ReactJs

React is a popular open-source JavaScript library for building user interfaces. React allows developers to build reusable UI components that can be used to create complex user interfaces. React uses a declarative syntax and a virtual DOM to efficiently update the UI when data changes. React can be used for both client-side and server-side rendering and can be integrated with other libraries and frameworks.

Typescript

TypeScript is a programming language and a typed superset of JavaScript that adds optional static type checking, classes, interfaces, enums, and other features to JavaScript. TypeScript can help improve code quality and maintainability, catch errors at compile time rather than at runtime, and provide better tooling and editor support for large codebases. It is widely adopted in the industry for building scalable and maintainable applications.

Styled-components

Styled Components is a popular open-source library for styling components in React applications. It allows developers to write CSS code as part of their component code using a unique syntax that is similar to regular CSS but is scoped to the specific component. This allows for easy and efficient styling of components and helps to avoid naming conflicts and specificity issues. Styled Components also support dynamic styles based on props and theming.

Redux-toolkit

Redux Toolkit is an official opinionated collection of utilities and best practices designed to simplify the development of Redux applications. It includes pre-configured tools that help developers write clean, concise, and maintainable Redux code. Redux Toolkit provides an easy-to-use API for creating Redux slices, which are small, self-contained pieces of the Redux store that manage a specific piece of state and associated logic.


Prerequisites

  1. Ensure that Node.js is installed on your machine. If it is not installed, you can download and install it by clicking here.
  2. Now you need a package manager, either npm or yarn, npm comes by default with node installation. You can install yarn by writing this in your bash or shell.
#for windows
npm i -g yarn

# for macOs/linux
sudo npm i -g yarn
Enter fullscreen mode Exit fullscreen mode

Creating react app with vite

npm create vite
#or 
yarn create vite
Enter fullscreen mode Exit fullscreen mode

React Js, typescript, react-redux, styled-components

React Js, typescript, react-redux, styled-components

React Js, typescript, react-redux, styled-components

React Js, typescript, react-redux, styled-components

React Js, typescript, react-redux, styled-components

cd project-name
Enter fullscreen mode Exit fullscreen mode
yarn
yarn dev
Enter fullscreen mode Exit fullscreen mode

or

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Now we are done with the installing ReactJs with Typescript

The folder structure should look like this for now

Folder structrue

Now We are going to delete App.css and index.css,

Installation and setup of styled-components

Now let's install styled-components. So to install styled-components you need to write.

yarn add styled-components
Enter fullscreen mode Exit fullscreen mode

We will be creating components, pages and a styles folder inside src.

components will be for writing reusable components.
pages directory contains the main pages of the application
styles gonna contain the styles of components and pages

├── src/
│ ├── assets/
│ ├── components/
│ ├── pages/
│ ├── styles/
│ │ ├── global.ts
│ │ └── theme.ts
│ ├── App.tsx
│ └── main.tsx
│ └── vite-env.d.ts
Enter fullscreen mode Exit fullscreen mode

global.ts is going to contain global styles for web-app and the theme.ts will contain the variables that we can use in writing style.

// theme.ts

export const theme = {
  colors: {
    primary: '#f1faee',
    secondary: '#457b9d',
    tertiary: '#a8dadc',
    background: '#1d3557',
    text: '#f1faee',
    primaryTextColor: '#594F43',
    secondaryTextColor: '#777777',
    inputPlaceholder: '#C7C7C7',
    darkGrayText: '#303030',
    darkText: '#f1faee',
    black: '#000000',
    white: '#ffffff',
  },
  paddings: {
    container: '15px',
    pageTop: '30px',
  },
  fonts: {
    xs: '0.8rem',
    sm: '0.9rem',
    base: '1rem',
    md: '1.2rem'
  }
};

Enter fullscreen mode Exit fullscreen mode
// global.ts

import { createGlobalStyle } from 'styled-components';

type ThemeType = {
  colors: Record<string, string>;
}

export const GlobalStyles = createGlobalStyle<{theme: ThemeType}>`
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1;
  background-color: ${({ theme }) => theme.colors.background};
  color: ${({ theme }) => theme.colors.text};
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
figure,
blockquote,
dl,
dd {
  padding: 0;
  margin: 0;
}
button {
  border: none;
  background-color: transparent;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
li {
  list-style-type: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#root {
  min-height: 100vh;
}
`;

Enter fullscreen mode Exit fullscreen mode

after this, you need to add this to your main.ts

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { GlobalStyles } from './styles/global';
import { theme } from './styles/theme';
import { ThemeProvider } from 'styled-components';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <GlobalStyles />
            <App />
        </ThemeProvider>
    </React.StrictMode>,
);
Enter fullscreen mode Exit fullscreen mode

Installation and setup of redux for state management

Now we need to install redux,

yarn add @reduxjs/toolkit react-redux
Enter fullscreen mode Exit fullscreen mode

We will be creating another folder store inside src, so our new src will look like

├── src/
│ ├── assets/
│ ├── components/
│ ├── pages/
│ ├── styles/
│ │ ├── global.ts
│ │ └── theme.ts
│ ├── store/
│ │ ├── actions/
│ │ ├── reducers/
│ │ └── index.ts
│ ├── App.tsx
│ └── main.tsx
│ └── vite-env.d.ts
Enter fullscreen mode Exit fullscreen mode

And this store is going to contain the code related to state management of the web application.

store/index.ts

/* The code is taken from redux toolkit website */
import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
    // reducers.
  },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

Enter fullscreen mode Exit fullscreen mode

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { GlobalStyles } from './styles/global';
import { theme } from './styles/theme';
import { ThemeProvider } from 'styled-components';
import { store } from './store';
import { Provider } from 'react-redux';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <Provider store={store}>
        <App />
      </Provider>
    </ThemeProvider>
  </React.StrictMode>,
);

Enter fullscreen mode Exit fullscreen mode

That's all.

If you have any question, drop a comment below.

Shubham

Top comments (0)