Prototyping Your UX Design in React

Focused View

Lisa Walkosz-Migliacio

1:45:46

24 View

00. Course Overview

00. Course Overview.mp4

01:31

01. Your New Toolbox

00. Anatomy of a Prototype.mp4

03:21

01. Create A New React App.mp4

02:45

02. Start Your New React App.mp4

03:18

02. Going from UX Design to Code Design

00. React Views and Components.mp4

02:18

01. Create Files based on UX Design.mp4

03:06

02. Create Variables based on UX Design.mp4

04:49

03. Create Functions based on UX Design.mp4

06:41

03. Rendering HTML from JSON

00. Creating a JSON file of Information.mp4

04:12

01. Import a JSON file to React.mp4

02:48

02. Display List in the Render function.mp4

01:36

04. Formatting HTML with Atomic CSS

00. Atomic CSS.mp4

02:36

01. CSS based on Grids.mp4

02:15

02. CSS based on Colors.mp4

01:45

03. CSS based on Items.mp4

02:22

04. Adding CSS to React.mp4

04:43

05. Setting Up Search Results

00. Creating a New React Component.mp4

04:42

01. Adding a Button and Ref.mp4

03:27

02. Passing Ref values back to the Parent.mp4

05:52

03. Build out Search Functionality.mp4

06:03

04. Design cleanup and extra functionality.mp4

02:14

06. Using an Accordion Component

00. Download and Import the Packaged Component.mp4

04:47

01. Style the Accordion.mp4

03:53

07. Creating a Filtered Results Checkbox Component

00. Add Checkbox action and send back to parent.mp4

06:30

01. componentDidMount() and onSearch().mp4

02:24

02. onFilter() Functionality.mp4

05:34

03. Other Filter Functionality.mp4

03:48

04. Run and Debug your Prototype!.mp4

06:26

Description

Give your UX design new life as a functional, interactive web page through the power of prototyping in React! This beginner-friendly course covers styling and crafting a simple application that can bring your ideas to life in new and exciting ways.

What You'll Learn?

Validating designed interactions without working prototypes is difficult. Through the power of the React framework, you can quickly and easily make interactive versions of your designs. In this course, Prototyping Your UX Design in React, you will learn how to transition from a simple UX Design to a working prototype that you can provide users. Through the simple techniques presented here, you will be able to learn more about React. You will also gain experience utilizing the power of CSS to bring your designs to life on the web. In addition, you will discover the processes for loading JSON data for format and display and utilize libraries of pre-built React components to power your prototype. You can even gain a little hands-on experience with creating a custom component of your own! At the conclusion of this course, you will have a working prototype built in React that can be expanded and customized for the needs of your project, and the knowledge and experience required to do it all again for your next prototype!

More details

User Reviews

Rating

average 0

Total votes0

Focused display

React

User Experience Design

Lisa Walkosz-Migliacio

Instructor's Courses

Lisa has worked in a software development for over a decade in web development, virtual reality, and video games. Armed with a degree in computer science and design, she has the perfect combination to bring digital works of art to life. She founded the game development company Intropy Games to make super cute games that can tug on your heartstrings. With multiple awards under her belt, she most recently was awarded for excellence in the Oculus Launch Pad in Virtual Reality.

Pluralsight

View courses Pluralsight

Pluralsight, LLC is an American privately held online education company that offers a variety of video training courses for software developers, IT administrators, and creative professionals through its website. Founded in 2004 by Aaron Skonnard, Keith Brown, Fritz Onion, and Bill Williams, the company has its headquarters in Farmington, Utah. As of July 2018, it uses more than 1,400 subject-matter experts as authors, and offers more than 7,000 courses in its catalog. Since first moving its courses online in 2007, the company has expanded, developing a full enterprise platform, and adding skills assessment modules.