Get commenced with Respond in this crash course. We will be building a activity tracker app and look at components, props, condition, hooks, functioning with an API and extra.
Code:
React & Other Study course Backlinks at –
π Help The Channel!
Timestamps:
:00 – Intro & Slides
12:37 – Create a Respond application
14:52 – Data files & folders
18:54 – App ingredient & JSX
22:39 – Expressions in JSX
23:49 – Building a ingredient
27:18 – Element Props
28:50 – PropTypes
30:42 – Styling
34:17 – Button Part
37:46 – Events
40:18 – Jobs Part
41:03 – Create a record with .map()
43:07 – State & useState Hook
44:55 – Worldwide condition
46:52 – Undertaking Element
49:30 – Icons with respond-icons
51:41 – Delete activity & prop drilling
55:50 – Optional concept if no jobs
56:58 – Toggle reminder & conditional styling
1:03:13 – Include Activity Variety
1:06:16 – Form input condition (managed elements)
1:09:18 – Add job post
1:14:36 – showAddTask state
1:15:58 – Button toggle
1:19:33 – Establish for generation
1:21:51 – JSON Server
1:25:53 – useEffect Hook & Fetch responsibilities from server
1:30:13 – Delete task from server
1:31:51 – Increase endeavor to server
1:35:15 – Toggle reminder on server
1:39:15 – Routing, footer & about
Hope you enjoy! This is obviously geared toward people learning React. I have a React project playlist for more project based videos as well as a few Udemy courses. I will also be updating my Vue, Angular crash courses and many others
Unhandled Rejection (TypeError): Failed to execute 'json' on 'Response': Illegal invocation
βΆ 2 stack frames were collapsed.
getTasks
C:/Users/MYNAME/All_Works/react/projects/todolist/src/App.js:12
9 | useEffect(() => {
10 | const getTasks = async () => {
11 | const tasksFromServer = await fetchTasks()
> 12 | setTasks(tasksFromServer)
| ^ 13 | }
14 | getTasks()
15 | }, [])
Please help me out
Anyone know why when delete a task on refresh it doesnt show anymore
or when I make a new tasks it just shows "no tasks to show" even tho its in the script
Hi Traversy, any plans to do another crash course on redux with hooks? eagerly waiting for that video.
I finished the whole video and it is my first time to learn react up to the end . Hope this will become my new skill
Here's the json just to save your time:
const tasks = [
{
id : 1,
text : 'Meeting at school',
day : 'Feb 5th at 1:30 pm',
reminder : true
},
{
id : 2,
text : 'Food shopping',
day : 'Feb 6th at 1:30 pm',
reminder : true
},
{
id : 3,
text : 'Enjoy',
day : 'Feb 5th at 2:30 pm',
reminder : false
}
]
1:29:46 – your db.json file has the wrong "id" key for the second object. The key is "d" instead of "id" in your case.
I've taken several courses on Udemy to understand severals sections that a single course could not explain. To be honest, this single video would have saves me all those money! Highly recommended and for this I'm gonna subscribe.
A quick note for anyone coming up here in June 2021 and using most recent create-react-app will not install props-type! If you want to use it, it has to be installed manually using npm install –save props-type or the equivalent in yarn.
excellent
Very messy sorry not organized, adding all the codes, functions and if statements inside the props right in the component jsx is very messy,
I guess they could be added all for each component just before the export default component
As component.defaultProps
How do you auto format the code? Is there a keyboard shortcut for that? Like at 1:00:47, the code gets reformatted really quickly, and I want to know how to do that
I copied and pasted your exact CSS, but for some reason, that box around all the text doesn't show up for me. Do you know why?
Wow, take my money. Best video tutorial I've seen in a long time. I'm gonna check out your React Front to Back course.
μλΉ - react κ΅κ³Όμ μ λλ€~
Not sure if this was covered, but when I tried to run json server on another port, I got a cors error. Putting a proxy entry in the package.json to match the port you're using for your json-server fixes it.
What extension is he using that organizes his code every time he saves? I'm trying to use some extensions to beautify the code but they don't seem to work
This video is absolutely incredible. Thanks very much!
I think the reason you had the problem at 1:29:00 is that your second task has a 'd' property, not 'id'.
edit: turns out you worked it out at 1:35:00 π
For me, this way of programming is a complete mess. I can't even imagine a huge application using something like this.
you are genius.. thanks a lot
Thank you so much! That was so helpful
How to implement edit functionality? any tips?
@Traversy Media, can you make a tutorial where you add a real MEN backend to this app?
When i run the installations, i always get something like "found 87 vulnerabilities (82 moderate, 5 high), why do you think this could be?
I was able to type fast enough to keep up on your Bootstrap course, but this one really taxed my brain. Thanks for presenting these complex topics in warp speed; helps to build brain cells.
Finally a react instructional video that doesn't give me an anxiety attack. kudos!
Excellent course, thanks a ton for this! Functional React is the way to go… i tried Codecademy Pro class but they're focussing on Class based React, which is realllllly confusing.
Such an amazing video. Straight to the point, and really appreciate how you also included routers, full-stack, and shortcuts that you found useful.
A question: Is it possible to call a python script (.py) once I click a button?
What does mean Ui? 4:23
Hi! I am Data Scientist and want to get into React to build simple dashboard for to put deployed Machine Learning models into some kind of nice user interface. Could you recommend any jump start of learning path to it? π
Thanx. I used to work a lot with Vue.js and over and over again giving React a chance. But almost everything makes me think "With Vue its so much easier". Guess it all comes back to using a library (React) vs a framework (Vue).
Great!! and well explained … thanks!
Thanks for the video, I'm learning React to make react web app in my works.
This is so much helpful, thanks a lot Brad <3
"prop-types", "PropTypes", and "propTypes" are all used in the same file. It hurts
What is this color theme! It looks so nice.
please explain task.id!==id on the setTasks statement
Just starting out on React & this tutorial is gold. Thanks Brad
Do I have to install react-app again every time I start a new project?
Please reply anyone