Türkçe | English

React Redux TypeScript Webpack Starter Kit

The Starter Kit is created to guide developers. The Libraries that are used could be customized according to the developer's will. You can quickly develop React projects with TypeScript by using this project structure. You can manage your forms with the Redux-Form library that is used in the project. Textbox and Dropdown are used as samples of using Redux Form.

When you run the project for the first time, you will see the sample screen that's been created before. You can utilize the console in order to access form elements and properties on the screen. https://reqres.in/ REST-API address is used for authentication operations specifically for this example. Upon pressing the login button, the request will be sent to specified endpoint. The login operation is not related to form elements in this example. The request is sent with the user information provided by the api we use.

User Information: { email: '[email protected]', password: 'cityslicka' }

Sample model, api, action, reducer structures were created for login and logout operations.

Webpack was used for the packaging process.

Tech

React, Redux, Redux Form, Webpack, Babel, Typescript, Eslint, Prettier, Husky, Storybook, AntDesign

Ready Structures

• Routing
• Redux Form

Quick Start

git clone https://github.com/yunusunver/react-redux-typescript-webpack-starter-kit.git

npm install
npm run start

Storybook Start

npm run storybook

File Structure

  +---src
  |       +---actions
          |       DemoAction.ts
          |       index.ts
          |       Types.ts
          |
          +---api
          |       index.ts
          |       UserApi.ts
          |
          +---assets
          |   \---dist
          |       \---img
          |               reactIcon.png
          |
          +---components
          |   +---Layout
          |   |       ContentWrapper.tsx
          |   |
          |   \---ReduxForm
          |           FormInput.tsx
          |           FormSelect.tsx
          |
          +---models
          |       ApiBase.ts
          |       index.ts
          |       JsonResponseModel.ts
          |       LoginModel.ts
          |       ResultTypes.ts
          |       Settings.ts
          |       Token.ts
          |
          +---reducers
          |       ConfigureStore.ts
          |       DemoReducer.ts
          |       index.ts
          |
          +---styles
          |       index.scss
          |
          +---utils
          |       ApiHelper.ts
          |       index.ts
          |       StorageHelper.ts
          |
          \---views
              +---Demo
              |       demo.stories.tsx
              |       DemoView.tsx
              |
              \---DemoSecond
                      DemoSecondView.tsx
          |   App.tsx
          |   Globals.ts
          |   index.html
          |   index.tsx

Home Page