my-react-app: A TypeScript repository from tanay-pingalkar

A react typescript boilerplate made from scratch

that uses react / typescript / scss / redux / react-router-dom / jest / react-testing-library / eslint / prettier.

setting up on your machine

fork this repo
clone the forked repo
run yarn
run yarn serve

commands

yarn serve to serve the app for developement
yarn build to build app for production
yarn test to start jest testing
yarn format to format code in prettier
yarn format:check to check if code style matches only
yarn format:write to prettify your code only
yarn lint to lint your code in eslint
yarn lint:fix to fix code in eslint
yarn test to test code in jest

file structure

.
├── .github
|   └── workflow
|       └── ...
├── .vscode
|   └── ...
├── src
|   ├── components
|   |   └── ...
|   ├── redux
|   |   ├── actions
|   |   ├── reducers
|   |   └── ...
|   ├── styles
|   |   └── ...
|   ├── utils
|   |   └── ...
|   └── ...
├── tests
|   ├── __snapshot
|   └── ...
├── webpack
|   └── ...
└── ...

how do you write tests

this repo can also be usefull for test first driven testing method, it uses jest / react-testing-library / react-test-renderer. It also contain how to test redux. I have made custom util to create test store not redux mock store because it is only for testing action based logic not reducer. A simple test example

it("should render component properly",()=>{
  // createTestStore is a utility in src/utils folder
  const store=createTestStore();
  
  // you can also spyOn store.dispatch
  const spy = jest.spyOn(store,"dispatch");
  render(
      <MemoryRouter>
        <Provider store={store}>
          <Component></Component>
        </Provider>
      </MemoryRouter>,
   );
   const element =screen.fintByTestId("test_id");
   expect(element).toHaveTextContent("first content");
   act(()=>{
    fireEvent.click(add);
   })
   expect(spy).toHaveCalled();
   expect(element).toHaveTextContent("changed content after click");
});

webpack explained

this repo uses webpack to bundle scss , typescript and file. webpack folder contain three webpack configs, webpack.config.ts is main config which is merged in other config based on mode. There are two mode, developement and production. In developement mode hmr is in use and in production, minification of the code in done. this repo use ts-loader to load typescript, scss-loader / css-loader to load css and mini-css-extract-plugin creates a seperate css file. To use hmr, this repo use react-hot-replacer.

github action

there is a github action in .github to continuosly check code quality. I have set of instruction like yarn lint , yarn format, yarn test.

react , redux , react-router-dom

this repo is a react boilerplate and uses redux for statemanagement. If you dont know redux visit there doc; For routing it uses react router dom. If you are using react-router-dom and you project is growing , you can create a folder called pages in src where you can store all routes.

using vscode tasks

this repo recommend using vscode to get full advancement code linting and formating. With linting and formating , i have also made vscode tasks that you can run from your vscode. go to terminal > Run task > you will get list of tasks , run one of them.

why from scratch

why you should make react app from scratch if you have create-react-app. create-react-app itself says that is it for learning, it is not truely suitable for production. If you make react app from scratch, you will get good understanding of react and webpack. Making your own react app gives you power of configurations,this can be very usefull if you app grows. create-react-app is actually slow for some reasons. I spent lot of time collecting pieces of code that will actually work with my stack. Thats why I made a repo and put everything in this that i will use it for my future project and open sourced it to give other poeple its benefit.

tanay-pingalkar/my-react-app