We’ll start small. We can start with the ReactJS sample and figure out what’s going on:
We create a React component
Hello and we tell it what to render. When we create a
Hello component, we take in an attribute called
name which we then access in our component with
this.props.name. When the page loads, React will render the
Hello component in the element with ID “container”.
Components can have other components.
I’ve created a
Name component to show the name. This component uses its children to display any content it needs to. Obviously, this is a bit contrived.
Things get more exciting when we add events. Let’s add an event to our
Name component: when a user clicks this component, we’ll reverse the name.
I’ve introduced state to the component. When I want a React component to use state, I need to implement the
getInitialState method to tell React what the state is when the component is created. In this case, I set the
name field of the component’s state to
this.props.children. When I render the component, I use the
name variable I set in my state object. I add an
onClick event and call a method on the component called
clickme I call the built-in
setState method and update the
name variable on my state object. Any other state variables on the component would remain unchanged. Any time
setState is called,
render is called again for this component and any children which need to be updated will also rerender.
Sometimes something happens on a child component that the parent cares about. This time, I want the parent component to know when the
Name component gets a click event.
I’ve told my child component to call the method
goodbye on the parent element using the property name
onClicked. When the method is called Ichange the state of the
Hello component and update the greeting; in this case, the
Name component will be reused since it hasn’t changed.
Just a reminder that you can have multiple of any component; just be sure to not duplicate IDs!
I dynamically create as many
Name components as I need. I take my list of names and map them all to React components, each of which has a different value. As above, all of these can have events or can call events on the parent component. When we create a list of components, React prefers it when we give them all
key attributes. This allows React to cache the components and recreate the appropriate component when states change.