SuperHi FM

Search:

Catalog Cart About Sign in

INTERMEDIATECOURSE

Intro to React.js

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!

Isabel K. Lee

Ryan Smith

Taught by

Isabel K. Lee and Ryan Smith

Zesty

Zesty

Lesson 01

Welcome to Intro to React.js

Lesson 02

Introducing React

Lesson 03

Introduction to Zesty

Milky Mood – Part 1

Milky Mood – Part 1

Lesson 01

Introduction to MilkyMood

Lesson 02

Introduction to Styled Components

Lesson 03

Building the Header component

Milky Mood – Part 2

Milky Mood – Part 2

Lesson 01

Introduction to MilkyMood, Part 2

Lesson 02

Creating a sign up button and modal window

Lesson 03

Adding functionality to the modal window

Book Club

Book Club

Lesson 01

Introduction to Book Club

Lesson 02

Setting up a local environment and creating a new React app

Lesson 03

Configuring our code editor and cleaning up default files

Get access to Intro to React.js

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructors

Isabel K. Lee

Isabel K. Lee

Teacher

Ryan Smith

Ryan Smith

Head of Engineering

Course structure

Chapter 01

Zesty

Lesson 01
Welcome to Intro to React.js
Lesson 02
Introducing React
Lesson 03
Introduction to Zesty
Lesson 04
Getting started with CodeSandbox
Lesson 05
Breaking down the App component
Lesson 06
Building Zesty
Lesson 07
Creating a global state
Lesson 08
Intro to hooks and event handlers
Lesson 09
Updating the index position with an event handler
Lesson 10
Adding an index counter and refactoring HTML/CSS
Lesson 11
Creating a loading component
Lesson 12
Writing the loading logic
Lesson 13
Making our project responsive
Homework 01
Photoflick

Chapter 02

Milky Mood – Part 1

Lesson 01
Introduction to MilkyMood
Lesson 02
Introduction to Styled Components
Lesson 03
Building the Header component
Lesson 04
Building the Footer component
Lesson 05
Building the Image component
Lesson 06
Using a matrix to slice the image into a puzzle
Lesson 07
Using hooks, event handlers, and maths to calculate the cursor distance
Lesson 08
Setting new positions for the image squares
Lesson 09
Changing the background color and glow animation based off of the image's status
Lesson 10
Adding responsive styles
Homework 01
Moodshade

Chapter 03

Milky Mood – Part 2

Lesson 01
Introduction to MilkyMood, Part 2
Lesson 02
Creating a sign up button and modal window
Lesson 03
Adding functionality to the modal window
Lesson 04
Creating a Basic Form
Lesson 05
Refactoring the form to use Formik and Yup
Lesson 06
Refactoring the input fields to use Formik's Field hook
Lesson 07
Styling the form and modal using styled components
Homework 01
Glow Up

Chapter 04

Book Club

Lesson 01
Introduction to Book Club
Lesson 02
Setting up a local environment and creating a new React app
Lesson 03
Configuring our code editor and cleaning up default files
Lesson 04
Fetching data from an API
Lesson 05
Rendering the book as a React component
Lesson 06
Creating global styles and a header
Lesson 07
Selecting a book from the list
Lesson 08
Building a detail panel to show more book info
Lesson 09
Closing the panel and building a background shadow
Lesson 10
Adding animation to the panel
Lesson 11
Refactoring the book list's scrolling behavior
Lesson 12
Building a search component
Lesson 13
Refining the search feature
Lesson 14
Deploying our project with GitHub and Netlify
Homework 01
Booklove

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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 databases
How to find and work with the best React libraries and plugins

Requirements

Visual Studio Code is our code editor of choice! It's a powerful editor that comes with several built-in features and a robust marketplace for downloadable extensions. You'll also need a computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection.

Target Audience

This course is aimed at anyone who's already confident (or confident-ish) with basic Javascript and wants to level up by taking a dive into building more feature-complete and immersive web apps in React.

React is becoming increasingly popular amongst designers as it takes a component-based approach aimed at re-using interface patterns and code. This makes prototyping and building real-world apps very quick without having to worry about technical nitty gritty.

This is a great next step for students who have already completed our Javascript for Designers and Advanced CSS + Javascript courses.

In the first project, we'll show you how to build a simple photo gallery website with a loading state.

In this project, we're going to build some fun cursor interactions to transform an image into a 4x6 puzzle. We're also going to be adding in some animation and transition effects to make our website even more visually appealing!

We'll continue to build off of what we've learned so far in this project! We'll add a form that handles input validations and error messages. We'll also create responsive styles that adapt to any browser size.

We'll show you how to build a website that features books written by famous Black authors. You'll be able to search for books by title and author name. We'll also incorporate animations and transitions to create a panel that shows more information about each book!

Isabel is a full-stack developer with a background in design and product strategy. They've spent the last 5 years surfing the tech scene in New York, and are now focused on education. On a typical day, you can find them writing some sweet, sweet code, biking around Brooklyn, or singing songs to their large, grumpy cat.

Ryan (he/him) is an Australian immigrant living just outside a village in the Scottish Highlands (we told you we’re a remote company!). He's the Head of Engineering at SuperHi and a full-stack developer of over 15 years. He spends most of his time outside SuperHi gardening, hiking and working on cars, bikes and motorbikes.