React for Web Designers

React for Web Designers

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 52m | 553 MB

You don’t have to start from scratch with React. This super popular JavaScript framework can make your existing websites and apps even better, with very little overhead. In this course, learn practical ways to incorporate React in real-world web designs. Instructor Joe Chellman introduces three small projects that benefit from React: a product manager that showcases React state, props, and events; an employee directory; and a status board that uses React to make external API calls. Each project demonstrates what makes React most interesting and useful to web designers and provides solutions for dealing with the few unique challenges.

Topics include:

  • 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
Table of Contents

1 Add React to your web designer toolbox
2 What you should know
3 Using the exercise files
4 What is React and what is it good for
5 React Toolbox ES6, JSX, and more
6 React concepts and jargon
7 Everything is components and elements
8 Our React build process
9 React and CSS A special relationship
10 Installing React Developer Tools
11 Installing React on an existing site
12 Identifying your components and data
13 Set up first simple component
14 Start using JSX with the help of Babel
15 Attaching a data source
16 Create a new component with array data
17 Implement props
18 Implement state with the useState hook
19 Add the color selector component
20 Change options, see reactions
21 Challenge Activate the color selector
22 Solution
23 Use the mockup, make a plan
24 Scaffold initial components
25 Functional components
26 Build the filters form
27 Forms in React Controlled or not
28 Wire up the filters form
29 Respond to filter form updates
30 Animating with ReactTransitionGroup
31 Challenge Better usability and animation
32 Solution Better usability and animation
33 Use live data from a RESTful API
34 Inspecting your starting React code
35 First API call with useEffect hook
36 Using conditional rendering
37 Bring form fields under control
38 Let form post to the API
39 Lifting state for data visibility
40 Completing the status updater
41 Next steps React, React Native, and JS