This tutorial will walk you through developing your first app with React.

1) Installation

This is the app we are going to build. Two buttons that change the case of a text. Pretty simple but good enough to look at a few of React’s basic syntax.




Hello from React






Let’s get started by creating a simple HTML document and include the React libraries. You will also need to include a script tag and create div with id="main" in the the document body.

Make sure you are using the latest version of React. At the time of writing, this is what I have in my index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
// Your react code goes here
</script>
</body>
</html>

Note: It is possible recommended to use React with a CommonJS module system like browserify or webpack and to install it with npm.

2) First component using React’s JSX syntax

React uses a specific syntax, called JSX. JSX is a JavaScript syntax extension that looks similar to XML. In your JSX files, you can use any JavaScript you want, but you can also include pieces of HTML/XML without quotes.

(The babel-core library we have included, allows in browser JSX transformation and the use of <script type="text/babel"> tags.)

Let’s create a button component on our page with React:

1
2
3
4
5
6
7
8
9
var UppercaseButton = React.createClass({
render: function() {
return (
<button>Uppercase</button>
)
}
});
ReactDOM.render(<UppercaseButton />, document.getElementById("main"));
  • Use React.createClass() to declare new components.
  • A React Class should have a render function that returns the element’s HTML. Careful to use return(<HtmlTag />) and not return{<HtmlTag />}.
  • ReactDOM.render() is our app’s main entry point and renders our components. The first argument is the <ReactTag /> that we declared with createClass() and the second is the HTML element that will contain the rendered React component.
  • React classes should always start with an Capital letter.

Check out the code here: https://jsbin.com/xakiza/edit?html,output

3) Passing arguments to a React component

It is possible to pass arguments to components using components properties.

Change your React code to:

1
2
3
4
5
6
7
8
9
var UppercaseButton = React.createClass({
render: function() {
return (
<button>{this.props.text}</button>
)
}
});
ReactDOM.render(<UppercaseButton text={"Uppercase"} />, document.getElementById("main"));
  • Pass an argument by adding a property like you would in HTML. In this example, we added the text={"Uppercase"} property.
  • Use curly brackets when interpolating JavaScript expressions in your JSX templates.
  • In the component definition, use this.props.propertyName to access the value passed to that component.

Check out the code here: https://jsbin.com/qakaka/edit?html,output

4) Composing components and managing state

We are now going to create a <Main /> component to hold our button and text. This component will hold our application’s state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var UppercaseButton = React.createClass({
render: function() {
return (
<button onClick={this.props.onButtonClick}>Uppercase</button>
)
}
});
var HelloText = React.createClass({
render: function() {
return (
<div>
<div style={this.props.textStyle}>Hello from React</div>
</div>
)
}
});
var Main = React.createClass({
getInitialState: function() {
return {textStyle: {
textTransform: 'none'
}};
},
clickHandler: function () {
this.setState({textStyle: {
textTransform: 'uppercase'
}});
},
render: function() {
return (
<div>
<HelloText textStyle={this.state.textStyle} />
<UppercaseButton onButtonClick={this.clickHandler} />
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("main"));

Our code is getting larger, here are the main things to pay attention to:

  • We now have 3 components (Main, UppercaseButton and HelloText). Main holds UppercaseButton and HelloText.
  • getInitialState() is a special React function that will be called once when a component is initialized. Make use of it to return the initial state object.
  • The component state can be access with this.state.
  • The component state can be modified using this.setState(newState).
  • To set a inline style using the JSX syntax, use style={JavascriptStyleObject}. More info in the React inline style documentation. In our example, to set the text to uppercase: style={{textTransform: ‘none’}}

Check out the code and play around here: https://jsbin.com/beheve/edit?html,output

5) Finishing the application and taking of advantage of React modular approach

Let’s now add our second button by creating a generic button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var TextTransformButton = React.createClass({
onButtonClick: function() {
this.props.onButtonClick(this.props.transform);
},
render: function() {
return (
<button onClick={this.onButtonClick}>{this.props.transform}</button>
)
}
});
var HelloText = React.createClass({
render: function() {
return (
<div>
<div style={this.props.textStyle}>Hello from React</div>
</div>
)
}
});
var Main = React.createClass({
getInitialState: function() {
return {textStyle: {
textTransform: 'none'
}};
},
clickHandler: function (newCase) {
this.setState({textStyle: {
textTransform: newCase
}});
},
render: function() {
return (
<div>
<HelloText textStyle={this.state.textStyle} />
<TextTransformButton onButtonClick={this.clickHandler} transform={"lowercase"} />
<TextTransformButton onButtonClick={this.clickHandler} transform={"uppercase"} />
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("main"));
  • The clickHandler function is now generic.
  • The child components (buttons here) will decide what to send to the clickHandler.

Check out the final code here: https://jsbin.com/bidafa/edit?html,output

Hopefully this quick first look at React will help you get started and get an idea of the framework’s potential.