Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laststance/react-typescript-todomvc-2022
React TypeScript TodoMVC 2022
https://github.com/laststance/react-typescript-todomvc-2022
example react react-testing-library todo typescript
Last synced: 2 days ago
JSON representation
React TypeScript TodoMVC 2022
- Host: GitHub
- URL: https://github.com/laststance/react-typescript-todomvc-2022
- Owner: laststance
- License: mit
- Created: 2019-07-17T01:58:05.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T02:09:45.000Z (4 months ago)
- Last Synced: 2025-01-18T06:05:12.361Z (9 days ago)
- Topics: example, react, react-testing-library, todo, typescript
- Language: TypeScript
- Homepage: https://react-typescript-todomvc.netlify.app/
- Size: 23.9 MB
- Stars: 534
- Watchers: 5
- Forks: 122
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Project Status from the Author (@ryota-murakami, Aug 16 2023):
I'm considering continue update as a Client Side SPA or Rewrite this app with Server Components.
But Server Components doen't meant obsolete Client Side SPA, both archtecture is great option depends on application type,
dev team type, each dev's skillset type.
Might be keep update both archtecture TODO is ideal vision for me unless there are planty rest time.
Anyway, I thnik was [TODO MVC](https://todomvc.com/) outdated for current JS frameworks.
I want to renew this project about this winter.
---
# React TypeScript TodoMVC 2022
[](https://app.netlify.com/sites/react-typescript-todomvc/deploys)
[](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/build.yml)
[](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/e2e.yml)
[](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/lint.yml)
[](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/test.yml)
[](https://github.com/prettier/prettier)
[](https://github.com/laststance/react-typescript-todomvc-2022/actions/workflows/typecheck.yml)
[](#contributors)
[](https://percy.io/laststance/react-typescript-todomvc-2022)
## A Modern Code Style Todo Example 📝
This project was started with the goal of continue to publish TodoMVC Apps in the latest [React](https://reactjs.org/) writing style.
When you found [React.js](https://reactjs.org/) on [TodoMVC](https://todomvc.com/) top page, you might seen classic style `React.createClass()` based source at first.
I don't complain about it because the old-style codebase React app works all over the world and helps peopleAlmost cases, there is no value that spending time for rerwite new syntax sugar of huge codebase.
This project aims to assist new React learners and those who have not written React for a long time by providing a handy resource for learning the latest React.js.
I'm glad to even the repo could be useful for your learning. 🤗
[](https://codesandbox.io/s/quizzical-blackwell-bvfc5?fontsize=14&hidenavigation=1&theme=dark)
---
## Getting Started
- The app assumes that you have installed `Node.js` newer than [v18.16.1 LTS](https://nodejs.org/en/).
If you don't have it yet, follow the official [Node.js Doc](https://nodejs.org/en/) to install it.
```bash
npx degit laststance/react-typescript-todomvc-2022 react-typescript-todomvc-2022
```
```bash
cd react-typescript-todomvc-2022
```
```bash
npm -g pnpm
```
```bash
pnpm i
```
```bash
pnpm start
```
after that auto launch todo app on your default browser and code edit ready.
---
## Stack
- [TODO-CSS-Template](https://github.com/Klerith/TODO-CSS-Template) (Borrowing HTML & CSS Thanks! 👍 )
- [Vite](https://vitejs.dev/)
- [TypeScript](https://www.typescriptlang.org/) [v4.2.4](https://github.com/microsoft/TypeScript/releases/tag/v4.2.4)
- [React Router](https://reactrouter.com/)
- [Styled-Components](https://styled-components.com/): CSS-in-JS
- [Recoil](https://recoiljs.org/): A state management library for React
- [Cypress](https://www.cypress.io/): E2E Testing
- [react-testing-library](https://github.com/testing-library/react-testing-library)
- [ESLint](https://eslint.org/)
- [eslint-config-typescript-react-pro 🌈](https://github.com/laststance/eslint-config-typescript-react-pro)
- [Netlify](https://www.netlify.com/): Deploy & Hosting
- [Github Actions](https://github.com/features/actions): Automation run tests, lint, typecheck, build
- [Depfu](https://depfu.com/github/ryota-murakami/react-typescript-todomvc-2022?project_id=9618): Keep latest npm packages automaticaly
## Command
You can do exact same command with npm, or [install yarn](https://classic.yarnpkg.com/en/docs/install#mac-stable) easily if you have interest.
### `yarn` or `yarn install`
Install all Node Package Modules that depending this project.
### `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`
Production build that bundled optimization stuff in `build` directory.
### `yarn serve`
Run production build that generated by `yarn build`.
### `yarn lint`
[ESLint](https://eslint.org/) is at the top.
And setup [TypeScript ESLint](https://github.com/typescript-eslint/typescript-eslint), integrating [Prettier](https://prettier.io/) as a [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).
Here is [final config list](https://github.com/laststance/eslint-config-typescript-react-pro#explicit-all-rule-set-).
### `yarn lint:fix`
Run wtih eslint --fix option.
Actually frequently use for perform [Prettier](https://prettier.io/) formatting.
### `yarn typecheck`
Check TypeScript error whole porject.
### `yarn test`
Run [Jest](https://jestjs.io/).
Using [react-testing-library](https://github.com/testing-library/react-testing-library) for component integration testing.
### `yarn clean`
Delete `node_modules/*`, `yarn.lock`, `build/*` once.
### `yarn prettier`
Run prettier formatting holeproject without all JS/TS files.
### `yarn cypress:open`
[Cypress](https://www.cypress.io/) is all-in-one E2E Testing tool which can deal testing on real browser.
This command using [Electron](https://www.electronjs.org/) by Cypress default.
`yarn cypress:open` require `yarn start` before.
```bash
yarn start # Launch DevServer
yarn cypress:open
```
### `yarn cypress:run`
Run Cypress with [Electron](https://www.electronjs.org/).
That's same as run all test on cypress GUI after run `yarn cypress:open`.
```bash
yarn start # Launch DevServer
yarn cypress:run
```
### `yarn cypress:run:headless`
Run Cypress with headless [Electron](https://www.electronjs.org/).
That mean this command complete all on a terminal without GUI.
```bash
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!**
## Issues
Please feel free to post [New Issue](https://github.com/laststance/react-typescript-todomvc-2022/issues/new) or Pull Request 🤗
## Questions
Please feel free to post [New Issue](https://github.com/laststance/react-typescript-todomvc-2022/issues/new) or reply on [Twitter](https://twitter.com/malloc007) 🐦
If you want to get more generally answers, these community are might be helpful 🍻
- [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
💻
Peng Fei
🐛
Alex Panchuk
📖
Burhan Mullamitha
📖
hefengxian
💻 ⚠️
Ethan Setnik
📖
Paolo Nessim
💻
Li Kui
💻
Adarsh Gupta
📖
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!