Need help with create-react-app-typescript-todo-example-2020?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

laststance
358 Stars 76 Forks MIT License 1.7K Commits 5 Opened issues

Description

🚀 Create React App TypeScript Todo Example 2021

Services available

!
?

Need anything else?

Contributors list

Create React App TypeScript Todo Example 2021

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

A Modern Code Style Todo Example 📝

This project was started with the goal of continuing to publish Todo Example Apps in the latest React writing style.

When React Hooks unveiled in autumn 2018, I was looking for todo apps that written by new style Function Component and Hooks to learn how to use them in real applications but I couldn't find any at that time.

Not only that, many of the results were written in ES5 (using React.createClass() API), which was an older JavaScript generation in autumn 2018. At that time, I thought there is a demand to keep updating and publishing with a modern code style even it is simple example like Todo App.

The project is targeting for who have completed a basic JavaScript programming course and new to React, peaople who migrating to React from another JavaScript Framework, and you have used to React in the past and want to catch up on the modern way for write back again.

I'm glad to even the repo could be useful for your learning. 🤗  
 

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


Getting Started

  • 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.
npx degit laststance/create-react-app-typescript-todo-example-2021 create-react-app-typescript-todo-example-2021
cd create-react-app-typescript-todo-example-2021
yarn install
yarn start

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


Stack

👩‍💻 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: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

💻 📖 ⚠️

Will Roscoe

💻

Peng Fei

🐛

Alex Panchuk

📖

Burhan Mullamitha

📖

hefengxian

💻 ⚠️

Ethan Setnik

📖

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.