Learn how to incorporate React in real-world web designs. Discover how to manage real-time data, interact with external APIs, and more.
- [Instructor] Hi I'm Joe Chellman and welcome to React for Web Designers. React is super popular and if you're interested in web design or have been working in the business, you've undoubtedly heard a little bit about it. React is a user interface library that can be used in the creation of websites, mobile apps, and more. What you might not know is that you don't have to dive into React head-first building only new projects out of (mumbles). You can use React as part of existing sites without any complicated build processes. That's exactly what we'll be doing in this course. First, I'll look at some of the conceptual aspects of React to help us get our bearings. Then we'll work through a series of three small websites incorporating React components into each one. We'll create a simple product customizer to get acquainted to managing basic state and props and how React handles events. Next we'll work on a searchable filterable directory of people for a small company, which will include controlled forms and simple animation. Our final project will be a small messaging app that communicates with a simple API using asynchronous calls over the network and React's lifecycle methods. All in all you'll see much of what makes React interesting and be able to add it to your web design toolbox without a lot of headaches, let's check it out.
- Installing React on an existing site
- Thinking about a design in terms of components
- Creating fully-featured function components using Hooks
- Storing and retrieving data from an external RESTful API
- Employing third-party components for CSS animation
- Using conditional rendering
Skill Level Intermediate
Essentials of CSS for React Developerswith Eric Greene53m 31s Beginner
React.js Essential Training (2018)with Eve Porcello1h 25m Intermediate
Using the exercise files1m 2s
1. Introducing React
2. First Project: Customizer
3. Second Project: Directory Browser
4. Third Project: Status Updater
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.