Getting Started with React-TypeScript App with Redux & Tailwind CSS

CONTENTS

• Getting Started with React-TypeScript App with Redux & Tailwind CSS
  • CONTENTS
  • How To Run This Project
  • Version Notes
  • FAQ: Difference between npm install & npm ci
  • Description of Folder Structure
  • Description of Component Rendering Hierarchy
  • How to Create a Similar Project By Yourself
    • Step-1: Command for Creating TypeScript-React App
    • Step-2: Installation Command for Different Packages
    • Step-3: Create Root Reducer
    • Step-4: Create Root Epic
    • Step-5: Create Redux Store
    • Step-6: Connect Redux-store with App
    • Step-7: Connect BrowserRouter with App
    • Step-8: Setup Routing of different component
    • Step-9: Backend API integration
  • How to Dockerize React App

How To Run This Project

1. Clone this repository git clone https://github.com/mukitul/react-learning-app-with-redux.git
2. Run cd react-learning-app-with-redux
3. Run npm ci [It will install exact version of required libraries and store in node_modules folder]
4. Run npm start
5. Project will be launch here : http://localhost:3004

Version Notes

• React v18, Router v6, TypeScript v4

FAQ: Difference between npm install & npm ci

npm ci

• This command installs exact version of the dependencies mentioned in the package-lock.json file.
• This command requires the existence of a package-lock.json and would print an error if it wasn't there.
• This command will produce an error when number of dependencies in package-lock.json and package.json are out of sync.

npm install / npm i

• This command installs latest/updated dependencies and overwrite package.json and package-lock.json file.
• This unknown behaviour may cause project to run using different version of dependencies across different machines.

Description of Folder Structure

src
|
|-- api-client (axios setup and intercepting related)
|
|-- components (all tsx files i.e. components - layouts,screens,pages,header,footer,)
|
|-- environment (production or staging related configuration)
|
|-- interface (data-type definition of state/different objects)
|
|-- redux-store (redux setup - epic, reducer, store)
|
|-- service (api call to backend services)
|
|-- utils (helper-functions, constants are here)   

Description of Component Rendering Hierarchy

                     index.html
                         |
                         |
                      index.tsx
                         |
                         |
                       App.tsx
                         |
                         |
                   MainLayout.tsx  
(MainLayout renders differnt screen-component as {children} 
      according to route setup | screen-component 
        renders sceen specific page-components)
                         |
                         |
        ----------------------------------
        |                |               |
HeaderComponent.tsx  {children} FooterComponent.tsx

How to Create a Similar Project By Yourself

Step-1: Command for Creating TypeScript-React App

npx create-react-app your-app-name --template typescript

Step-2: Installation Command for Different Packages

Packages and installation command required for bootstrapping similar project -

npm install axios

npm install history

npm install redux react-redux

npm install redux-devtools-extension

npm install rxjs

npm install redux-observable

npm install @reduxjs/toolkit react-redux

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Official Guide for Tailwind Setup: https://tailwindcss.com/docs/guides/create-react-app

Step-3: Create Root Reducer

Example: rootReducer.ts

Step-4: Create Root Epic

Example: rootEpic.ts

Step-5: Create Redux Store

Example: AppReduxStore.ts

Step-6: Connect Redux-store with App

Example: index.tsx

Step-7: Connect BrowserRouter with App

Example: index.tsx

Step-8: Setup Routing of different component

Example: App.tsx

Step-9: Backend API integration

You will found fake store api here: https://fakestoreapi.com/docs

How to Dockerize React App

Comming soon on my blog: https://mukitul-islam.blogspot.com/