udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Современный React Bootcamp (с Hooks, React Router и др.)
The Modern React Bootcamp (Hooks, Context, Router & More)
★4.6 (всего оценок - 58)
Продолжительность
38 ч 52 мин
Категория
React.jsКоличество уроков
309 Видео
Дата добавления
22 апр. 2019 г., 04:33
Язык
Английский
Дата выхода
10 апр. 2019 г., 07:20
Дата обновления
11 мар. 2023 г., 08:03
Следуйте той же программе, которую я преподаю своим студентам в SF. 10+ проектов, включая одно ОГРОМНОЕ приложение! Добро пожаловать на лучший онлайн ресурс для изучения React! Этот курс, опубликованный в апреле 2019 года, является совершенно новым и охватывает последние новости React. Этот курс следует точно такой же программе React, которой следуют мои ученики буткемпа в Сан-Франциско, где студенты продолжают работать в таких местах, как Google, Apple, Pinterest и Linkedin. Это самый совершенный онлайн-курс React, и это единственный курс, основанный на учебной программе REAL bootcamp, которая была опробована и протестирована в классе.
Этот курс строит концепции по одному, закрепляя каждую новую тему с помощью специально разработанного упражнения или проекта для проверки ваших знаний. Он включает в себя огромное разнообразие красивых упражнений, проектов и игр, которые мы создаем вместе с нуля. Иногда мы смешиваем вещи и даем вам сломанное приложение React и просим вас исправить это или оптимизировать код. Посмотрите промо-видео, чтобы увидеть пару упражнений курса. Курс завершается одним огромным проектом-замком, который является самым крупным проектом, который я когда-либо создавал для любых моих онлайн-курсов.
React - самая популярная библиотека JS в мире, и никогда не было лучшего времени для ее изучения! Компании по всему миру обращаются к React, чтобы помочь справиться с хаосом JavaScript, включая таких технологических гигантов, как Facebook, Airbnb и Uber. React неизменно признается разработчиками самым любимым и наиболее востребованным интерфейсом, и понятно почему! React очень удобен в использовании, и он делает написание обслуживаемого и модульного кода JavaScript проще простого.
Если вы новичок в фреймворках, React - это идеальный первый фреймворк для изучения. Даже если вы уже записались на другой курс React, этот курс стоит вашего времени только на упражнения и проекты! Этот учебный план является продуктом двухлетней разработки и повторения в классе bootcamp. Все лекции, упражнения и проекты были доработаны и улучшены на основе реальных отзывов студентов. Вы не найдете в Интернете ничего более структурированного и отточенного, чем этот курс.
- Изучите React, от самых базовых до сложных тем, таких как компоненты высшего уровня и крючки.
- Создайте одно мощное приложение, включающее перетаскивание, анимацию, переходы по маршруту, сложные проверки форм и многое другое.
- Узнайте последние новости о React, включая Hooks (моя любимая часть React!). Мы создаем полное приложение с использованием хуков, включая несколько пользовательских хуков.
- Вы получаете тонны подробных раздаточных материалов и листовок, к которым вы можете обращаться в любое время. Думайте об этом как о учебнике React, который вы можете изучать в любой момент, если вам надоест видео.
Что вы получаете:
- 250+ видео
- Гладкие интерактивные слайды, изготовленные на заказ для каждого раздела
- Подробные раздаточные материалы и шпаргалки, Реакт "Учебник".
- Десятки упражнений, проектов и викторин
- Один масштабный проект с кодом около 20 различных компонентов React.
- Бесплатный мини-курс Webpack!
Посмотреть больше
- Урок 1.00:01:43Welcome to the Course!
- Урок 2.00:03:36Intro to React
- Урок 3.00:05:04Is React a Framework or Library?
- Урок 4.00:10:33Introducing Components!
- Урок 5.00:04:32Looking at a Large App
- Урок 6.00:03:45Setting Up Your Server
- Урок 7.00:09:33Writing Our First Component
- Урок 8.00:04:10Function Vs. Class Components
- Урок 9.00:05:06Download All Code, Slides, & Handouts
- Урок 10.00:04:44Basics Rules of JSX
- Урок 11.00:03:33How JSX Works Behind the Scenes
- Урок 12.00:03:45Embedding JavaScript in JSX
- Урок 13.00:09:14Conditionals in JSX
- Урок 14.00:05:09Standard React App Layout
- Урок 15.00:05:58Intro to React Props
- Урок 16.00:02:22Props are Immutable?
- Урок 17.00:05:54Other Types of Props
- Урок 18.00:02:04Pie Chart Component Demo w/ Props
- Урок 19.00:01:38EXERCISE: Slot Machine
- Урок 20.00:06:48EXERCISE: Slot Machine Solution
- Урок 21.00:05:20Looping in JSX
- Урок 22.00:02:43Adding Default Props
- Урок 23.00:08:57Styling React
- Урок 24.00:02:59Intro to Create React App
- Урок 25.00:04:262 Ways of Installing CRA
- Урок 26.00:05:07Creating a New App
- Урок 27.00:05:07Starting Up the Server
- Урок 28.00:11:06Modules: Import & Export Crash Course
- Урок 29.00:02:44EXERICSE: Fruits Modules
- Урок 30.00:07:40EXERCISE: Fruits Modules Solution
- Урок 31.00:03:11Create React App Conventions
- Урок 32.00:07:52CSS and Assets in Create React App
- Урок 33.00:07:02Intro To Pokedex Exercise
- Урок 34.00:07:40Creating Pokecard Component
- Урок 35.00:04:29Adding Pokedex Component
- Урок 36.00:06:29Styling PokeCard and Pokedex
- Урок 37.00:02:44Adding Fancier Images
- Урок 38.00:09:17The PokeGame Component
- Урок 39.00:09:13Styling Pokegame
- Урок 40.00:02:02State Goals
- Урок 41.00:03:13Quick Detour: React Dev Tools
- Урок 42.00:03:34State in General
- Урок 43.00:08:38Initializing State
- Урок 44.00:09:18IMPORTANT! ALTERNATE SYNTAX
- Урок 45.00:07:25WTF is super() Vs. super(props)
- Урок 46.00:10:25Setting State Correctly
- Урок 47.00:10:50Crash Course: Click Events in React
- Урок 48.00:05:53ALTERNATE SYNTAX PT 2
- Урок 49.00:01:49EXERCISE: State Clicker
- Урок 50.00:07:26EXERCISE: State Clicker Solution
- Урок 51.00:03:03The "State As Props" Design Pattern
- Урок 52.00:08:22Introduction to Dice Exercise
- Урок 53.00:06:08Writing the Die Component
- Урок 54.00:09:03Adding the RollDice Component
- Урок 55.00:04:06Styling RollDice
- Урок 56.00:10:37Animating Dice Rolls!
- Урок 57.00:10:42Updating Existing State
- Урок 58.00:10:16Mutating State the Safe Way
- Урок 59.00:04:05Designing State: Minimizing State
- Урок 60.00:04:02Designing State: Downward Data Flow
- Урок 61.00:03:52State Design Example: Lottery
- Урок 62.00:04:03State Design Example: LottoBall Component
- Урок 63.00:11:35State Design Example: Lottery Component
- Урок 64.00:02:46State Exercise 1: Coin Flipper
- Урок 65.00:18:30State Exercise 1: Coin Flipper Solution
- Урок 66.00:02:36State Exercise 2: Color Boxes
- Урок 67.00:10:17State Exercise 2: Color Boxes Solution
- Урок 68.00:09:45Commonly Used React Events
- Урок 69.00:09:37The Joys of Method Binding :(
- Урок 70.00:05:04Alternative Binding With Class Properties
- Урок 71.00:05:51Binding With Arguments
- Урок 72.00:12:01Passing Methods to Child Components
- Урок 73.00:02:05Parent-Child Method Naming
- Урок 74.00:07:44Quick Detour: React Keys
- Урок 75.00:08:01Introducing The Hangman Exercise
- Урок 76.00:10:08Starter Code Walkthrough
- Урок 77.00:01:45Adding Keys
- Урок 78.00:01:37Tracking Incorrect Guesses
- Урок 79.00:06:20Adding Game Over
- Урок 80.00:01:55Adding Alt Text
- Урок 81.00:02:18Randomizing Words
- Урок 82.00:03:14Adding a Reset Button
- Урок 83.00:08:24Making the Game Winnable & Styling
- Урок 84.00:03:08Introducing Lights Out
- Урок 85.00:09:29Exploring the Starter Code
- Урок 86.00:11:17Displaying the Game Board
- Урок 87.00:05:10Flipping Cells
- Урок 88.00:03:25Winning the Game
- Урок 89.00:11:04Styling the Game
- Урок 90.00:10:54Intro to React Forms
- Урок 91.00:07:22Writing Forms w/ Multiple Inputs
- Урок 92.00:01:27The htmlFor Attribute
- Урок 93.00:10:29Design Pattern: Passing Data Upwards
- Урок 94.00:03:33Using the UUID Library
- Урок 95.00:01:59Introduction to Box Maker Exercise
- Урок 96.00:06:17Adding the BoxList Component
- Урок 97.00:08:13Creating the BoxForm Component
- Урок 98.00:06:09Removing Color Boxes
- Урок 99.00:02:10Project Overview
- Урок 100.00:05:00TodoList and TodoItem Components
- Урок 101.00:06:04Adding NewTodoForm
- Урок 102.00:06:35Removing Todos
- Урок 103.00:12:09Editing Todos
- Урок 104.00:05:32Toggling Todo Completion
- Урок 105.00:10:44Styling the Todo App
- Урок 106.00:08:17Introducing Yahtzee
- Урок 107.00:13:17Yahtzee Starter Code Walkthrough
- Урок 108.00:09:34Fixing the Dice Locking Bug
- Урок 109.00:16:03Reading the Rules Classes
- Урок 110.00:09:51Adding In New Rules
- Урок 111.00:08:14Fixing the Re-Rolling Bug
- Урок 112.00:09:22Preventing Score Reuse
- Урок 113.00:04:01Adding Score Descriptions
- Урок 114.00:14:08Replacing Text w/ Dice Icons
- Урок 115.00:13:46Animating Dice Rolls
- Урок 116.00:09:18Final Touches and Bug Fixes
- Урок 117.00:08:48Introducing ComponentDidMount
- Урок 118.00:06:57Loading Data Via AJAX
- Урок 119.00:04:58Adding Animated Loaders
- Урок 120.00:07:03Loading Data With Async Functions
- Урок 121.00:04:21Introducing ComponentDidUpdate
- Урок 122.00:06:38PrevProps and PrevState in ComponentDidUpdate
- Урок 123.00:02:23Introducing ComponentWillUnmount
- Урок 124.00:03:56Introducing the Cards API Project
- Урок 125.00:05:25Requesting a Deck ID
- Урок 126.00:10:38Fetching New Cards with AJAX
- Урок 127.00:03:37Adding the Card Component
- Урок 128.00:07:01Randomly Transforming Cards
- Урок 129.00:05:30Styling Cards and Deck
- Урок 130.00:06:02Introducing the Dad Jokes Project
- Урок 131.00:07:43Fetching New Jokes From the API
- Урок 132.00:10:08Styling JokeList Component
- Урок 133.00:09:02Upvoting and Downvoting Jokes
- Урок 134.00:06:00Styling the Joke Component
- Урок 135.00:03:51Adding Dynamic Colors and Emojis
- Урок 136.00:05:37Syncing with LocalStorage
- Урок 137.00:03:55Fixing Our LocalStorage Bug
- Урок 138.00:03:30Adding a Loading Spinner
- Урок 139.00:08:08Preventing Duplicate Jokes
- Урок 140.00:02:36Sorting Jokes
- Урок 141.00:04:57Styling The Fetch Button
- Урок 142.00:06:36Adding Animations
- Урок 143.00:09:49Intro to Client-Side Routing
- Урок 144.00:06:08Adding Our First Route
- Урок 145.00:07:21Using Switch and Exact
- Урок 146.00:03:38Intro to the Link Component
- Урок 147.00:03:22Adding in NavLinks
- Урок 148.00:09:25Render prop vs. Component prop in Routes
- Урок 149.00:02:14Intro to Vending Machine Exercise
- Урок 150.00:04:34Adding The Vending Machine Routes
- Урок 151.00:04:18Adding the Links
- Урок 152.00:06:22Creating the Navbar
- Урок 153.00:07:03NEW CONCEPT: Props.children
- Урок 154.00:12:47Working with URL Params
- Урок 155.00:05:11Multiple Route Params
- Урок 156.00:03:12Adding a 404 Not Found Route
- Урок 157.00:05:21Writing a Simple Search Form
- Урок 158.00:04:45The Redirect Component
- Урок 159.00:06:14Pushing onto the History Prop
- Урок 160.00:03:06Comparing History and Redirect
- Урок 161.00:04:32withRouter Higher Order Component
- Урок 162.00:02:58Implementing a Back Button
- Урок 163.00:03:28Exercise Introduction
- Урок 164.00:06:51Working with Bootstrap in React
- Урок 165.00:09:31Writing the DogList Component
- Урок 166.00:13:42Adding the DogDetails Component
- Урок 167.00:10:01Creating Our Navbar Component
- Урок 168.00:02:44Refactoring & Extracting Our Routes
- Урок 169.00:03:14A Couple Small Tweaks
- Урок 170.00:11:43Styling the App
- Урок 171.00:09:17Introducing the Color App
- Урок 172.00:07:49The New Stuff We Cover in This Project
- Урок 173.00:01:58Finding the Final Project Code
- Урок 174.00:06:00Creating the Palette Component
- Урок 175.00:06:50Color Box Basics
- Урок 176.00:10:35Styling Color Box
- Урок 177.00:03:27Copying to Clipboard
- Урок 178.00:14:51Copy Overlay Animation
- Урок 179.00:17:12Generating Shades of Colors
- Урок 180.00:07:40Adding Color Slider
- Урок 181.00:06:04Styling the Color Slider
- Урок 182.00:09:24Adding Navbar Component
- Урок 183.00:13:51Intro to Material UI & Adding Select
- Урок 184.00:12:10Adding Snackbar
- Урок 185.00:04:31Add Palette Footer
- Урок 186.00:04:09Integrating React Router
- Урок 187.00:04:03Finding Palettes
- Урок 188.00:06:03PaletteList and Links
- Урок 189.00:10:51Introducing withStyles HOC
- Урок 190.00:06:52Styling MiniPalette with JSS
- Урок 191.00:07:38Styling PaletteList with JSS
- Урок 192.00:07:47Finishing Up MiniPalette
- Урок 193.00:06:27Linking To Palettes
- Урок 194.00:05:21Brainstorming Single Color Palette
- Урок 195.00:06:31Adding More Links
- Урок 196.00:08:29Creating Single Color Palette
- Урок 197.00:12:43Displaying Shades in Single Color Palette
- Урок 198.00:09:25Adding Navbar and Footer
- Урок 199.00:09:49Add Go Back Box
- Урок 200.00:11:23Dynamic Text Color w/ Luminosity
- Урок 201.00:17:32Refactoring More Styles
- Урок 202.00:06:55Finish Refactoring Color Box
- Урок 203.00:08:12Refactor Palette Styles
- Урок 204.00:06:37Move Styles Into New Folder
- Урок 205.00:08:47Refactor Navbar CSS
- Урок 206.00:05:47Overview of PaletteForm
- Урок 207.00:04:59Adding NewPaletteForm
- Урок 208.00:11:22Adding Slide-Out Drawer
- Урок 209.00:09:47Adding Color Picker Component
- Урок 210.00:08:48Connecting Color Picker to Button
- Урок 211.00:07:21Creating Draggable Color Box
- Урок 212.00:12:29Introducing Form Validator
- Урок 213.00:11:02Saving New Palettes
- Урок 214.00:10:18Add Palette Name Form
- Урок 215.00:06:50Styling Draggable Color Box
- Урок 216.00:04:42Adding Color Box Delete
- Урок 217.00:14:59It's Drag and Drop Time!
- Урок 218.00:11:06Clear Palette and Random Color Buttons
- Урок 219.00:13:08Extract New Palette Nav
- Урок 220.00:11:49Extract Color Picker Component
- Урок 221.00:05:44Styling Palette Form Nav
- Урок 222.00:10:05Styling Color Picker
- Урок 223.00:07:35Adding Modals/Dialogs
- Урок 224.00:08:50Styling Dialog
- Урок 225.00:05:23Closing Form & Adding Emoji
- Урок 226.00:12:24Finish Emoji Picker Form
- Урок 227.00:06:55Moving JSS Styles Out
- Урок 228.00:07:09Tweak Form Styles
- Урок 229.00:05:03Saving to LocalStorage
- Урок 230.00:07:01Adding MiniPalette Delete Button
- Урок 231.00:08:53Finish MiniPalette Delete
- Урок 232.00:14:18Create Responsive Sizes Helper
- Урок 233.00:07:35Make Color Box Responsive
- Урок 234.00:09:01Make Form & Navbar Responsive
- Урок 235.00:08:46Make Palette List Responsive
- Урок 236.00:08:08Add SVG Background
- Урок 237.00:12:15Fade Animations w/ Transition Group
- Урок 238.00:16:53Delete Confirmation Dialog
- Урок 239.00:03:25Fix Delete/Drag Bug
- Урок 240.00:08:22Animating Route Transitions
- Урок 241.00:09:04Refactoring Route Transitions
- Урок 242.00:07:58Optimizing w/ PureComponent
- Урок 243.00:03:59Cleaning Things Up
- Урок 244.00:07:24More Cleaning Up!
- Урок 245.00:06:03Fix Issues w/ New Palette Form
- Урок 246.00:05:06Prevent Duplicate Random Colors
- Урок 247.00:11:10Intro to Hooks & useState
- Урок 248.00:15:28Building a Custom Hook: useToggleState
- Урок 249.00:15:26Building a Custom Hook: useInputState
- Урок 250.00:06:46The useEffect Hook
- Урок 251.00:12:17Fetching Data w/ the useEffect Hook
- Урок 252.00:10:16Intro to Hooks Project
- Урок 253.00:07:57Adding Our Form With Hooks
- Урок 254.00:10:39Adding Todo Item Component
- Урок 255.00:08:28Toggling and Deletion w/ Hooks
- Урок 256.00:12:07Editing w/ Hooks
- Урок 257.00:04:57Small Style Tweaks
- Урок 258.00:05:38LocalStorage w/ UseEffect Hook
- Урок 259.00:06:11Refactoring to a Custom Hook
- Урок 260.00:13:44Creating our UseLocaslStorateState Hook
- Урок 261.00:02:45Where We Are Heading
- Урок 262.00:08:35What Even is Context?
- Урок 263.00:18:49Adding a Responsive Navbar To Our Context App
- Урок 264.00:14:45Adding a Responsive Form to our Context App
- Урок 265.00:12:44Intro to Context and Providers
- Урок 266.00:07:57Consuming A Context
- Урок 267.00:05:06Updating A Context Dynamically
- Урок 268.00:13:39Writing the Language Context
- Урок 269.00:12:22Consuming 2 Contexts: Enter the Higher Order Component
- Урок 270.00:05:34Introducing the useContext Hook
- Урок 271.00:03:12Consuming Multiple Contexts w/ Hooks
- Урок 272.00:04:24Rewriting a Context Provider w/ Hooks
- Урок 273.00:04:42Context Providers w/ Custom Hooks
- Урок 274.00:03:04"Hookify-ing" the Rest of the App
- Урок 275.00:09:02Adding In Todos Context
- Урок 276.00:05:51Consuming the Todo Context
- Урок 277.00:10:02The Issues w/ Our Current Approach
- Урок 278.00:08:35WTF Is a Reducer
- Урок 279.00:12:14First useReducer Example
- Урок 280.00:13:26Defining our Todo Reducer
- Урок 281.00:06:46Splitting Into 2 Contexts
- Урок 282.00:05:46Optimizing w/ Memo
- Урок 283.00:07:25Custom Hook: Reducer + LocalStorage
- Урок 284.00:06:06Intro to Next
- Урок 285.00:11:52What is Server Side Rendering?
- Урок 286.00:08:29Getting Started w/ Next
- Урок 287.00:06:36Basic Routing in Next
- Урок 288.00:06:02Next's Link Component
- Урок 289.00:02:09Links Without Anchor Tags
- Урок 290.00:04:15Components Vs. Pages
- Урок 291.00:07:20Overriding the Default _app.js
- Урок 292.00:11:20Introducing getInitialProps
- Урок 293.00:11:04Fetching Posts w/ getInitialProps
- Урок 294.00:09:58Query Strings in Next
- Урок 295.00:02:54withRouter Higher Order Component
- Урок 296.00:08:07Fetching Comments
- Урок 297.00:04:30The "as" Prop
- Урок 298.00:13:14Custom Server Without Express
- Урок 299.00:12:42Custom Server-Side Routes w/ Express
- Урок 300.00:09:24What Is Webpack??
- Урок 301.00:14:24Installing and Running Webpack
- Урок 302.00:07:57Imports, Exports, and Webpack
- Урок 303.00:09:16Configuring Webpack
- Урок 304.00:15:15Webpack Loaders, CSS, & SASS
- Урок 305.00:13:34Cache Busting and Plugins
- Урок 306.00:10:17Splitting Dev & Production
- Урок 307.00:11:22Html-loader, file-loader, and Clean Webpack Plugin
- Урок 308.00:06:45Multiple Entry Points
- Урок 309.00:18:19Extract and Minify CSS
Автор - udemy
Комментарии
gborduckфайл не найден. не могу скачать
mblandrupdate please!
manishfiretv5Attachment is not correct
AnonymousPlease update.
AnonymousCan you please update this course? Last update from the instructor was on 3/2021. Thanks!
Rivaldo Rivaonly class component in the projects. this course would be better if the instructor used React Hooks for all projects not a lil sprinkle of hooks at the end of the course ! Colt never updates his courses either :(
anon92929 Rivaldo RivaI would still recommend this course. when working on legacy projects you might come up with class based components.
hazartilirot Rivaldo RivaWhat's the point in updating the course? It's easier to create a new course than updating the old one. There is nothing you can do. Technology is always becoming deprecated too soon. Just watch another course which is more relevant to you.