Learn React.JS in 8 Minutes

Per Harald Borgen
Aug 14, 2015 · 8 min read

Also, be sure to also heck out our free React.js course on Scrimba if you want to learn more:

Image for post
Image for post
Click the image to get to the course.

Components

var ButtonApp = React.createClass({
render: function(){
return (
<input type="submit" />
);
}
});

JSX — Javascript Syntax Extension

Multiple components

var ButtonForm = React.createClass({
render: function(){
return (
<div>
<h3>Click the button</h3>
<input type="submit" />
</div>
);
}
});
var App = React.createClass({
render: function(){
return (
<div>
<h1> Welcome to my button app!</h1>
<ButtonForm />
</div>
);
}
});
React.render(<App />, document.getElementById("content"));
Image for post
Image for post

Props & State

Props

var BUTTONTEXT = "Click the button";
<App text={BUTTONTEXT} />
var BUTTONTEXT = "Click the damn button";    var ButtonForm = React.createClass({
render: function(){
return (
<div>
<h3>{this.props.text}</h3>
<input type="submit" />
</div>
);
}
});
var App = React.createClass({
render: function(){
return (
<div>
<h1> Welcome to my button app!</h1>
<ButtonForm text={this.props.text} />
</div>
);
}
});
React.render(<App text={BUTTONTEXT} />, document.getElementById("content"));

State

Initializing state

Changing state

var App = React.createClass({    getInitialState: function(){
return {
active: true
}
},
handleClick: function(){
this.setState({
active: !this.state.active
});
},
render: function(){
var buttonSwitch = this.state.active ? "On" : "Off";
return (
<div>
<p>Click the button!</p>
<input type="submit" onClick={this.handleClick} />
<p>{buttonSwitch}</p>
</div>
);
}
});
React.render(<App />, document.getElementById("content"));

Where should the state live?

Your stateful components are usually higher level, while the stateless are lower level.

Inverse data flow

var ButtonForm = React.createClass({
render: function(){
return (
<div>
<input type="submit" onClick={this.props.onUserClick} />
<h3>You have pressed the button {this.props.counter} times!</h3>
</div>
);
}
});
var App = React.createClass({
getInitialState: function(){
return {
counter: 0
}
},
onUserClick: function(){
var newCount = this.state.counter + 1;
this.setState({
counter: newCount
});
},
render: function(){
return (
<div>
<h1> Welcome to the counter app!</h1>
<ButtonForm counter={this.state.counter} onUserClick={this.onUserClick} />
</div>
);
}
});
React.render(<App />, document.getElementById("content"));

refs and findDOMNode

<input ref="textField" ... />
var ButtonForm = React.createClass({
focusOnField: function(){
React.findDOMNode(this.refs.textField).focus();
},
render: function(){
return (
<div>
<input
type="text"
ref="textField" />
<input
type="submit"
value="Focus on the input!"
onClick={this.focusOnField} />
</div>
);
}
});
var App = React.createClass({
render: function(){
return (
<div>
<h1> Welcome to the focus app!</h1>
<ButtonForm />
</div>
);
}
});
React.render(<App />, document.getElementById("content"));

The key attribute

var App = React.createClass({
getInitialState: function(){
return {
todos: ["get food","drive home","eat food", "sleep"]
}
},
render: function(){
var todos = this.state.todos.map(function(todo,index){
return <li key={index}>{todo}</li>
});
return (
<div>
<h1> Welcome to the ToDo list!</h1>
<ul>
{todos}
</ul>
</div>
);
}
});

Learning New Stuff

A publication about improving your technical skills.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app