- 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
- Clone this repository
git clone https://github.com/mukitul/react-learning-app-with-redux.git - Run
cd react-learning-app-with-redux - Run
npm ci[It will install exact version of required libraries and store in node_modules folder] - Run
npm start - 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.jsonfile. - This command requires the existence of a
package-lock.jsonand would print an error if it wasn't there. - This command will produce an error when number of dependencies in
package-lock.jsonandpackage.jsonare out of sync.
npm install / npm i
- This command installs latest/updated dependencies and overwrite
package.jsonandpackage-lock.jsonfile. - 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/