Table of Contents generated with DocToc
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📝
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
+ wbpack
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. 😀
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!
- TODO-CSS-Template(Borrowing HTML & CSS Thanks! 👍 )
- Create React App(ejected for remove eslint-lordar from webpack / React@16.9.0)
- TypeScript(Babel)
- ReachRouter
- emotion: CSS-in-JS
- muriatic: Data Sharing Library
- Cypress: E2E Testing
- react-testing-library
- ESLint
- Netlify: Deploy & Hosting
- CircleCI: Automation run tests, lint, typecheck, build, deploy
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
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!!
yarn build
After that You'll get bundled stuff in build
directory.
TBD...
Cypress is all-in-one E2E Testing tool which can deal real browser testing.
yarn start # Launch DevServer
yarn cypress:run
yarn start # Launch DevServer
yarn cypress:open
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
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.
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
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
Please feel free to post New Issue or Pull Request 🤗
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 🍻
MIT
Thanks goes to these wonderful people (emoji key):
ryota-murakami 💻 📖 |
Will Roscoe 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!