React JS Crash Course

Traversy Media · 3.6M views · 2021 · 1:48:48

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it as a beginner React tutorial, and many questions cite specific timestamps where the task tracker code stopped working for them.

Recommended by 4 people across 4 different months, 2021 to 2023.

What it is

A 1h48m crash course from Traversy Media that builds a task tracker app in React. It covers creating an app, JSX, components, props, state, hooks, forms, fetching from a JSON Server API, and routing, with timestamps for each step.

What people said

Recommends theJuls · 2021-01 · Stack Overflow · on “Differenceses between Nextjs and React when trying to create a form”

@Juan-man No problem. Glad to help. Just so you know, usually Traversy Media covers absolutely everything in his crash course videos. He indexed it in the description. He teaches you how to use the form starting at [this video]

Recommends Snake_py · 2021-11 · Stack Overflow · on “Delete function in react native”

Hmm, okay I would recommend that you start with common react. It is easier to learn and you will get much more help. [this video]

Recommends Yedidya Rashi · 2022-06 · Stack Overflow · on “How to export a state in react native, and import it into another file? (NOT COMPONENT)”

State can't be import or export and only can be passed as a prop [LINK] or by using context API [LINK] . I would advise you to learn about state and react in general. Here are some resources: Official React docs [LINK] React JS Crash Course [this video]

Recommends Ayush Kumar · 2023-02 · Stack Overflow · on “setState not rendering the change immediately but rather after some other state changes”

I am learning React following this video [this video] , and while adding a new object to the state array containing all the tasks in this to-do list app changes are not getting immediately rendered but rather after some other state change when I write a different version of what I understand to be doing the same stuff from the video but if I exactly write video's version then its getting rendered immediately. Inside App.js : let initialTasks = [ { id: 1, title: "Doctor's Appointment", date: "10th Feb, 2023", reminder: true, }, { id: 2, title: "College Fest", date: "18th Feb, 2023", reminder: false, }, { id: 3, title: "Mid-Semester exams", date: "21th Feb, 2023", reminder: true, }, ]; let [tasks,

Cites theJuls · 2021-01 · Stack Overflow · on “Differenceses between Nextjs and React when trying to create a form”

It looks like you may be mixing up functional components and class based components along with a couple other issues. If you are to stick to the tutorial you linked to, UseForm needs to be a class and have to extend the React component, and you will also need the render function. As you can see on the code during this point on the video [LINK] You need to both import React and Component to implement a proper component. So basically this: import React, { Component } from 'react' export class UseForm extends Component { ... } I did also notice you are declaring consts in your return statement. This is incorrect. You don't declare anything in a return statement, it isn't the same as a function,

Cites Aike · 2021-02 · Stack Overflow · on “React App: "Module parse failed: Unexpected token"”

I watched a React.js tutorial and followed through every step, but it seems like I can't even get the first step right. The tutorial is here [this video] around the 16:10 mark. The instructions told me to download node.js / npm (my version is 6.13.4), and then run npm create-react-app (app name here) . I did it, and then right away tries to run npm start . The tutorial had no trouble doing so, but when I did it, it gave me this error: Failed to compile. ./src/index.js 1:57 Module parse failed: Unexpected token (1:57) File was processed with these loaders: * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js * ./node_modules/babel-loader/lib/index.js You may need an additional loa

Cites JohnElBasha · 2021-02 · Stack Overflow · on “ruby error ambiguous option: -s (OptionParser::AmbiguousOption) when serving react app”

Why am I getting this error while trying to run the build of my react-app? I am getting the following error while trying to serve the 'build' of my react app: command: serve -s build return: Traceback (most recent call last): 4: from -e:1:in `<main>' 3: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:324:in `httpd' 2: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:41:in `setup' 1: from /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:41:in `new' /Users/johnelbasha/.rbenv/versions/2.6.6/lib/ruby/2.6.0/un.rb:63:in `block in setup': invalid option: s (OptionParser::InvalidOption) 4: from -e:1:in `<main>' 3: from /Users/johnelbasha/.rbenv/versi

Cites Beach Bum Bob · 2021-02 · Stack Overflow · on “React app with Cross-Origin Request Blocked to localhost”

I'm new to both npm(and "siblings") and react. I still managed to create a user interface. My problem is to fetch data from my server, running on tomcat. I get the following error message: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [LINK] . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Note that I try to access the localhost, [LINK] . I also tried localhost and the actual IP address of the host. FYI - it all runs on a virtual(KVM)machine - not that it should matter. Pasting the address into firefox, chrome or Postman delivers the expected result. [{"key":"cff3da01-a4ed-4304-9138-5c97398c9005","userAgent":"Mozilla/5.0 (X11; Lin

Cites Kahalon · 2021-09 · Stack Overflow · on “Data structure for React weekly scheduler”

I want to create a weekly scheduler for workers that resembles google calendar using React. I am quite new to React and CSS so I am not sure as to what is the best data structure that represents the scheduler, that will enable the user to click on a section and it will open a form with that section details such as day, start-time and end-time. I have watched Traversy Media React JS Crash Course 2021 [this video] which was very helpful but I am still unsure about a good data structure that will give me the functionality of a calendar such as google's. Any Ideas?

Cites Enfield Li · 2021-11 · Stack Overflow · on “React, cannot reset checkbox to default unchecked state”

I'm trying reproduce Youtuber Traversy Media's React JS crash course 2021 [this video] Task Tracker project with Reactstrap, and using the same method (a component level hook) to create a form with a checkbox in it, and I set up a method, make sure after the form submitted, the text area will be set to empty and the checkbox set to false, and therefore unchecked. When I hit submit, the checkbox had set to false, but remain checked. [LINK] From the React dev tool, the value is reset to false and the checkbox should be unchecked, I don't know what went wrong, I did the exact same thing as the video did. I have problem pasting code here, so left out non-related part, like the input text code. Thanks