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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
React supports JSX syntax (JavaScript as XML).<\/p>\n\n\n\n
All you need to do to start building with React is include react.js and react-dom.js inside the <head> tag.<\/p>\n\n\n\n
<head>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react-dom.js\"><\/script>\n<\/head>\n<\/code><\/pre>\n\n\n\nFor debugging, add the following chrome extensions:<\/p>\n\n\n\n
- React detector<\/li>
- React developer tool<\/li><\/ul>\n\n\n\n
To test, go to airbnb.ca and then click on the react detector symbol on top right of your browser.<\/p>\n\n\n\n
Note: (cmd+opt+j) or (ctrl+shift+j) are shortcut for developer tools.<\/p>\n\n\n\n
First Program<\/h3>\n\n\n\n
Simply copy paste the following code in a file called demo1.php and open it with a browser.<\/p>\n\n\n\n
<html>\n<head>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react-dom.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.34\/browser.min.js\"><\/script>\n<\/head>\n<body>\n <div id='container1'><\/div>\n <script>\n ReactDOM.render(\n React.createElement('div', null, 'Hello World'),\n document.getElementById('container1')\n )\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nThe code is simply creating a div element with Hello World string, assigning it to container1 and rendering it.<\/p>\n\n\n\n
Component<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
<html>\n<head>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react-dom.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.34\/browser.min.js\"><\/script>\n<\/head>\n<body>\n <div id='container1'><\/div>\n <script type=\"text\/babel\">\n var MyComponent = React.createClass({\n render() {\n return <div><h1>Hello World<\/h1><\/div>\n }\n })\n\n ReactDOM.render(<MyComponent \/>, document.getElementById('container1'))\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nComponent Properties<\/strong> Following example show how to use component properties<\/p>\n\n\n\n<html>\n<head>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react-dom.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.34\/browser.min.js\"><\/script>\n<\/head>\n<body>\n <div id='container1'><\/div>\n <script type=\"text\/babel\">\n var PrintComponent = React.createClass ({\n render() {\n return <div>\n <h3>{this.props.title}<\/h3>\n <p>{this.props.children}<\/p>\n <\/div>\n }\n })\n\n ReactDOM.render(<div>\n <PrintComponent title=\"Title1\">Message 1<\/PrintComponent>\n <PrintComponent title=\"Title2\">Message 2<\/PrintComponent>\n <\/div>, \n document.getElementById('container1'))\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nNote 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.<\/p>\n\n\n\n
Events<\/h3>\n\n\n\n
In the following example, we create three functions which respond to onClick event.<\/p>\n\n\n\n
<html>\n<head>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.1.0\/react-dom.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.34\/browser.min.js\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">\n<\/head>\n<body>\n <div id='container1'><\/div>\n <script type=\"text\/babel\">\n var PrintComponent = React.createClass ({\n add() {\n alert('add a message');\n }, \n edit() {\n alert('edit this message');\n }, \n remove() {\n alert('delete this message');\n },\n render() {\n return <div>\n <button onClick={this.add}>Add Message<\/button>\n <span>\n {this.props.children}\n <button onClick={this.edit}>Edit<\/button>\n <button onClick={this.remove}>Delete<\/button>\n <\/span>\n <\/div>\n }\n })\n\n ReactDOM.render(<div>\n <PrintComponent>Message 1<\/PrintComponent>\n <PrintComponent>Message 2<\/PrintComponent>\n <\/div>, \n document.getElementById('container1'))\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nThe alert() functions simply serve to validate that the program responded to an onClick event.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[185],"tags":[54],"class_list":["post-741","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript"],"_links":{"self":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/comments?post=741"}],"version-history":[{"count":1,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/741\/revisions"}],"predecessor-version":[{"id":742,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/741\/revisions\/742"}],"wp:attachment":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/media?parent=741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/categories?post=741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/tags?post=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}