Learn how to incorporate React in real-world web designs: to manage real-time data, build forms and animation, and interact with external APIs.
- [Joe] 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 headfirst, building only new projects out of whole cloth. 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 with 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.
- Identify notable features about how React works.
- Identify good early steps for any React project.
- Explain why the little PHP app that powers our API has a way to add delay.
- Outline what a lifecycle method is.
- Recall the React convention that must be followed when adding a status message.
- Explain the purpose of React.Fragment.
Skill Level Intermediate
1. Introducing React
2. First Project: Customizer
3. Second Project: Directory Browser
4. Third Project: Status Updater
Next steps: Lots more React2m 37s
- 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.