Code Monkey home page Code Monkey logo

react-typescript-todomvc-2022's Introduction

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 outdated for current JS frameworks.
I want to renew this project about this winter.


React TypeScript TodoMVC 2022

Netlify Status Build Cypress E2E Lint Test code style: prettier Typecheck All Contributors This project is using Percy.io for visual regression testing.

gif

A Modern Code Style Todo Example πŸ“

This project was started with the goal of continue to publish TodoMVC Apps in the latest React writing style.

When you found React.js on TodoMVC 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. πŸ€—

Edit react-typescript-todomvc-2022


Getting Started

  • The app assumes that you have installed Node.js newer than v18.16.1 LTS. If you don't have it yet, follow the official Node.js Doc to install it.
npx degit laststance/react-typescript-todomvc-2022 react-typescript-todomvc-2022
cd react-typescript-todomvc-2022
npm -g pnpm
pnpm i
pnpm start

after that auto launch todo app on your default browser and code edit ready.


Stack

Command

You can do exact same command with npm, or install yarn 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 is at the top. And setup TypeScript ESLint, integrating Prettier as a eslint-plugin-prettier.
Here is final config list.

yarn lint:fix

Run wtih eslint --fix option.
Actually frequently use for perform Prettier formatting.

yarn typecheck

Check TypeScript error whole porject.

yarn test

Run Jest.
Using 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 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:headless

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!

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
ryota-murakami

πŸ’» πŸ“– ⚠️
Will Roscoe
Will Roscoe

πŸ’»
Peng Fei
Peng Fei

πŸ›
Alex Panchuk
Alex Panchuk

πŸ“–
Burhan Mullamitha
Burhan Mullamitha

πŸ“–
hefengxian
hefengxian

πŸ’» ⚠️
Ethan Setnik
Ethan Setnik

πŸ“–
Paolo Nessim
Paolo Nessim

πŸ’»
Li Kui
Li Kui

πŸ’»
Adarsh Gupta
Adarsh Gupta

πŸ“–

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

react-typescript-todomvc-2022's People

Contributors

adarsh-gupta101 avatar alexpanchuk avatar allcontributors[bot] avatar burhanmullamitha avatar dependabot[bot] avatar depfu[bot] avatar esetnik avatar github-actions[bot] avatar hefengxian avatar likui628 avatar paolojn avatar renovate[bot] avatar ryota-murakami avatar wroscoe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

react-typescript-todomvc-2022's Issues

optimize mobile experience

Original TODO-MVC is not support for smartphone device.
Mainly need replace input, edit interface breakpoint etc.

Percy: Mobile Devices

Investigated

Mobile browser does't available on Percy.
Therefore we can only responsible site that simulate Popular SmartPhone's screen size as a Mobile Devices Testing.

Prettier config

Hi. First of all, thanks for this repo.
I noticed you use Prettier.
Could you add your prettier global settings to local file .prettierrc

Migrate styled-components to tailwind css

I'd like to separate role to 'Looks' and 'Layout' onto 2 libraries styled-components and tailwind css.

  • styled-components take a 'Looks' that how it looks the component visually such as color, shape, font, size, line-height, border etc
  • tailwind css take a 'Layout' such as gird, flex, margin, padding etc

For to do this without breaking style, we should start from create solid visual testing spec on Percy.

find some bugs or difference

hi, thank you for this project,it help me a a lot.I I'm a novice at react, when I try a todo ,so I found there.After some try, I found some problems。
may be bug:

  • edit multiple at the same time

  • edit todo and then delete its contents. The style will be a little strange after unfocused.

mabe different from TodoMVC:

  • can add spaces as todo

  • can't always autofocus when edit

they all reappear in your online demo.
many of the above languages come from translation. If my tone is not good, please forgive me.

Styled-Components -> vanilla-extract

"React v18 Workgroup" and Twitter, especially Sebastian MarkbΓ₯ge's statements,
have led me to conclude that the CSS-in-JS approach has only disadvantages and no merit to be adopted.

