https://github.com/fasatrix/nyc-test-folder-inside-src
https://github.com/fasatrix/nyc-test-folder-inside-src
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fasatrix/nyc-test-folder-inside-src
- Owner: fasatrix
- License: mit
- Created: 2019-10-02T18:57:58.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T06:11:58.000Z (over 3 years ago)
- Last Synced: 2025-02-03T10:16:30.327Z (over 1 year ago)
- Language: HTML
- Size: 16.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
- [React TypeScript Todo Example 2019 Mid](#react-typescript-todo-example-2019-mid)
- [Play 👇](#play-)
- [What's this?](#whats-this)
- [Motivation](#motivation)
- [Note 🗒](#note-%F0%9F%97%92)
- [Stack](#stack)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Run Webpack Dev Server](#run-webpack-dev-server)
- [Production Build](#production-build)
- [Run Production Build](#run-production-build)
- [Cypress](#cypress)
- [Runs Cypress tests from the CLI without the GUI](#runs-cypress-tests-from-the-cli-without-the-gui)
- [Opens Cypress in the interactive GUI.](#opens-cypress-in-the-interactive-gui)
- [Jest](#jest)
- [Linting](#linting)
- [Typecheck](#typecheck)
- [Issues](#issues)
- [Questions](#questions)
- [LICENSE](#license)
- [Contributors ✨](#contributors-)
# React TypeScript Todo Example 2019 Mid
[](https://circleci.com/gh/ryota-murakami/react-typescript-todo-example-2019) [](https://cypress.io) [](https://github.com/facebook/jest) [](https://github.com/facebook/jest) [](https://github.com/prettier/prettier)
[](#contributors)
[](https://app.netlify.com/sites/react-typescript-todo-example/deploys)
## Play 👇
[](https://codesandbox.io/s/github/ryota-murakami/react-typescript-todo-example-2019/tree/master/?fontsize=14)
## What's this?
This is a [Create React App](https://facebook.github.io/create-react-app/) based [React](https://reactjs.org/) + [TypeScript](https://www.typescriptlang.org/) todo app example. 👉 [**DEMO**](https://react-typescript-todo-example.netlify.com)
[TypeScript](https://www.typescriptlang.org/) coming from babel, set upped at [Create React App](https://facebook.github.io/create-react-app/) install option. [Adding TypeScript Doc](https://facebook.github.io/create-react-app/docs/adding-typescript#docsNav)📝
### Motivation
Aftter React Conf 2018, It comming v16.8.0 with [Hooks](https://reactjs.org/docs/hooks-intro.html) that's apparently brand new way of Code Design contrast with class base 📝
In addition, TypeScript adopt so much easier into a `babel` + `wbpack` build system by [Create React App v2.1 TypeScript support](https://github.com/facebook/create-react-app/releases/tag/v2.1.0) official released.
So I was interested what kind of code design and configuration was built. if I build todo with a Hooks and TypeScript. 😀
### Note 🗒
**This is not a Best Practice introduction.
There are tons of effective way to create solid software in JavaScript World, you have a lot of other option based on your preference for approaching where, The Repo is just a style of my favorite.**
"*How to combining TypeScript with massive Babel or JavaScript tools ecosystem?*"
**I hope this helps you know like that from what I've Published!**
## Stack
- [TODO-CSS-Template](https://github.com/Klerith/TODO-CSS-Template)(Borrowing HTML & CSS Thanks! 👍 )
- [Create React App](https://facebook.github.io/create-react-app/)(ejected for remove eslint-lordar from webpack / [React@16.9.0](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html))
- [TypeScript(Babel)](https://babeljs.io/docs/en/babel-plugin-transform-typescript)
- [ReachRouter](https://github.com/reach/router)
- [emotion](https://github.com/emotion-js/emotion): CSS-in-JS
- [muriatic](https://github.com/ryota-murakami/muriatic): Data Sharing Library
- [Cypress](https://www.cypress.io/): E2E Testing
- [react-testing-library](https://github.com/testing-library/react-testing-library)
- [ESLint](https://eslint.org/)
- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)
- [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint#readme)
- [eslint-plugin-react-hooks](https://reactjs.org/)
- [Netlify](https://www.netlify.com/): Deploy & Hosting
- [CircleCI](https://circleci.com/): Automation run tests, lint, typecheck, build, deploy
## Prerequisites
The app assumed installed Node.js newer than `10.16.3 LTS`.
If you have not it yet, follow the official [Node.js Doc](https://nodejs.org/en/) to install it.
## Installation
```
git clone git@github.com:ryota-murakami/react-typescript-todo-example-2019.git
cd react-typescript-todo-example-2019
yarn install # or npm install
```
## Run Webpack Dev Server
```bash
yarn start
```
After that you'll seen the console which are server processes messages.
Let's follow the message and put in URL `http://localhost:3000/` your browsers adressbar,
and then you'll got todo app as same as Demo. let's modify under the `src/` code feel free!!
## Production Build
```bash
yarn build
```
After that You'll get bundled stuff in `build` directory.
## Run Production Build
TBD...
## Cypress
[Cypress](https://www.cypress.io/) is all-in-one E2E Testing tool which can deal real browser testing.
#### Runs Cypress tests from the CLI without the GUI
```baash
yarn start # Launch DevServer
yarn cypress:run
```
#### Opens Cypress in the interactive GUI.
```bash
yarn start # Launch DevServer
yarn cypress:open
```
## Jest
[Jest](https://jestjs.io/) is all-in-one test-runner built in [Create React App](https://facebook.github.io/create-react-app/) and covers function-level unit testing to component-behavior-level integration testing.
The Repo use to [react-testing-library](https://github.com/testing-library/react-testing-library) for component integration testing.
```bash
# run jest
yarn test
# run jest with hide console message except jest infomation
yarn test --silent
```
If you run `yarn test`, you'll see console.error message on termianl because `ErrorBoundary.test.js` contain invalid react component on purpose.
`--silent` option hide that error.
## Linting
[ESLint](https://eslint.org/) is at the top.
And setup [TypeScript ESLint](https://github.com/typescript-eslint/typescript-eslint), mixing [Prettier](https://prettier.io/) as a [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).
```bash
# run lint only
yarn lint
# run wtih eslint --fix option
yarn lint:fix
```
## Typecheck
While developing and building, Babel stop transpile with TS error messages.
I can't find way static typecheck with babel,
so I'm using original TypeScript via npm and specified `tsc --noEmit` compile option that doesn't generate compiled code.
```bash
yarn typecheck
```
## Issues
Please feel free to post [New Issue](https://github.com/ryota-murakami/react-typescript-todo-example-2019/issues/new) or Pull Request 🤗
## Questions
Please feel free to post [New Issue](https://github.com/ryota-murakami/react-typescript-todo-example-2019/issues/new) or reply on [Twitter](https://twitter.com/malloc007) 🐦
If you want to get more generally answers, these community are might be helpful 🍻
- [Spectrum](https://spectrum.chat/react?tab=posts)
- [Reactiflux on Discord](https://www.reactiflux.com/)
- [Stack Overflow](https://stackoverflow.com/questions/tagged/reactjs)
## LICENSE
MIT
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
ryota-murakami
💻 📖 ⚠️
Will Roscoe
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!