Initialise a React project easily using the anynines React boilerplate.

It comes with preconfigured features like:

• 📦 Webpack
• 🏷️ TypeScript
• ⚛️ React
  • 💄 styled-components
  • 🎨 design-system
• 🌗 Theming
• ✅ Testing
• 🚨 Linter
• 👷 Travis
• 🤡 Mocked API

🎉 Quick Start

Generate your new GitHub repositories with this repository templates or fetch it locally using degit:

npx degit anynines/anynines-react-boilerplate react-app
cd react-app

Install the dependencies...

yarn install

...then start development environment:

yarn start

Navigate to 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.

📦 Build the app

We use webpack to bundle the React app.

You can build it for development:

yarn start

or for production:

yarn build

The generated web app is located in public.

🏷️ TypeScript

TypeScript's pre-configuration is written in a simple tsconfig.json. Modify it as you want.

To easily share global types definition, you can define them in a .ts file in src/types.

Then export these types in src/types/index.ts:

export * from './myCreatedTypes'

Now you are able to consume them using the @types alias:

import { CustomType } from '@types'

🎨 Design system

The boilerplate render for you a design-system instance in src/theme/ThemeProvider.tsx. Adjust your options as you want by modifying DesignSystemInstance component's props.

Consume the design-system components in the app:

import { Button, Icon } from '@anynines/design-system'

🌗 Theming

You can customize the default theme by modifying the CUSTOM_THEME object located in src/theme/customTheme.ts.

Consume the ThemeContext using the @theme alias:

import { ThemeContext } from '@theme'

const { theme } = React.useContext(ThemeContext)

Note: The design-system is instanciate and store in src/designSystemStore.ts.

✅ Testing

Jest is already configured with enzyme. Run the tests using:

yarn test # run all tests
yarn test:watch # rerun tests after modification
yarn test:coverage # generate tests coverage

Add tests by creating a new file [MyComponent].test.js. It should be located inside src.

🚨 Linter

Eslint and stylelint are already configured. Check your code by running:

yarn lint # run linters
yarn lint:js # run eslint linter
yarn lint:css # run stylelint linter

👷 Travis

The boilerplate provide a TravisCI 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:

yarn build && yarn lint && yarn test

🤡 Mocked API

The boilerplate run a local mocked API in development environment. You can create .json files in src/mockedApi and fetch them at /api/[filename].json.

You can see it in action by running yarn start and go to localhost:9000/api/users.json. This file is located at src/mockedApi/users.json.

You can access these files by using the @mockedApi alias:

import users from '@mockedApi/users.json'