Master ReactJS: Learn React JS from Scratch

Render data in ReactJS by creating and rendering elements and components, using props and curly brace expressions to pass properties, and render them inside a container.

Learn how to apply CSS classes in ReactJS by using the className attribute instead of class, and render elements into a container with proper styling.

Display HTML entities safely in React by rendering the copyright symbol in a div, avoiding double escaping, and using direct symbols or Unicode values with UTF-8 encoding.

Explore the React component lifecycle from render to unmount, and manage state, props, default props, prop types, and static methods.

Learn how to manage component state in ReactJS by initializing with getInitialState, setting default props with getDefaultProps, and validating props via propTypes to ensure correct types.

Understand how state acts as private data in a React component, driving rendering, initializing name and id with get initial state, and updating via setState on change.

Explore the component life cycle in React by building a click counter that uses render, componentWillMount, componentDidMount, and componentWillUnmount to demonstrate mounting, rendering, and unmounting.

Explore how component lifecycle functions are called, access state and props during mounting, and update button styles based on prop values with setInterval cleanup.

Create and compose multiple React components to render a course list. Pass data via props, map over course arrays, and extract into a course collection component.

Learn to build reusable components in React by creating a stateful review form with onChange and onSubmit events, course options, and a review collection display.

Learn how to use properties (props) in ReactJS, including default prop values and overriding them. The lesson also covers prop types validation, transferring props between components, and managing multiple properties.

Explore how the course component uses props.children to access and render nested content from the courses component, and how the render function outputs an anchor tag containing that content.

Learn how mixins encapsulate shared functionality to avoid repeating code, define default properties like bakery, compose mixins inside components, and manage lifecycle methods and potential key conflicts in React.

Master React's synthetic event system, a cross-browser wrapper with a consistent interface, handling events from on click to on key up, on change, on submit, and touch and UI events.

Learn how to access a DOM node in React using refs, focusing a text box via a button, with refs usable only after a component is mounted.

Learn how to precompile jsx files to JavaScript and concatenate them into a single application file using gulp, gulp react, and gulp concat, with npm and package.json setup.

Load data with jQuery ajax and fetch the customer list. Render each customer in a React component by mapping data to show id, company name, and contact name.

Apply inline styles in React by defining a style object with camelCase properties and using the style attribute in render. Include background images and note that height values auto-append px.

Learn how to use dangerouslySetInnerHTML in React to render HTML from a string, using a wrapper object with __html, and understand cross-site scripting considerations.

Explore two-way data binding in React using the linked state mixin and value links to keep inputs in sync with state, reducing repetitive onchange handlers.

Discover how to clone React elements with React.cloneElement, replacing the deprecated addons method, pass props from the original element, and obtain a ref from the original element.

Explore using the classSet add-on for conditional styling in React, building a traffic signal component that maps red, yellow, and green lights to stop, watch, and go classes.

Explore switching from the deprecated class set to the classnames library for conditional styling, including installing via npm and integrating the renamed index file in your project.

learn to add animation to a react app using a transition group, define enter and leave animations, and manage slide transitions with unique keys.

Refactor the routing and components by extracting routes into a dedicated file, and create modular about, contact, and page not found components wired with React Router.

Learn how to fetch remote data in a React app using the whatwg-fetch polyfill, perform fetch requests to a service, handle promises with then, and log results.

Fetch remote data with the fetch API and render the customer list in a React component, using the remote data API to populate customer id, company name, and contact name.

Install and use the React Dev Tools Chrome extension to inspect components, props, and state, view the elements panel, and test live changes in the dev tools.