Relating ReactJS to everyday concepts
Last week I read an article about how in Finland, kids learn computer science without computers.
Children are taught to think about coding in relation to everyday actions, like how a loop (essentially a sequence) can be explained by repeating a series of dance steps (think about the party-favourite Macarena).
I shared the article on Twitter, and a follower messaged me saying, “See! If coding was taught to me like this in high school, maybe I would have actually understood and liked it.” This lead me to think: how often are people deterred from learning new concepts because they are taught in a way that doesn’t speak to them/isn’t digestible by them?
I mean, it makes sense — this chain of events. First we don’t understand something, or it’s not presented to us in a relatable way, then we are disinterested, or just give up.
Inaccessibility = cutting off your audience. Of course, you can’t cater to everyone, and your analogies won’t make sense to everyone. But chances are that more folks who are just getting introduced to your ideas will catch on quicker with a comparison to everyday concepts.
I’ve started to dig into ReactJS, and would like to be able to pass down some of my knowledge to friends, and strangers. Taking from a talk I had with Lionel about ‘rubber duck debugging’ — I like the idea of forcing myself to explain code, line-by-line — knowing what is going on at every step. I’m not there yet, but we know that comparing new/complex concept to everyday human tasks helps with making things click.
So, I thought it would be a good idea to do this for three key concepts in React: components, props and state. I start off with definitions because I love etymology taking a concept’s basic definition/origin is often telling about it’s purpose. This isn’t going to be an in-depth explanation of each concept, but a way to think of them in everyday terms.
Let’s get started!
Components
component |kəmˈpōnənt|
noun
- a part or element of a larger whole, especially a part of a machine or vehicle: ex. stereo components.
As the word’s plain definition states, a component in React is a piece of a whole, your app. I like to think of components like individual lego pieces, that when combined create larger structures.
var LegoPiece = React.createClass({
render: function() {
return <h1>Hello World</h1>;
}
}); ReactDOM.render(
<LegoPiece />,
document.getElementById('main-container')
);
Props
property |ˈpräpərtē|
noun (pl. properties)
- an attribute, quality, or characteristic of something: ex. the property of heat to expand metal at uniform rates.
Props (short for properties) are similar to arguments in a regular function. In a component, props are immutable and top-down — props of a component are passed from parent component to a child.
So, let’s think of props like genetic traits. In this basic example we are creating a child component, and trait-wise, we’re passing down ‘brown eyes’.
var Child = React.createClass({
render: function() {
return <p>This child has {this.props.trait}</p>;
}
});ReactDOM.render(
<Child trait="brown eyes" />,
document.getElementById('main-container')
);
State
state |stāt|
noun
- the particular condition that someone or something is in at a specific time: ex. being worried about someone’s state of mind.
Component state changes over time in response to actions — like a click. To get state we have to implement class-based components by extending React.Component. Here’s a bit more info about the example below from ReactJS docs.
“The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.
The constructor is the right place to initialize state. If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.”
Let’s talk about hugs. Hugs are pretty great, and have many benefits.
In this example, the action that affects state is a click, and that in turn affects the state’s ‘hugs’ count. So, when the You component is rendered, there’s a button for the user to click. Every time a user clicks the button, You (the component) has a change in state — in the numbers of hugs. And maybe you can code it so that when the hugs count reaches 10, the button becomes disabled, because You has had enough hugs (but is there really a case of too many hugs?).
class You from React.Component {
constructor(props) {
super(props);
this.state = {hugs: 0 };
} onClick() {
this.setState({hugs: this.state.hugs + 1});
} render() {
return (
<div>
<div>count:{this.state.hugs}</div>
<button onClick={this.onClick}>Click for hugs!</button>
</div>
);
}
};
ReactDOM.render(<You />, document.getElementById("main-container"));
Conclusions
So, we touched upon lego, genes, and a hug’s effect on emotion! But you can think of these ReactJS concepts in any way you want — in any way that makes most sense to you. Use whatever schemas you have in place to really let new ideas sink in.
As always — heres a GIF!
