A simple app with an initial structure of files and code using the technologies described in the name for you to use to create your webapp quickly.
- TypeScript: To type the code and components.
- React: Separate the interface into components.
- Redux: Manage the global state of the application.
- Parcel ❤: to bundle the app but it can be refactored to use other packages, such as the webapack or zero.
- faker: Generate fake data.
git clone https://github.com/httpiago/react-redux-typescript-sample.git
cd react-redux-typescript-sample
yarn install
yarn run start
: Start app on port http://localhost:1234/
.
├── src
│ ├── components // Folder with all the components
│ │ ├── App.tsx // Main component
│ │ ├── Form.tsx
│ │ └ ...
│ ├── store // Folder with all the redux logic
│ │ ├── ducks
│ │ │ └── todos.ts // File with types, action creators and reducer of todos logic
│ │ ├── index.tsx // Combine all reducers and create store
│ │ └── types.tsx
│ ├── index.html
│ └── index.tsx // Main file of the app
├── package.json
├── README.md
├── tsconfig.json // Typescript compiler configs
└ ...
This sample uses Duck Pattern to structure the redux files logic and consequently make the app simpler. Take a look 😉.
Some components use the new Redux hook api, so you can just see how to use them.
MIT