Skip to content

Latest commit

 

History

History
191 lines (129 loc) · 10.1 KB

README.md

File metadata and controls

191 lines (129 loc) · 10.1 KB
Raw

Create React App TypeScript Todo Example 2020

Netlify Status CI Cypress.io check-code-coverage tested with jest code style: prettier All Contributors Depfu This project is using Percy.io for visual regression testing.

gif

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 📝

Edit create-react-app-typescript-todo-example-2020

Stack

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

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 🍻

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!