Skip to content
Hallway
0:00 / 0:00

#react#javascript#scrimba

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

freeCodeCamp.org

12M subscribers • 34 videos on Hallway

YouTube
  • Recommended by 3 people: 3 in engineering communities.
  • Presented by Bob Ziroll, Head of Education at Scrimba
  • Linked in the descriptionalampros/react-confetti
  • May be out of date. The tools, versions or practices it shows have likely moved on.

Beginner. No background in the topic needed.

4.2M views4 years ago3 recommendations

Web developmentReactVue, Svelte, Angular and othersJavaScript

Bob Ziroll teaches React fundamentals by building eight real-world projects and solving interactive coding challenges.

🎉 Watch the updated version of this course: youtu.be/x4rFhThSX04 Learn React by building eight real-world projects and solving 140+ coding challenges. You can also follow this course interactively on Scrimba: scrimba.com/learn/learnreact 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. ✏️ This teacher is Bob Ziroll, Head of Education at Scrimba. Code is available on the Scrimba course page for each lesson. Scrimba on YouTube: youtube.com/c/Scrimba Bob on Twitter: twitter.com/bobziroll Introduction What we’ll learn Fun facts about react link: figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3… First react reactjs.org/docs/cdn-links.html First React Practice Local Setup (the quick way) Why React? JSX Goodbye, CDNs! Thought Experiment Project 1 Part 1 - MarkUp Pop Quiz! Components Setup a local React environment w/ Create React App Babel, Bundler, Build Create React app: create-react-app.dev/ How to install Node.js Use nvm or nvm-windows How to install Node.js Styles and images with CRA create-react-app.dev/docs/adding-images-fonts-and-files/ create-react-app.dev/docs/using-the-public-folder/ Quick Mental Outline of Project Quick Figma Walkthrough youtube.com/watch?v=ybc2gkvjMDs&feature=youtu.be Project Setup figma.com/file/xA1rJVQOorqMW6xjGdBLcI/ReactFacts?node-id=0%3… Navbar and Styling Main Section Color The Bullets Add Background Logo Section 1 Solo Project Digital Business Card scrimba.com/links/figma-digital-business-card-sp Share your work scrimba.com/links/solo-project-tweet scrimba.com/links/discord-i-built-this Section 1 Recap scrimba.com/links/discord-today-i-did Build an AirBnb Experiences Clone Section intro & Figma File scrimba.com/links/figma-airbnb-experiences Project Setup: NavBar & Hero Project Card Component Problem - Not Reusable Props Prop Quiz (Get it?) Destructuring Props Props practice Passing in non-string Props Project: Pass props to component Review - Array.map() React render array Mapping Components Map Quiz Loading Images from .map() Projects Spread objects as props Section 2 solo project Travel journal: scrimba.com/links/figma-travel-journal-sap Share your work Section 2 recap Build a Meme Generator Section into and figma file scrimba.com/links/figma-meme-generator

Why it's here

3 people recommend this

What people say. Recommended as a comprehensive, beginner-friendly course for learning React and modern frontend development practices.

u/LakeInTheSkyin r/Frontend • Recommends

On “I'm a recent graduate with no luck with jobs. I want to get into webdev and have 3 months to study full time”

If you already know HTML and CSS, Focus on JavaScript Free course here and React Free course here. Everyone learns differently, so it's hard to know if you'll make it in three months. But remember to practice often and consistently. That's how you develop any skill. Good luck!
4View on Reddit

u/7aylodin r/Frontend • Recommends

On “What is the best site/tutorial to learn react? I’m hoping to build a portfolio website and any tip or help is appreciated.”

Freecodecamp has a ton of video series like this one that will get you going link to this video They also have react in their curriculum, but I don't know when it was last updated. https://www.freecodecamp.org/learn/front-end-development-libraries/#react I used that the first time I tried react and it got me up and running pretty quickly. Best of luck!
1View on Reddit

u/Azby78in r/Frontend • Recommends

On “F**king React”

Yeah keep it real simple for now. Look up the 'shadow DOM' in regards to React. Try set up a single component locally on your machine and get it running. Make a button and use the click handler to print something to the console or something like that and work from there. Here's a pretty long and in-depth react course: link to this video
1View on Reddit