• 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

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

• React v18, Router v6, TypeScript v4

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.

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) 

 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 

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

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

Example: rootReducer.ts

Example: rootEpic.ts

Example: AppReduxStore.ts

Example: index.tsx

Example: index.tsx

Example: App.tsx

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

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