mdn / todo-react

Sample todo app built with the React/ReactDOM framework.

todo-react

Sample todo app built with the React/ReactDOM framework. For the accompanying documentation, see Understanding client-side JavaScript frameworks : React tutorials.

For the live version, see https://mdn.github.io/todo-react/.

This project was bootstrapped with Create React App.

Getting started

To get this app running locally, you'll need to have Node.js and Yarn installed on your machine. In the project directory, you can run:

yarn && yarn start

More information about the available commands can be found in the Contributing guide.

Learn More

You can learn more in the Create React App documentation.

The following sections are recommended:

• Code Splitting
• Analyzing the Bundle Size
• Making a Progressive Web App
• Advanced Configuration
• Deployment
• npm run build fails to minify

To learn React, check out the React documentation.

Contributing

Our project welcomes contributions from any member of our community. To get started contributing, please see our Contributor Guide.

By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our Code of Conduct.

License

This project is licensed under the LICENSE.

todo-react's Issues

Content Suggestion: Do you have any plan to add tests?

Hi, I love this todo-react project and I've learned so much about React through this project.

However, I feel starving to learn tests ever since testing is becoming one of the requirements to be hired. I think this project could be a good start for junior frontend developers to learn not only React but also testing :)

Thus, I wonder if you have any plan to add tests with React Testing Library. And, if so, can I pull requests?

GH pages base paths for assets is wrong/missing

What information was incorrect, unhelpful, or incomplete?

There are some 404s in the deployed site:

• ❌ 404 https://mdn.github.io/assets/index-u64nDbB7.js
• ❌ 404 https://mdn.github.io/assets/index-sABYHyHG.css
• ❌ 404 https://mdn.github.io/vite.svg

What did you expect to see?

Assets loaded relative to base path which is https://mdn.github.io/todo-react/, see

• ✅ 200 https://mdn.github.io/todo-react/assets/index-u64nDbB7.js
• ✅ 200 https://mdn.github.io/todo-react/assets/index-sABYHyHG.css
• ✅ 200 https://mdn.github.io/todo-react/vite.svg

Do you have any supporting links, references, or citations?

After changes landed in:

• #97

Do you have anything more you want to share?

No response

Filter error

MDN URL

/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering

What specific section or headline is this issue about?

Filtering tasks in the UI

What information was incorrect, unhelpful, or incomplete?

Update your taskList like so:

const taskList = tasks
.filter(FILTER_MAP[filter])
.map(task => (

));

What did you expect to see?

Uncaught TypeError: undefined is not a function
at Array.filter ()
at App

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

MDN metadata

Page report details

• Folder: en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md
• Last commit: mdn/content@4264855
• Document last modified: 2022-02-18T11:38:26.000Z

"ul has an implicit role of list" issue

Hi. Thanks for the great react app example first of all. In Beginnig our React todo list, I replaced function App(props) as shown in the example, and I got the following error in my terminal on my Mac.

Compiled with warnings.                                                         
                                                                                
./src/App.js                                                                    
  Line 44:7:  The element ul has an implicit role of list. Defining this explici
tly is redundant and should be avoided  jsx-a11y/no-redundant-roles             
                                                                                
Search for the keywords to learn more about each warning.                       
To ignore, add // eslint-disable-next-line to the line before.

On line 44:7 is the next line and the rest follows:

      <ul
        role="list"
        className="todo-list stack-large stack-exception"
        aria-labelledby="list-heading"
      >

When I set // eslint-disable-next-line at line 43, it threw another error messages, so I ended up reverting back.

My question is will I have no problem following this tutorial, or should I set some setting to keep the error message from happening?

Below is my package.json file contents BTW:

{
  "name": "moz-todo-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Thank you for your work.

Readme link to live version doesn't work (404 Not Found)

The readme has a link to a live version of the app on this line: https://github.com/mdn/todo-react/blob/main/README.md?plain=1#L7

It links to https://mdn.github.io/todo-react-build/, which returns a 404:

need to fix - onChange Event Issues

What information was incorrect, unhelpful, or incomplete?

How I am facing issues => When I click on Edit on any Todo and try to clear the entire field, I get the original text back again.

The issue occurred in => the Edit-Template.

What did you expect to see?

The Input Field Must be completely Clear and User can type Entirely New Name of Todo.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

That is enough to get a reference to the actual error point.

“Componentizing our React app”: Error in Passing DATA as a prop,

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components

What specific section or headline is this issue about?

Componentizing our React app in the MDN documentation

What information was incorrect, unhelpful, or incomplete?

Where will pass DATA as a prop, we pass DATA as a prop, called tasks. The final line of src/index.js read like this:

ReactDOM.render(\<App tasks={DATA} />, document.getElementById("root"));

What did you expect to see?

Instead of this

const root = ReactDOM.createRoot(document.getElementById('root'));
root. Render(
  <React.StrictMode>
    <App tasks={DATA} />
  </React.StrictMode>
);

In the React v18.2.0.

Do you have any supporting links, references, or citations?

https://reactjs.org/docs/conditional-rendering.html

Do you have anything more you want to share?

No response

Empty item is inserted in the UI

Hi, I have been following the to-do tutorial and I realized when you click the Add button without typing anything to the input field, it is rendered as a to-do item in the UI, only that it is empty(does not have a name).