Create React App TypeScript Todo Example 2020

What's this?

This is a Create React App based React + TypeScript todo app example. 👉 Deployed App
TypeScript coming from babel, set upped at Create React App install option. Adding TypeScript Doc 📝

Stack

• TODO-CSS-Template(Borrowing HTML & CSS Thanks! 👍 )
• Create React App v4.0.1
• TypeScript v4.0.5
• ReachRouter
• Styled-Components: CSS-in-JS
• Recoil: A state management library for React
• Cypress: E2E Testing
• react-testing-library
• ESLint
  • eslint-plugin-prettier
  • @typescript-eslint/eslint-plugin
• Netlify: Deploy & Hosting
• Github Actions: Automation run tests, lint, typecheck, build
• Depfu: Keep latest npm packages automaticaly

Installation

🔧 Prerequisites

• The app assumed installed Node.js newer than 10.16.3 LTS(recommend newer than v14.8.0). If you have not it yet, follow the official Node.js Doc to install it.

And then

git clone [email protected]:laststance/create-react-app-typescript-todo-example-2020.git
cd create-react-app-typescript-todo-example-2020
yarn install # or npm install
yarn start # or npm run start

Finally Edit Code 😎

👩‍💻 Usage

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

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

yarn lint

ESLint is at the top. And setup TypeScript ESLint, integrating Prettier as a eslint-plugin-prettier.

yarn lint:fix

run wtih eslint --fix option.

yarn 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 test

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.

yarn cypress:open

Cypress is all-in-one E2E Testing tool which can deal testing on real browser.
This command using Electron by Cypress default.

yarn cypress:open require yarn start before.

yarn start # Launch DevServer
yarn cypress:open

yarn cypress:run

Run Cypress with Electron.
That's same as run all test on cypress GUI after run yarn cypress:open.

yarn start # Launch DevServer
yarn cypress:run

yarn cypress:run:leadless

Run Cypress with headless Electron.
That mean this command complete all on a terminal without GUI.

yarn start # Launch DevServer
yarn cypress:run:headless

🗒 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!

How the project was bootstrapped?

1. Execute command for scaffold Create React App's TypeScript Templete.

npx create-react-app create-react-app-typescript-todo-example-2020 --template typescript

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 🍻

• Spectrum
• Reactiflux on Discord
• Stack Overflow

LICENSE

MIT

Contributors

Thanks goes to these wonderful people (emoji key):

ryota-murakami 💻 📖 ⚠️

Will Roscoe 💻

Peng Fei 🐛

Alex Panchuk 📖

Burhan Mullamitha 📖

This project follows the all-contributors specification. Contributions of any kind welcome!