bradtraversy / react-crash-2021

Task tracking application from the React crash course

React Crash Course 2021 (Task Tracker App)

This is the project from the YouTube crash course. It includes the react ui as well as JSON-server for our mock backend

Usage

Install dependencies

npm install

Run React dev server (http://localhost:3000)

npm start

Run the JSON server (http://localhost:5000)

npm run server

To build for production

npm run build

react-crash-2021's Issues

Reminder class condition not correct while adding a new task.

nothing happens when adding a task

Hey,
I am trying to follow your crash course, using your git code which I cloned.
I am running it on localhost:3000 (changed all the localhost:5000 in the App.js file to localhost:3000), as the localhost:5000 version constantly crashed.
The problem is, when I add a task and press the save button, nothing really happens - I just to back to the empty submitting page all over again.
What am I missing here?
Thanks!

weird application not that in the crash course video ?!

files not the same as in this youtube video https://www.youtube.com/watch?v=w7ejDZ8SWv8

This site can't be reached

Hello everyone! When I'm trying to reach localhost:5000/tasks gives me an error >>>

This site can’t be reachedlocalhost refused to connect.
Try:

Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_REFUSED

Thanks

index.css - CSS to paste into blank file

I'm not experiencing errors, but I simply don't understand where the CSS is supposed to be copied from prior to pasting it into index.css at approximately 32:30 on the timeline of "React JS Crash Course".

Mr Traversy states it can be found at GitHub in the repository description (the markdown, assumed). I don't see any CSS code there. Clearly I'm confused as I don't see anyone else having addressed this.

My apologies if this is not the proper forum to address my confusion. Please advise.
Thank you!

typo error

line 99 in App.js you have typed <>
I think this is the reason people are having their app crash?

Uncaught TypeError: onToggle is not a function at onDoubleClick

I am stuck at 59 minutes 30 seconds of tutorial video. Following the same steps as the tutorial but getting an error when I double Click on the task: Uncaught TypeError: onToggle is not a function at onDoubleClick (Task.js:5).

Pls help asap. Thanks.

index.css Styling not correctly displaying.

After copying your styling into index.css , The tiny blue border did not show up, the margin still hanging left.

But the font did change.

Probably there's a reason for all of that.

TaskDetails

where is the TaskDetails.js file?

how does this function become active

react-crash-2021/src/components/AddTask.js

Line 16 in a644cde

onAdd({ text, day, reminder })

Media query expected

I keep getting this error, and I think I’m unable to access or make use of my btn classes because of it.

URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'

Good evening Brad:
I have cloned this repository in my local machine (Ubuntu Linux), followed all the instructions in Read-me. I get this error :

Compiled successfully!

You can now view react-task-tracker in the browser.

Local: http://localhost:3000/bradtraversy/react-crash-202
On Your Network: http://192.168.86.46:3000/bradtraversy/react-crash-202

Note that the development build is not optimized.
To create a production build, use yarn build.

URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
at decodeURIComponent ()
at decode_param (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:574:18)
at next (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:220:15)
at expressInit (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:317:13)
at /home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'
at decodeURIComponent ()
at decode_param (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:574:18)
at next (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:220:15)
at expressInit (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:317:13)
at /home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/bradtraversy/react-crash-2021/%PUBLIC_URL%/favicon.ico'
at decodeURIComponent ()
at decode_param (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:574:18)
at next (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:220:15)
at expressInit (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:317:13)
at /home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/bradtraversy/react-crash-2021/%PUBLIC_URL%/manifest.json'
at decodeURIComponent ()
at decode_param (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:574:18)
at next (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:220:15)
at expressInit (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:317:13)
at /home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'
at decodeURIComponent ()
at decode_param (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:574:18)
at next (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:220:15)
at expressInit (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:317:13)
at /home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
at decodeURIComponent ()
at decode_param (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:574:18)
at next (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:220:15)
at expressInit (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:317:13)
at /home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'
at decodeURIComponent ()
at decode_param (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:574:18)
at next (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:220:15)
at expressInit (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:317:13)
at /home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
at decodeURIComponent ()
at decode_param (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:574:18)
at next (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:220:15)
at expressInit (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:317:13)
at /home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/jorge/Sites/react-crash-2021/node_modules/express/lib/router/index.js:335:12)

Inspection Window Anomaly

My first REACT project nearly completed.

When working on PUTting the toggleReminder data I discovered that
while the Chrome devTool Inspection window is open the cursor style changed to a gray ball.
then dblClick would not respond properly. onClick continued to work fine.

When the Chrome devTool Inspection window is closed, dblClick works properly.

j

Error in Form Styling

I have an error with the form styling as it is showing something weird. I have attached a picture of it below

onDoubleClick for onToggle function does not work

• React Version: [email protected]
• Node Version: v17.5.0
  If your onToggle function does not work, you can change the onDoubleClick event to onClick event, and it works in this way.

Digital Envelope Routines...Unsupported when starting node server

The problem seems to arise from react-scripts, and is an ssl versioning issue. I did not need to change node versions. I am running 18.12.1. I resolved this by upgrading react-scripts to 5.0.0 which I believe also has a later version of webpack. npm i react-scripts@latest

referenced from stackoverflow https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

Crash when using React Router v6 [solution]

Tried doing this tutorial but used React Router v6 instead of v5 and then I got this error Error: A <Route> is only ever to be used as the child of <Routes> element
So there's some changes and so I made App.js like this instead

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

//*code*

  return (
    <Router>
      <div className="container">
        <Header
          onAdd={() => setShowAddTask(!showAddTask)}
          showAdd={showAddTask}
        />
        <Routes>
          <Route
            path="/"
            exact
            element={
              <Home
                showAddTask={showAddTask}
                addTask={addTask}
                tasks={tasks}
                Tasks={Tasks}
                toggleReminder={toggleReminder}
                deleteTask={deleteTask}
                AddTask={AddTask}
              />
            }
          />
          <Route path="/about" element={<About />} />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

and defined a new file Home.js like this

function Home({ showAddTask, addTask, tasks, Tasks, toggleReminder, deleteTask, AddTask }) {
  return (
    <div>
      {showAddTask && <AddTask onAdd={addTask} />}
      {tasks.length > 0 ? (
        <Tasks tasks={tasks} onDelete={deleteTask} onToggle={toggleReminder} />
      ) : (
        "No Tasks To Show"
      )}
    </div>
  );
}

export default Home;

Probably stupid. Don't know much about things web-related.

Question: Why no "import React from react" in components? How it works?

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

A'm stuck at 1:12:52 at Submit function onAdd. There is an error in React as:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   React 2
   AddTask AddTask.js:4
   onSubmit AddTask.js:14
   React 14
   unstable_runWithPriority scheduler.development.js:468
   React 15
   js index.js:7
   js main.chunk.js:1172
   Webpack 7

The code is AddTask.js:

`
import { useState } from 'react'

const AddTask = ({ onAdd }) => {
const [text, setText] = useState([])
const [day, setDay] = useState([])
const [reminder, setReminder] = useState([false])

const onSubmit = (e) => {
    e.preventDefault()
    if(!text) {
        alert('Please add a task')
        return
    }
    onAdd({ text, day, reminder } )  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! This function throws an Error !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    setText('')
    setDay('')
    setReminder(false)
}

return (
    <form className='add-form' onSubmit={onSubmit}>
        <div className='form-control'>
            <label>Task</label>
            <input type='text' placeholder='Add Task' 
            value={text} onChange={(e) => setText(e.target.value)} 
        />
        </div>
        <div className='form-control'>
            <label>Day & Time</label>
            <input type='text' placeholder='Add Date' 
            value={day} onChange={(e) => setDay(e.target.value)} 
        />
        </div>
        <div className='form-control form-control-check'>
            <label>Set Reminder</label>
            <input type='checkbox' checked={reminder} 
            value={reminder} onChange={(e) => 
            setReminder(e.currentTarget.checked)} 
        />
        </div>
        <input type='submit' value='Save Task' 
        className='btn btn-block' />
    </form>
)

}

export default AddTask

`
Please help me to resolve this issue.

Attempted import error: 'Button' is not exported from './Button'.

This is thrown even though I've copied the 'Button' component directly from this git repository

Error in tasks styling

I have an error with the tasks styling as it is showing something weird. I have attached a picture of it below

Ubuntu Linux

Application does not start , tried a just created react app and it works without issues.
Console log shows some errors, VSCode does not display errors.

Deploy Issue

How to deploy mock API (JSON-server) to hosting sites such as Netlify, Heroku, Firebase?