Intro to React.js

Intro to React.js

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 44 Lessons (5h 42m) | 1.39 GB

Learn how to write cleaner, more flexible Javascript with React.js, an open-source frontend framework. Create beautiful websites with user interface components and easy-to-understand code!

As an ever-evolving, popular frontend library, React is widely used throughout the web. Even the SuperHi Editor and website are built with React!

In this course, we’ll take a practical approach to building creative, interactive UIs. You’ll learn how to build reusable components and modular layouts, that can be moved around and rearranged easily.

What you’ll learn

  • What React is and why it’s great for quickly building feature-rich websites
  • React’s main concepts and how they compare to regular Javascript
  • Modern React best practices and hooks
  • How to think about web development in terms of reusable components
  • How to build rich user experiences and fetch data from backend database
  • How to find and work with the best React libraries and plugins
Table of Contents

1 Welcome to Intro to React.js
2 Introducing React
3 Introduction to Zesty
4 Getting started with CodeSandbox
5 Breaking down the App component
6 Building Zesty
7 Creating a global state
8 Intro to hooks and event handlers
9 Updating the index position with an event handler
10 Adding an index counter and refactoring HTML/CSS
11 Creating a loading component
12 Writing the loading logic
13 Making our project responsive
14 Introduction to MilkyMood
15 Introduction to Styled Components
16 Building the Header component
17 Building the Footer component
18 Building the Image component
19 Using a matrix to slice the image into a puzzle
20 Using hooks, event handlers, and maths to calculate the cursor distance
21 Setting new positions for the image squares
22 Changing the background color and glow animation based off of the image’s status
23 Adding responsive styles
24 Introduction to MilkyMood, Part 2
25 Creating a sign up button and modal window
26 Adding functionality to the modal window
27 Creating a Basic Form
28 Refactoring the form to use Formik and Yup
29 Refactoring the input fields to use Formik’s Field hook
30 Styling the form and modal using styled components
31 Introduction to Book Club
32 Setting up a local environment and creating a new React app
33 Configuring our code editor and cleaning up default files
34 Fetching data from an API
35 Rendering the book as a React component
36 Creating global styles and a header
37 Selecting a book from the list
38 Building a detail panel to show more book info
39 Closing the panel and building a background shadow
40 Adding animation to the panel
41 Refactoring the book list’s scrolling behavior
42 Building a search component
43 Refining the search feature
44 Deploying our project with GitHub and Netlify