Description:
Learners will discover how to build React applications working in the development and the production environments, in this 12-video course. Examine how to add state to an application and add and delete comments; explore React Develop Tools and their use, along with several other topics. Begin by setting up a simple application in the create-react-app environment, which will download and install several NodeJS packages using npm, and then move on to adding state within the application. Learn how to wire up event handlers to add new comments, and also wire up event handlers to delete comments. Discover how to install and work with React Developer Tools, and use these tools to explore the component tree. Also learn how to use React Developer Tools to profile applications. Next, examine how to create a production build with minified files and static assets; explore the different files generated in a production build, and how to serve the application in a production build.
Target Audience:
Duration: 01:09
Description:
In this 19-video course, you will discover advanced React features such as lists and keys, including lists without keys, unique keys for lists, and correct key usage, and other topics. Learners begin with a look at the error that occurs when list elements are rendered without keys, then study the unique keys for list elements. Learn about the right usage of keys in components; how to render components using conditional evaluation; how to perform conditional rendering using variables; and how to evaluate conditions by using inline logical operators. Explore how to perform rendering with ternary operators; the use of local state in components; and the disadvantages of storing local state. Learn about removing state from lower-level components, and lifting state up to higher-level components. Delve into code reuse by using inheritance and code reuse by using composition. Examine how to use composition to customize child elements and how to create special components using composition. Explore the use of global properties without context, and finally, the use of context to specify global properties.
Target Audience:
Duration: 01:48
Description:
Learners can explore the basics of controlled components and uncontrolled components in this 12-video course, which begins with a look at working with forms in React. Forms are used to input data on a web page; you will discover how controlled components work in forms, and then move on to a two-part tutorial on controlled components for multi-input forms: part 1 on wiring up event handlers for form mutations, and part 2 on synchronizing component state by using event handlers. Next, discover how to wire up a single event handler for multiple inputs, and how to design form elements to be individual components. This leads into testing form setup, and testing the form on a web browser. Discover the need for client-side validation, and how to validate data passed into forms. Compare controlled components and uncontrolled components for form data, and in the final tutorial, learn how to use uncontrolled components to handle file inputs in forms.
Target Audience:
Duration: 01:21
Description:
This 16-video course helps learners examine the basics of events and event handling in React, including synthetic events, the React component lifecycle, document object model (DOM) reconciliation, and preventing default event handling. Begin by observing use of event propagation in the capture and bubble phases, followed by an introduction to synthetic events and their advantages. Explore the phases in a React component's lifecycle; wire up event handlers to elements; prevent the browser's default event handling; and use synthetic events to access event properties. Discover how to build a component to toggle state, and what happens in the mounting phase of a component lifecycle. Learn how to execute code once a component is mounted to the DOM; observe what happens in the unmounting phase of a component's lifecycle; and learn how to hook into the update phase of a component's lifecycle. Conclude the course by discovering how to optimize the rendering of a component, and how to apply error boundaries to catch errors.
Target Audience:
Duration: 01:49
Description:
In this 18-video course, learners explore the basics of props and state, including similarities and differences. Discover how to work with props, use expressions, transfer props manually and using the spread operator. You will begin with a look at props and state in components and when they are used, and differences between props and state. Then move on to working with props; passing data into components by using props; evaluating expressions to pass data to components, and transferring props from higher to lower-level components manually. Also, discover how to transfer props from higher to lower-level components using the spread operator; dynamically render components based on conditions with props, and specify default values passed in as props. Next, learn how to validate props and access child elements using props.children; use expressions to pass in props values; and specify functions as children of a component. Next, receive an introduction to State; updating State by using this.setState() in a component; wiring up event handlers to update the state of a component; and accessing a component’s previous state.
Target Audience:
Duration: 01:46
Description:
Learners can explore basics of working with React components, including rendering elements, smart rendering, and building simple and multiple components, in this 17-video course. Discover how to prototype react applications by using online playgrounds, including CodePen, CodeSandbox, and Glitch. Begin by observing how to install NodeJS libraries and the npm package manager on MacOS and on Windows. Run http-server on the local machine to serve web pages, and use ReactDOM.render() to render elements. Learn how to recognize smart rendering of elements in React; build simple components using ES6 classes; and build multiple components using ES6 classes. Discover how to implement a simple application on CodePen; configure the Babel preprocessor on CodePen; and build a simple React prototype on CodePen. Next, take a look at CodeSandbox and Glitch Online Playgrounds, and how to prototype a simple React application on both CodeSandbox and Glitch. Learn how to install and use create-react-app utilities on the local machine; create function components; and how to compose multiple simple components to create a complex component.
Target Audience:
Duration: 01:41
Description:
This 18-video course focuses on the React library for component-driven development and basic principles involved in creating React applications. Begin with an introduction to the React library and what is it used for, then discover how to design components with React. Identify features that make React powerful, and examine the concepts underlying important React features. Also explore the virtual document object model (DOM) and how it is used. Learn how to implement a simple web page by using React web application programming interfaces (APIs); recognize basic components of the web page built using React; and use minified productionized React libraries. A two-part tutorial focuses on creating nested elements: creating a DOM hierarchy with nested components, and using key attribute to identify unique sibling elements. Delve into JavaScript XML (JSX) and the functionality of the Babel compiler when used with JSX; then create elements using JSX and the Babel compiler, and render a DOM hierarchy using JSX. Conclude the course by focusing on evaluating simple expressions with JSX, and referring to JavaScript variables within JSX.
Target Audience:
Duration: 01:44