React can easily be set up in code pen for fast development. By setting the page up using babel and both react.js and reactDOM.js.

A important feature of react is that is can output or render other react components.

Here is an example

Access Nested Data with props.children

Accessing the child properties can be easily achieved by using this.props.children this access the innerHTML or nested components of another component.

View an example here

Use React ref to Get a Reference to Specific Components

When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a ref

View an example here

Understand the React Component Lifecycle Methods

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson gives an overview of the entire component lifecycle and demonstrates mounting and unmounting of your React components.

View an example here

** Manage React Component State with lifecycle methods **

simple uses for these hooks and how we can interact with state.

View an example here

** Control React Component Updates When New Props Are Received **

The React component lifecycle will allow you to update your components at runtime.componentWillReceiveProps gives us an opportunity to update state by reacting to a prop transition before the render() call is made. shouldComponentUpdate allows us to set conditions on when we should update a component so that we are not rendering constantly. componentDidUpdate lets us react to a component updating.

1,222 0 22