zakruti.com » IT - Software » freeCodeCamp.org

React Course - Beginner's Tutorial for React JavaScript Library [2022]

video description

Rating: 4.5; Vote: 2

Learn React by building eight real-world projects and solving 140+ coding challenges. React is one of the most popular front-end JavaScript libraries for building user interfaces. After completing this course, you will be able to build web apps in modern React, using patterns like functional components and hooks. 5:27 What we-ll learn 7:03 Fun facts about react link: https://www.figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3A1 9:08 First react https://reactjs.org/docs/cdn-links.html 17:13 First React Practice 19:04 Local Setup (the quick way) 21:03 Why React? 30:38 JSX 40:19 Goodbye, CDNs! 44:27 Thought Experiment 49:57 Project 1 Part 1 - MarkUp 57:44 Pop Quiz! 59:55 Components 1:33:07 Setup a local React environment w/ Create React App 1:33:53 Babel, Bundler, Build 1:34:47 Create React app: https://create-react-app.dev/ 1:35:56 How to install Node.js 1:36:06 Use nvm or nvm-windows 1:36:33 How to install Node.js 1:41:30 Styles and images with CRA https://create-react-app.dev/docs/adding-images-fonts-and-files/ https://create-react-app.dev/docs/using-the-public-folder/ 1:46:03 Quick Mental Outline of Project 1:50:00 Quick Figma Walkthrough https://www.youtube.com/watch?v=ybc2gkvjMDs&feature=youtu.be 1:51:43 Project Setup https://www.figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3A1 1:59:00 Navbar and Styling 2:06:18 Main Section 2:14:04 Color The Bullets 2:16:30 Add Background Logo 2:20:50 Section 1 Solo Project 2:22:23 Digital Business Card https://scrimba.com/links/figma-digital-business-card-sp 2:24:05 Share your work https://scrimba.com/links/solo-project-tweet https://scrimba.com/links/discord-i-built-this 2:24:45 Section 1 Recap https://scrimba.com/links/discord-today-i-did Build an AirBnb Experiences Clone 2:27:26 Section intro & Figma File https://scrimba.com/links/figma-airbnb-experiences 2:31:40 Project Setup: NavBar & Hero 2:43:11 Project Card Component 2:50:32 Problem - Not Reusable 2:52:29 Props 3:18:42 Prop Quiz (Get it?) 3:23:10 Destructuring Props 3:27:05 Props practice 3:36:12 Passing in non-string Props 3:40:11 Project: Pass props to component 3:47:08 Review - Array.map() 3:55:37 React render array 4:00:10 Mapping Components 4:04:46 Map Quiz 4:08:26 Loading Images from .map() 4:10:02 Projects 4:32:34 Spread objects as props 4:36:30 Section 2 solo project 4:37:14 Travel journal: https://scrimba.com/links/figma-travel-journal-sap 4:39:24 Share your work 4:39:52 Section 2 recap Build a Meme Generator 4:41:37 Section into and figma file https://scrimba.com/links/figma-meme-generator 4:45:48 Meme Generator: Header & Form 4:57:13 Project Analysis 4:58:20 Event Listeners 5:04:31 Project: Get random meme 5:10:15 Our current conundrum 5:18:26 Props vs. State 5:32:13 useState 5:37:57 Changing State 5:41:03 useState - Counter Practice 5:45:51 useState - Changing state with a callback Function 5:51:12 hanging State Quiz! 5:53:44 Project: Ass images to the meme generator 5:56:43 Challenge: Ternary Practice & flipping State back and forth 6:06:37 Complex State 6:27:46 Project: Refactor State 6:31:59 Passing state as props 6:37:54 Setting state from child components 6:44:25 Passing data around 6:50:53 Boxes Challenge 7:28:46 Conditional Rendering 7:48:49 React forms intro 7:52:17 Watch for input changes in React 7:56:49 Form inputs practice 7:59:13 Forms state object 8:07:18 Controlled inputs 8:11:35 Forms in React 8:47:04 Project: add text to image 8:51:05 Making API Calls 8:55:08 Intro to useEffect https://reactjs.org/docs/hooks-effect.html 9:00:54 useEffect() 9:42:46 Project:get memes from API 9:33:00 State and Effect Practices 9:40:05 useEffect cleanup function 9:46:00 Using an sync function inside useEffect 9:49:14 Section3 recap Build a Notes app and Tenzies Game 9:51:34 Section 4 Intro https://scrimba.com/links/figma-reactfacts-light-dark https://scrimba.com/links/figma-tenzies-game 9:54:09 Warm-up:Add Dark/Light modes to ReactFacts Site 10:00:50 Notes App Intro 10:10:47 Notes App Development 10:44:17 Tenzies Project Intro https://scrimba.com/links/figma-tenzies-game 10:45:38 Tenzies Setup & Game Development 11:24:35 Hold dice part 3 11:28:39 End game https://github.com/alampros/react-confetti#readme 11:40:31 Tenzies: New Game & Extra Credit ideas 11:44:15 Section 4 Solo Project 11:45:53 quiz https://scrimba.com/links/figma-quizzical 11:47:26 OTDB API https://opentdb.com/api_config.php Check out the class components crash course: https://scrimba.com/playlist/pBpayAz 11:49:32 Congrats on completing Module 1!
Date: 2022-03-14

