Introduction to the React Challenges

React, popularized by Facebook, is an open-source JavaScript library for building user interfaces. It is used to create components, handle state and props, utilize event listeners and certain life cycle methods to update data as it changes.

React combines HTML with JavaScript functionality to create its own markup language, JSX. This section will introduce you to all of these concepts and how to implement them for use with your own projects.

Go to the first lesson

Upcoming Lessons

Create a Simple JSX ElementCreate a Complex JSX ElementAdd Comments in JSXRender HTML Elements to the DOMDefine an HTML Class in JSXLearn About Self-Closing JSX TagsCreate a Stateless Functional ComponentCreate a React ComponentCreate a Component with CompositionUse React to Render Nested ComponentsCompose React ComponentsRender a Class Component to the DOMWrite a React Component from ScratchPass Props to a Stateless Functional ComponentPass an Array as PropsUse Default PropsOverride Default PropsUse PropTypes to Define the Props You ExpectAccess Props Using this.propsReview Using Props with Stateless Functional ComponentsCreate a Stateful ComponentRender State in the User InterfaceRender State in the User Interface Another WaySet State with this.setStateBind 'this' to a Class MethodUse State to Toggle an ElementWrite a Simple CounterCreate a Controlled InputCreate a Controlled FormPass State as Props to Child ComponentsPass a Callback as PropsUse the Lifecycle Method componentWillMountUse the Lifecycle Method componentDidMountAdd Event ListenersManage Updates with Lifecycle MethodsOptimize Re-Renders with shouldComponentUpdateIntroducing Inline StylesAdd Inline Styles in ReactUse Advanced JavaScript in React Render MethodRender with an If/Else ConditionUse && for a More Concise ConditionalUse a Ternary Expression for Conditional RenderingRender Conditionally from PropsChange Inline CSS Conditionally Based on Component StateUse to Dynamically Render ElementsGive Sibling Elements a Unique Key AttributeUse Array.filter() to Dynamically Filter an ArrayRender React on the Server with renderToString