Author
Released
4/20/2018- 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
Duration
Views
- [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.
-
Introduction
-
Welcome1m 10s
-
Using the exercise files1m 2s
-
-
1. Introducing React
-
2. First Project: Customizer
-
Implement props4m 28s
-
Implement states6m 43s
-
Add the color selector3m 39s
-
Change options, see reactions10m 22s
-
3. Second Project: Directory Browser
-
Make a plan6m 9s
-
Scaffold initial components5m 58s
-
Functional components6m 37s
-
Build the filters form5m 41s
-
Wire up the filters form10m 57s
-
-
4. Third Project: Status Updater
-
Conclusion
-
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.
CancelTake 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.
Share this video
Embed this video
Video: Welcome