On the other hand, I thought that CSS-Modules,
Tailwind CSS, and Plain CSS as a global style were the most likely candidates for incorporating old-fashioned statically generated CSS into modern development,
so I went with CSS-Modules, which is the most versatile and can be used with Tailwind.
I decided to migrate from the current Styled-Components to CSS-Modules.

Migrate Create React App to Vite

Vite becoming most popular frontend starter tool in the last 6 months.
Vite has actually super fast dev-server and build time so this migrate bring capability that working with fast enough on a low spec environment.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • Update dependency @swc/core to v1.3.59
  • Update dependency @types/node to v18.16.13
  • Update dependency @percy/cli to v1.24.1
  • πŸ” Create all rate-limited PRs at once πŸ”

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions
.github/workflows/build.yml
  • actions/checkout v3
  • actions/setup-node v3
.github/workflows/e2e.yml
  • actions/checkout v3
  • actions/setup-node v3
  • cypress-io/github-action v2
.github/workflows/lint.yml
  • actions/checkout v3
  • actions/setup-node v3
.github/workflows/test.yml
  • actions/checkout v3
  • actions/setup-node v3
.github/workflows/typecheck.yml
  • actions/checkout v3
  • actions/setup-node v3
npm
package.json
  • react ^18.2.0
  • react-dom ^18.2.0
  • react-router-dom ^6.11.2
  • recoil ^0.7.7
  • styled-components ^5.3.10
  • @percy/cli ^1.0.0-beta.64
  • @percy/cypress ^3.1.2
  • @swc/core ^1.3.58
  • @swc/jest ^0.2.26
  • @testing-library/cypress ^9.0.0
  • @testing-library/jest-dom ^5.16.5
  • @testing-library/react ^14.0.0
  • @testing-library/user-event ^14.4.3
  • @types/jest ^29.5.1
  • @types/node ^18.16.3
  • @types/react ^18.2.6
  • @types/react-dom ^18.2.4
  • @types/styled-components ^5.1.26
  • @typescript-eslint/eslint-plugin ^5.59.6
  • @typescript-eslint/parser ^5.59.6
  • @vitejs/plugin-react ^3.1.0
  • cypress 12.9.0
  • eslint ^8.40.0
  • eslint-config-prettier ^8.8.0
  • eslint-config-ts-prefixer ^0.4.0
  • eslint-import-resolver-typescript ^3.5.5
  • eslint-plugin-cypress ^2.13.3
  • eslint-plugin-import ^2.27.5
  • eslint-plugin-jsx-a11y ^6.7.1
  • eslint-plugin-prettier ^4.2.1
  • eslint-plugin-react-hooks ^4.6.0
  • eslint-plugin-sort-keys-fix ^1.1.2
  • jest ^29.5.0
  • jest-environment-jsdom ^29.5.0
  • jest-watch-typeahead ^2.2.2
  • prettier ^2.8.8
  • rimraf ^4.4.1
  • serve ^14.2.0
  • typescript ^4.9.5
  • vite ^4.3.7

  • Check this box to trigger a request for Renovate to run again on this repository

Depfu Error: No dependency files found

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

  • Go to the Settings page of either your own account or the organization you've used
  • Go to "Installed Integrations"
  • Click the "Configure" button on the Depfu integration
  • Remove this repo (ryota-murakami/react-typescript-todo-example-2019) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].


This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

Replace dependent plug-ins

Can we replace @reach/router with react-router v6 for the following reasons?

  1. @reach/router is an experimental product developed by the same group of developers
  2. react-router is the most popular plug-in used by users
  3. react-router v6 contains all the functions of @reach/router or even better

performance optimization

Overview

Currently, there is no React perf optimize part.
Excessive optimize is no need for example, even though a few official practice are worth for example.

my strategy is

Analyzing re-render, and then apply performance optimization at some highly cost-effectiveness points.

Recoil -> Jotai

I have no complaints about Recoil, I think it is a wonderfully maintained library.
There are two things that concern me, that has requirements include integration with Meta's specific technology the Relay.
And the frequency of Breaking Change is too much.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.