React TypeScript Todo Example 2019 
Thank you for over 60 stars!✨??
I'm glad to many forks visiting the repo everyday, and I want to continue to implove this as a latest React TypeScript Todo Example.
So I'm going to rename to react-typescript-todo-example-2020 and invastigate now's react scene and self-reviiew to refactor entire code, document.
React + TypeScript conbination has growing to vast maajolity doday, so I hope to show example tested web app mainly beginner.
Thank you so much & have a good day! ?⭐️
Table of Contents generated with DocToc
- What's this?
- Stack
- Installation
- Run Webpack Dev Server
- Run Production Build
- Cypress
- Jest
- Linting
- Typecheck
- Issues
- Questions
- LICENSE
- Contributors
What's this?
This is a Create React App based React + TypeScript todo app example. ? DEMO
TypeScript coming from babel, set upped at Create React App install option. Adding TypeScript Doc ?
How to the project was bootstrapped?
1. Execute command for scaffold Create React App's TypeScript Templete.
npx create-react-app react-typescript-todo-example-2019 --template typescript
2. Setup, Setting, Programing hard with below stuffs ?
Stack
- TODO-CSS-Template(Borrowing HTML & CSS Thanks! ? )
- Create React App v3.3.0
- TypeScript(Babel)
- ReachRouter
- emotion: CSS-in-JS
- React AppState: Data Sharing Library
- Cypress: E2E Testing
- Percy: Visual Testing
- react-testing-library
- ESLint
- Netlify: Deploy & Hosting
- CircleCI: Automation run tests, lint, typecheck, build, deploy
- Depfu: Keep latest npm packages(React, TypeScript etc) automaticaly
Motivation
Aftter React Conf 2018, It comming v16.8.0 with Hooks that's apparently brand new way of Code Design contrast with class base ?
In addition, TypeScript adopt so much easier into a babel + webpack build system by Create React App v2.1 TypeScript support 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!
Installation
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 to install it.
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
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!!
Official Docs: https://create-react-app.dev/docs/getting-started#npm-start-or-yarn-start
Run Production Build
yarn build
After that You'll get bundled and optimization stuff in build directory.
Also you can run production build with serve local webserver modules.
yarn global add serve
serve -s build
Official Docs: https://create-react-app.dev/docs/getting-started#npm-run-build-or-yarn-build
Cypress
Cypress is all-in-one E2E Testing tool which can deal real browser testing.
Runs Cypress tests from the CLI without the GUI
yarn start # Launch DevServer
yarn cypress:run
Opens Cypress in the interactive GUI
yarn start # Launch DevServer
yarn cypress:open
When you run or open cypress, also run a Percy.
Percy is awesome visual regression testing service.
That detect visual diff each page, and then we'll check on web console "is that visual change expected?"
Cypress and Percy combination is really effective for website/webapp!
This projects Percy console is this: https://percy.io/laststance/react-typescript-todo-example-2019
Jest
Jest is all-in-one test-runner built in Create React App and covers function-level unit testing to component-behavior-level integration testing.
The Repo use to react-testing-library for component integration testing.
# run jest
yarn test
# run jest with hide console message except jest infomation
yarn test --silent
Linting
ESLint is at the top.
And setup TypeScript ESLint, mixing Prettier as a eslint-plugin-prettier.
# 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.
yarn typecheck
Issues
Please feel free to post New Issue or Pull Request ?
Questions
Please feel free to post New Issue or reply on Twitter ?
If you want to get more generally answers, these community are might be helpful ?
LICENSE
MIT
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!