react-tutorial-02

Built With

Getting Started

Prerequisites

Node.js

Project Setup (VS Code)

React
- Create React .gitignore file
```
npx react-gitignore
```
- Create React App
```
npx create-react-app .
```
- Delete all files in the src/ folder
- Add index.js
- Add these lines on top of the index.js file
```
  import React from 'react';
  import ReactDOM from 'react-dom';
```
- Run the project and open http://localhost:3000
```
npm start
```
- Add uuid library
```
npm i uuid
```

Programming Topics practiced to get things done

1- To-do List (React)

Overview
- React Project creation
- Using ES7 React extension snippets
- Component creation
- Passing data through props
- Event handling
- State management
- Dom element reference
To Do

Add style
Create a tag to mark task as important - Mark task as important🔘 / Important⭐
Add completed task to another list of completed tasks to be shown under the component.
Add a toggle for dark mode

Error messages for future reference

❌ Warning: Each child in a list should have a unique "key" prop.
Solution Add a key parameter to the component <Todo key={todo} todo={todo} />
❌ Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
Solution Add <>Components</> in the component return (fragment).
❌ 'TodoList' is not defined.
Solution Add import TodoList from './TodoList' to the file.
✖ This component is not running in strict mode.
Solution Change root.render(<Game />); to root.render(<React.StrictMode><Game /></React.StrictMode>);
✖ Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
Solution: Change import ReactDOM from 'react-dom'; to import ReactDOM from 'react-dom/client';
✖ ERROR in Plugin "react" was conflicted between "package.json and BaseConfig.
Solution: Open package.json and hit ctrl + save (temporary workaround). Changed directory structure that was case sensitive (real solution).

marcellpaganini/react-tutorial-02