← PyTorch and Monai for AI Healthcare Imaging - Python Machine Learning Course

10 Common Coding Interview Problems - Solved! →

Related videos

Turn Off This Hidden Parasite on Every Phone! (Android)

• Geeks Tutorial

AMD Threadripper 9980X 64-Core CPU Review & Benchmarks

• Gamers Nexus

How to Speed Up Windows 11 (Best Settings)

• Geeks Tutorial

AM4 Lives: AMD Ryzen 5 5500X3D CPU Review & Benchmarks

• Gamers Nexus

The ASUS Dumpster Fire

• Gamers Nexus

How to Delete Google Account Permanently (Quick & Easy)

• Geeks Tutorial

Comments and reviews: 10

staticvoidmain
For anyone following this using their choice of IDE, especially local, who's confused on why it doesn't work the way it is in the tutorial, the author explains it thoroughly in in-between chapters. In a gist, the author uses a specialized tool (scrimba). This can be annoying because you might end up googling a lot on why yours isn't working, only to find out later that the usual way is not the -standard way- according to how the author approaches it (and thus, addressed as an afterthought, albeit thoroughly). You might end up going back in chapters because the answer you're looking for now is answered later in the video.
reply

Andrzej
Thank you because you explain everything perfectly and it quickly gets to my head, but I have one problem and I don't know what it is related to. At 3:10:20 you talk about props and I checked everything 30 times and I have it written the same as you but my component doesn't display images can you write me why? it doesn't make sense to write my code here because I have everything the same as you. it just doesn't show the picture and instead there's a torn icon. I also ask the community with this question. thanks.
reply

Jashan
I am so glad that I found this course. I have to complete my assessments for the job.
I had made many react web apps like a year ago so needed to catch up again.
I tried Udemy before, youtube, honestly this is way far the best course, he not only shows how things work but why it works. Most others courses (even paid) I tried before just showed how code works and not why it works.
Thank you so much!
reply

Diestro
This course was an awsome experience. I recommend doing it on Scimba if you can (it's free). Take your time to understand every concept, but I can assure you that you'll end the course knowing and comprehending React while building projects.
Best course I've taken in a long time. Thanks, Bob.
reply

Sam
I just woke up, so maybe I'm being dumb, but how the hell did he just type a bullet point at 2:46:38? Is it a plugin like the one that can turn certain combinations of symbols into 1 character like => becomes an actual arrow, === because a triple bar equals sign etc?
reply

Deatho0ne
Scrimba is nice, but no thanks to React. Watched about 20% of it there before I understood the below.
Give me Angular, Vue, or AlpineJS. I just do not want to write HTML inside of Javascript ever. Can I just write the JSX object that I can pass to reactDom?
reply

edward
13:38 in and It just looks like another dumb egotist coder nightmare . Can't I just do all the stuff these myriad new clump junkers can do , by my lonesome self using vanilla ? Where I have to at least know what I'm doing , and know what EXACTLY is going on !
reply

Toby
Hands down the BEST react tutorial I have ever done
it ultimately boils down to the teaching methods Bob uses
Love the way Scrimba platform is set up too
Couldn't praise the Scrimba team enough!! Big ups!!
reply

sink
A question for people who have completed the course. Is the course enough to give a good understanding of react and deploy your own frontends? or is it just a start and the road ahead is long and arduous? lol
reply

dmcs2003
Thanks for the fun! You mentioned arouin1:40 or so, there might be a class on setting up the react apps, rather than just programming them. I like this format, is there a class on setting up React apps.
reply

Add a review, comment