diff --git a/.all-contributorsrc b/.all-contributorsrc index c29945f9..0db65672 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1,5 +1,5 @@ { - "projectName": "react-typescript-todo-example-2020", + "projectName": "create-react-app-typescript-todo-example-2020", "projectOwner": "laststance", "repoType": "github", "repoHost": "https://github.com", diff --git a/.circleci/config.yml b/.circleci/config.yml index 8c0b560f..690f7753 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -39,7 +39,7 @@ jobs: - run: yarn install - run: yarn lint workflows: - react-typescript-todo-example-2020: + create-react-app-typescript-todo-example-2020: jobs: - typecheck - build diff --git a/README.md b/README.md index b3765d04..ce8cfb36 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,20 @@ -# React TypeScript Todo Example 2020 [![Netlify Status](https://api.netlify.com/api/v1/badges/94ad28c3-2ccd-40b2-9b9f-35ab89148f43/deploy-status)](https://app.netlify.com/sites/react-typescript-todo-example/deploys) +# Create React App TypeScript Todo Example 2020 [![Netlify Status](https://api.netlify.com/api/v1/badges/94ad28c3-2ccd-40b2-9b9f-35ab89148f43/deploy-status)](https://app.netlify.com/sites/create-react-app-typescript-todo-example/deploys) -[![CircleCI](https://circleci.com/gh/laststance/react-typescript-todo-example-2020.svg?style=svg)](https://circleci.com/gh/laststance/react-typescript-todo-example-2020) +[![CircleCI](https://circleci.com/gh/laststance/create-react-app-typescript-todo-example-2020.svg?style=svg)](https://circleci.com/gh/laststance/create-react-app-typescript-todo-example-2020) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://cypress.io) -[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/laststance/react-typescript-todo-example-2020) +[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/laststance/create-react-app-typescript-todo-example-2020) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors) -[![Depfu](https://badges.depfu.com/badges/b291947c58892a6d78e4f3374c4a6d01/overview.svg)](https://depfu.com/github/ryota-murakami/react-typescript-todo-example-2020?project_id=9618) +[![Depfu](https://badges.depfu.com/badges/b291947c58892a6d78e4f3374c4a6d01/overview.svg)](https://depfu.com/github/ryota-murakami/create-react-app-typescript-todo-example-2020?project_id=9618) - gif + gif ## Thank you for over 80 stars! 😀🎉 I created this repository july 2019 because I can't Create React App + TypeScript + implemented by modern favor React(like hooks.) Today I'm glad to many forks visiting the repo everyday more than I expected. So I want to continue to implove as a latest React TypeScript Todo Example. -Now project was renamed 2019 to **react-typescript-todo-example-2020** 🎄✨ (2/11 2020) +Now project was renamed 2019 to **create-react-app-typescript-todo-example-2020** 🎄✨ (2/11 2020) **React + TypeScript** conbination has growing to vast majority today, so I hope to show example tested web app mainly beginner developer. @@ -51,7 +51,7 @@ have a good day! 😀⭐️ ## What's this? -This is a [Create React App](https://facebook.github.io/create-react-app/) based [React](https://reactjs.org/) + [TypeScript](https://www.typescriptlang.org/) todo app example. 👉 [**Deployed App**](https://react-typescript-todo-example.netlify.com) +This is a [Create React App](https://facebook.github.io/create-react-app/) based [React](https://reactjs.org/) + [TypeScript](https://www.typescriptlang.org/) todo app example. 👉 [**Deployed App**](https://create-react-app-typescript-todo-example.netlify.com) [TypeScript](https://www.typescriptlang.org/) coming from babel, set upped at [Create React App](https://facebook.github.io/create-react-app/) install option. [Adding TypeScript Doc](https://facebook.github.io/create-react-app/docs/adding-typescript#docsNav) 📝 ### How to the project was bootstrapped? @@ -59,7 +59,7 @@ This is a [Create React App](https://facebook.github.io/create-react-app/) based ##### 1. Execute command for scaffold [Create React App's TypeScript Templete](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app). ``` -npx create-react-app react-typescript-todo-example-2020 --template typescript +npx create-react-app create-react-app-typescript-todo-example-2020 --template typescript ``` ##### 2. Setup, Setting, Programing hard with below stuffs 😆 @@ -79,7 +79,7 @@ npx create-react-app react-typescript-todo-example-2020 --template typescript - [eslint-plugin-react-hooks](https://reactjs.org/) - [Netlify](https://www.netlify.com/): Deploy & Hosting - [CircleCI](https://circleci.com/): Automation run tests, lint, typecheck, build, deploy -- [Depfu](https://depfu.com/github/ryota-murakami/react-typescript-todo-example-2020?project_id=9618): Keep latest npm packages(React, TypeScript etc) automaticaly +- [Depfu](https://depfu.com/github/ryota-murakami/create-react-app-typescript-todo-example-2020?project_id=9618): Keep latest npm packages(React, TypeScript etc) automaticaly ### 😀 Motivation Aftter React Conf 2018, It comming v16.8.0 with [Hooks](https://reactjs.org/docs/hooks-intro.html) that's apparently brand new way of Code Design contrast with class base 📝 @@ -110,14 +110,14 @@ And then clone repo and install npm dependencies. Intall is complete. ```bash -git clone git@github.com:laststance/react-typescript-todo-example-2020.git -cd react-typescript-todo-example-2020 +git clone git@github.com:laststance/create-react-app-typescript-todo-example-2020.git +cd create-react-app-typescript-todo-example-2020 yarn install # or npm install ``` After that you can lunch App with `yarn start` command. 😎 -And Todo source code is putting [src/](https://github.com/laststance/react-typescript-todo-example-2020/tree/master/src) directory. +And Todo source code is putting [src/](https://github.com/laststance/create-react-app-typescript-todo-example-2020/tree/master/src) directory. ### 📝 Editor If you're going to code reading for learn, I recommend you [VScode](https://code.visualstudio.com/) or [WebStorm](https://www.jetbrains.com/webstorm/). @@ -181,7 +181,7 @@ Percy is awesome visual regression testing service. That detect visual diff each page, and then we'll check on web console "is that visual change expected?" Cypress and Percy combination is really effective for website/app! -This projects Percy console is this: https://percy.io/laststance/react-typescript-todo-example-2020 +This projects Percy console is this: https://percy.io/laststance/create-react-app-typescript-todo-example-2020 ### Jest @@ -215,10 +215,10 @@ yarn typecheck ``` ## Issues -Please feel free to post [New Issue](https://github.com/ryota-murakami/react-typescript-todo-example-2020/issues/new) or Pull Request 🤗 +Please feel free to post [New Issue](https://github.com/ryota-murakami/create-react-app-typescript-todo-example-2020/issues/new) or Pull Request 🤗 ## Questions -Please feel free to post [New Issue](https://github.com/ryota-murakami/react-typescript-todo-example-2020/issues/new) or reply on [Twitter](https://twitter.com/malloc007) 🐦 +Please feel free to post [New Issue](https://github.com/ryota-murakami/create-react-app-typescript-todo-example-2020/issues/new) or reply on [Twitter](https://twitter.com/malloc007) 🐦 If you want to get more generally answers, these community are might be helpful 🍻 @@ -237,10 +237,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d - - - - + + + +

ryota-murakami
💻 📖 ⚠️
Will Roscoe
💻
Peng Fei
🐛
Alex Panchuk
📖
ryota-murakami
💻 📖 ⚠️
Will Roscoe
💻
Peng Fei
🐛
Alex Panchuk
📖
diff --git a/package.json b/package.json index d5507c1b..89ad71e5 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-typescript-todo-example-2020", + "name": "create-react-app-typescript-todo-example-2020", "dependencies": { "@emotion/core": "^10.0.28", "@emotion/styled": "^10.0.27", diff --git a/public/index.html b/public/index.html index 021827ab..e6db1825 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ - React Typescript Todo Example 2020 + Create React App TypeScript Todo Example 2020 diff --git a/public/manifest.json b/public/manifest.json index b1849bb8..7df8b030 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { "short_name": "React Todo", - "name": "React TypeScript Todo Example 2020", + "name": "Create React App TypeScript Todo Example 2020", "icons": [ { "src": "favicon.ico", diff --git a/src/App/TodoList/Item/index.tsx b/src/App/TodoList/Item/index.tsx index a1075d72..2aafe979 100644 --- a/src/App/TodoList/Item/index.tsx +++ b/src/App/TodoList/Item/index.tsx @@ -92,7 +92,7 @@ const Item: React.FC = ({ todo }) => { } useEffect(() => { - // For fucus input element when double clicks text label. fix this https://github.com/laststance/react-typescript-todo-example-2020/issues/50 + // For fucus input element when double clicks text label. fix this https://github.com/laststance/create-react-app-typescript-todo-example-2020/issues/50 if (state.onEdit === true && editInput.current !== null) editInput.current.focus() }, [editInput, state.onEdit])