\n\n----\n\nInitialise a React project easily using the anynines React boilerplate.\n\nIt comes with preconfigured features like:\n\n- 📦 Webpack\n- 🏷️ TypeScript\n- ⚛️ React\n - 💄 styled-components\n - 🎨 design-system\n- 🌗 Theming\n- ✅ Testing\n- 🚨 Linter\n- 👷 Travis\n- 🤡 Mocked API\n\n## 🎉 Quick Start\n\nGenerate your new GitHub repositories with this [repository templates](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/) or fetch it locally using [degit](https://github.com/Rich-Harris/degit):\n\n```bash\nnpx degit anynines/anynines-react-boilerplate react-app\ncd react-app\n```\n\nInstall the dependencies...\n\n```bash\nyarn install\n```\n\n...then start development environment:\n\n```bash\nyarn start\n```\n\nNavigate to [localhost:9000](http://localhost:9000/). You should see your app running. Edit the `App` component file in `src`, save it, wait that the page reload: you should see your changes.\n\n## 📦 Build the app\n\nWe use [webpack](https://webpack.js.org/) to bundle the React app.\n\nYou can build it for development:\n\n```bash\nyarn start\n```\n\nor for production:\n\n```bash\nyarn build\n```\n\nThe generated web app is located in `public`.\n\n## 🏷️ TypeScript\n\nTypeScript's pre-configuration is written in a simple `tsconfig.json`. Modify it as you want.\n\nTo easily share global types definition, you can define them in a `.ts` file in `src/types`.\n\nThen export these types in `src/types/index.ts`:\n\n```typescript\nexport * from './myCreatedTypes'\n```\n\nNow you are able to consume them using the `@types` alias:\n\n```javascript\nimport { CustomType } from '@types'\n```\n\n## 🎨 Design system\n\nThe boilerplate render for you a [design-system](https://github.com/anynines/design-system) instance in `src/theme/ThemeProvider.tsx`. Adjust your options as you want by modifying `DesignSystemInstance` component's props.\n\nConsume the design-system components in the app:\n\n```javascript\nimport { Button, Icon } from '@anynines/design-system'\n```\n\n## 🌗 Theming\n\nYou can customize the default theme by modifying the `CUSTOM_THEME` object located in `src/theme/customTheme.ts`.\n\nConsume the `ThemeContext` using the `@theme` alias:\n\n```javascript\nimport { ThemeContext } from '@theme'\n\nconst { theme } = React.useContext(ThemeContext)\n```\n\n> Note: The design-system is instanciate and store in `src/designSystemStore.ts`.\n\n## ✅ Testing\n\n[Jest](https://jestjs.io/en/) is already configured with [enzyme](https://enzymejs.github.io/enzyme/). Run the tests using:\n\n```bash\nyarn test # run all tests\nyarn test:watch # rerun tests after modification\nyarn test:coverage # generate tests coverage\n```\n\nAdd tests by creating a new file `[MyComponent].test.js`. It should be located inside `src`.\n\n## 🚨 Linter\n\n[Eslint](https://eslint.org/) and [stylelint](https://stylelint.io/) are already configured. Check your code by running:\n\n```bash\nyarn lint # run linters\nyarn lint:js # run eslint linter\nyarn lint:css # run stylelint linter\n```\n\n## 👷 Travis\n\nThe boilerplate provide a [TravisCI](https://travis-ci.com/) basic configuration. On each new commit, it makes sure that the app build, that there are no linter errors and that the tests do not fail:\n\n```bash\nyarn build && yarn lint && yarn test\n```\n\n## 🤡 Mocked API\n\nThe boilerplate run a local mocked API in development environment. You can create `.json` files in `src/mockedApi` and fetch them at `/api/[filename].json`.\n\nYou can see it in action by running `yarn start` and go to [localhost:9000/api/users.json](http://localhost:9000/api/users.json). This file is located at `src/mockedApi/users.json`.\n\nYou can access these files by using the `@mockedApi` alias:\n\n```javascript\nimport users from '@mockedApi/users.json'\n```\n\n\n","readmeFilename":"README.md"}
![](\"https://user-images.githubusercontent.com/61698985/95465266-31704200-097b-11eb-813c-ddc9a0b2f202.png\")