Taught by
Isabel K. Lee and Ryan Smith
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.
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.
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.
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
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
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
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
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 workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
