React is an open source JavaScript library created by Facebook and maintained by a large community. It is used for creating views as in V in MVC. It is a great library for creating large-scale, single page applications.
React is very fast, primarily because it uses a virtual DOM. Reading and writing to DOM is much more expensive than reading or writing to JavaScript objects. Virtual DOM are JavaScript objects that only write to DOM when it is absolutely necessary.
React supports JSX syntax (JavaScript as XML).
Prerequisites
- HTML5
- CSS3
- JavaScript
Environment setup for React
All you need to do to start building with React is include react.js and react-dom.js inside the <head> tag.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
</head>
For debugging, add the following chrome extensions:
- React detector
- React developer tool
To test, go to airbnb.ca and then click on the react detector symbol on top right of your browser.
Note: (cmd+opt+j) or (ctrl+shift+j) are shortcut for developer tools.
First Program
Simply copy paste the following code in a file called demo1.php and open it with a browser.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id='container1'></div>
<script>
ReactDOM.render(
React.createElement('div', null, 'Hello World'),
document.getElementById('container1')
)
</script>
</body>
</html>
The code is simply creating a div element with Hello World string, assigning it to container1 and rendering it.
Component
Components are small user-interface elements that display content. It could be a form, table, or anything else. In the following example, we create a component that displays text.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id='container1'></div>
<script type="text/babel">
var MyComponent = React.createClass({
render() {
return <div><h1>Hello World</h1></div>
}
})
ReactDOM.render(<MyComponent />, document.getElementById('container1'))
</script>
</body>
</html>
Component Properties Following example show how to use component properties
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id='container1'></div>
<script type="text/babel">
var PrintComponent = React.createClass ({
render() {
return <div>
<h3>{this.props.title}</h3>
<p>{this.props.children}</p>
</div>
}
})
ReactDOM.render(<div>
<PrintComponent title="Title1">Message 1</PrintComponent>
<PrintComponent title="Title2">Message 2</PrintComponent>
</div>,
document.getElementById('container1'))
</script>
</body>
</html>
Note that we used PrintComponent element twice. It can be used as many times as you like. Also note that this.props.title and this.props.children are taking values from the PrintComponent elements.
Events
In the following example, we create three functions which respond to onClick event.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id='container1'></div>
<script type="text/babel">
var PrintComponent = React.createClass ({
add() {
alert('add a message');
},
edit() {
alert('edit this message');
},
remove() {
alert('delete this message');
},
render() {
return <div>
<button onClick={this.add}>Add Message</button>
<span>
{this.props.children}
<button onClick={this.edit}>Edit</button>
<button onClick={this.remove}>Delete</button>
</span>
</div>
}
})
ReactDOM.render(<div>
<PrintComponent>Message 1</PrintComponent>
<PrintComponent>Message 2</PrintComponent>
</div>,
document.getElementById('container1'))
</script>
</body>
</html>
The alert() functions simply serve to validate that the program responded to an onClick event.