React Hooks Tutorial - A Crash Course on Styled Components, JSX, React Router, and HOC

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=iVRO0toVdYM


Duration: 1:55:21
49,124 views
1,089

Learn about React Hooks and Styled Components in this full tutorial.

We'll build a React video player where you can create a list of videos and select from the list. The video player can play both Vimeo and YouTube videos and will also persist state in local storage of played videos.

💻 https://github.com/weibenfalk/hooks-videoplayer-starterfiles

🎥 Course created by Thomas Weibenfalk. Check out his YouTube channel: https://www.youtube.com/user/Weibenfalk

In this course you'll learn:
∙ React Fundamentals with Hooks
∙ Stateless Functional Components
∙ JSX syntax and expressions
∙ Styled Components
∙ Higher Order Components (HOC)
∙ React Router
∙ Use Create-React-App
∙ Deploy the finished App
∙ ES6+ concepts and syntax
∙ Use Local Storage to keep state

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction and Setup
⌨️ (0:07:50) Scaffolding
⌨️ (0:15:50) Setting Up the Routes
⌨️ (0:18:45) Styled Components - Global Styling
⌨️ (0:25:27) Styled Components - Component Styling
⌨️ (0:34:09) Styled Components - Themes
⌨️ (0:50:11) Preparing for Hooks
⌨️ (0:59:15) Pre-Example
⌨️ (1:02:49) useState
⌨️ (1:13:23) useEffect
⌨️ (1:21:57) Higher Order Components
⌨️ (1:28:03) Callback Functions
⌨️ (1:40:35) Persisting State in Local Storage
⌨️ (1:45:19) Deploying
⌨️ (1:49:10) useCallback

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://www.freecodecamp.org/news



Other Videos By freeCodeCamp.org


2019-08-14How to Build Tetris in React - GameDev Tutorial (with React Hooks!)
2019-08-13Learn Angular Material - Full Tutorial
2019-08-07Python NumPy Tutorial for Beginners
2019-08-05Kotlin Programming Fundamentals Tutorial - Full Course
2019-08-02In-Depth React Tutorial: Build a Hotel Reservation Site (with Contentful and Netlify)
2019-07-29Full Ethical Hacking Course - Network Penetration Testing for Beginners (2019)
2019-07-26Svelte Tutorial - Is it better than React?
2019-07-24Dart Programming Tutorial - Full Course
2019-07-22Godot Game Engine Tutorial - Make a 2D Platformer Game
2019-07-19Solidity Tutorial - A Full Course on Ethereum, Blockchain Development, Smart Contracts, and the EVM
2019-07-17React Hooks Tutorial - A Crash Course on Styled Components, JSX, React Router, and HOC
2019-07-16Deep Reinforcement Learning in Python Tutorial - A Course on How to Implement Deep Learning Papers
2019-07-15Intermediate React and Firebase Tutorial - Build an Evernote Clone
2019-07-12Kotlin Course - Tutorial for Beginners
2019-07-10Learn GraphQL with Laravel and Vue.js - Full Tutorial
2019-07-08Getting Started with Node.js - Full Tutorial
2019-07-05Linux for Ethical Hackers (Kali Linux Tutorial)
2019-07-03Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps)
2019-07-01Data Visualization with D3.js - Full Tutorial Course
2019-06-28Build Your First Blockchain App Using Ethereum Smart Contracts and Solidity
2019-06-25Learn the MERN Stack - Full Tutorial (MongoDB, Express, React, Node.js)


Tags:
react
react hooks
react styled components
styled components
react tutorial
react hooks tututorial
react course
javascript
front end