React, or React.js is an open source JavaScript framework from Facebook. React.js is ideal for doing view rendering work in large scale or single page application (SPA). That is, React works as the V in MVC.<\/p>\n
The main concept of React is component. A React component can be composed of React components and ReactElement. Following the React way, you divide your app into several components according to function and responsibility.
\n![\"\"](\"http:\/\/uitutorials.in\/wp\/wp-content\/uploads\/2020\/09\/03-concepts_of_reactjs_component.png\")
\nReact components and ReactElement are used as Virtual DOM, which looks like the markup of real HTML DOM elements.
\n![\"\"](\"http:\/\/uitutorials.in\/wp\/wp-content\/uploads\/2020\/09\/04-how_reactjs_work.png\")
\nVirtual DOM (components and ReactElements) syntax will be compiled and translated into plain JavaScript codes, which will render real HTML DOM elements in browser.
\n![\"\"](\"http:\/\/uitutorials.in\/wp\/wp-content\/uploads\/2020\/09\/05-reactjs_render_component_virtual_dom.png\")
<\/p>\n
As mentioned above, two things are required to write and run a React component.<\/p>\n
1.React.js
\n2.babel, a translator, can translate ECMAScript 6 codes and Virtual DOM syntax to ECMAScript 5 codes, which can be run in all modern browsers.
\nFor simplicity, we’re going to use React and babel scripts hosted by free CDN.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>React Demo<\/title>\r\n\r\n <!-- React includes two parts: react.js and react-dom.js, both are required -->\r\n <script src=\"\/\/fb.me\/react-0.14.7.min.js\"><\/script>\r\n <script src=\"\/\/fb.me\/react-dom-0.14.7.min.js\"><\/script>\r\n\r\n <!-- babel standalone -->\r\n <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/6.10.3\/babel.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div id=\"app\"><\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\nCreate a HelloWorld component which is responsible for rendering a HTML h3 tag and a HTML p tag. Then mount the HelloWorld component to div tag whose id is app.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>React Demo<\/title>\r\n\r\n <!-- React includes two parts: react.js and react-dom.js, both are required -->\r\n <script src=\"\/\/fb.me\/react-0.14.7.min.js\"><\/script>\r\n <script src=\"\/\/fb.me\/react-dom-0.14.7.min.js\"><\/script>\r\n\r\n <!-- babel standalone -->\r\n <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/6.10.3\/babel.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div id=\"app\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n var HelloWorld = React.createClass({\r\n \/\/ render function of React component, render real DOM\r\n render: function () {\r\n return (\r\n <div>\r\n <h3>Hello<\/h3>\r\n <p>Nice to meet you!<\/p>\r\n <\/div>\r\n )\r\n }\r\n });\r\n\r\n ReactDOM.render(<HelloWorld \/>, document.getElementById('app'));\r\n <\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\nPay attention to type attribute of script tag. Its value is text\/babel, which means that the codes should be processed and translated by babel.<\/p>\n
Note:<\/strong> The net result of running above code snippets is that React will render real HTML DOM tags, div, h3 and p in browser. But div, h3 and p in above codes are not real HTML DOMs, they are also virtual DOMs. They are also React elements, that is ReactElement exactly in React’s eyes.<\/p>\nTake the <\/p>\n
Hello<\/h3>\n
element in above render() function as an example, React.js will create a ReactElement essentially. Equivalently, the behind the scenes code are as follows.<\/p>\n
\/\/ h3 is an instance of ReactElement\r\nvar h3 = React.createElement('h3', null, 'Hello');<\/code><\/pre>\nAs you can see, a react component can be embedded as a virtual DOM within another component. For another example, you can give a root component, e.g. App, and then use all sub components and ReactElements within this root.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>React Demo<\/title>\r\n <!-- react includes two parts: react.js and react-dom.js -->\r\n <script src=\"\/\/fb.me\/react-0.14.7.min.js\"><\/script>\r\n <script src=\"\/\/fb.me\/react-dom-0.14.7.min.js\"><\/script>\r\n\r\n <!-- babel standalone -->\r\n <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/6.10.3\/babel.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div id=\"app\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n var HelloWorld = React.createClass({\r\n \/\/ render function of React component\r\n render: function () {\r\n return (\r\n <div>\r\n <h3>Hello<\/h3>\r\n <p>Nice to meet you!<\/p>\r\n <\/div>\r\n )\r\n }\r\n });\r\n\r\n var App = React.createClass({\r\n render: function () {\r\n return (\r\n <div>\r\n <h1>React Demo App<\/h1>\r\n <HelloWorld \/>\r\n <\/div>\r\n )\r\n }\r\n });\r\n\r\n \/\/ Mount root App component\r\n ReactDOM.render(<App \/>, document.getElementById('app'));\r\n <\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n4 CSS class and inline styles of React component<\/h3>\n
The usual way of adding CSS class name and inline styles will not take effect in React component.<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>React Demo<\/title>\r\n <!-- react includes two parts: react.js and react-dom.js -->\r\n <script src=\"\/\/fb.me\/react-0.14.7.min.js\"><\/script>\r\n <script src=\"\/\/fb.me\/react-dom-0.14.7.min.js\"><\/script>\r\n\r\n <!-- babel standalone -->\r\n <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/6.10.3\/babel.min.js\"><\/script>\r\n\r\n <style type=\"text\/css\">\r\n <!--\r\n .greet { color: red}\r\n -->\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"app\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n var HelloWorld = React.createClass({\r\n render: function () {\r\n return (\r\n <div>\r\n <h3 style=\"color:blue;\">Hello<\/h3>\r\n <p class=\"greet\">Nice to meet you!<\/p>\r\n <\/div>\r\n )\r\n }\r\n });\r\n\r\n var App = React.createClass({\r\n render: function () {\r\n return (\r\n <div>\r\n <h1>React Demo App<\/h1>\r\n <HelloWorld \/>\r\n <\/div>\r\n )\r\n }\r\n });\r\n\r\n \/\/ Mount root App component\r\n ReactDOM.render(<App \/>, document.getElementById('app'));\r\n <\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\nThe inline style color:blue; and CSS class greet not only won’t work, but will raise JavaScript error. (See it in JavaScript console of developer tool in your browser.)<\/p>\n
Just as I have said, h3 and p here are ReactElements instead of real HTML DOM elements.<\/p>\n
The correct way to set a CSS class name is to use className property of React components or ReactElements.<\/p>\n
Likewise, inline CSS styles should be wrapped as an object and passed to the style property of React components.<\/p>\n
<script type=\"text\/babel\">\r\n\/\/ ...\r\n\r\nvar HelloWorld = React.createClass({\r\n render: function () {\r\n return (\r\n <div>\r\n <h3 style={ {color: 'blue'} }>Hello<\/h3>\r\n <p className=\"greet\">Nice to meet you!<\/p>\r\n <\/div>\r\n )\r\n }\r\n});\r\n\r\n\/\/ ...\r\n<\/script><\/code><\/pre>\nAlternatively, if the inline styles are long and complex, you can predefine styles as a variable.<\/p>\n
<script type=\"text\/babel\">\r\n\/\/ ...\r\n\r\nvar HelloWorld = React.createClass({\r\n render: function () {\r\n var styleObj = {\r\n color: 'blue',\r\n \/\/ font-size in CamelCase\r\n fontSize: '40px'\r\n };\r\n\r\n return (\r\n <div>\r\n <h3 style={ styleObj }>Hello<\/h3>\r\n <p className=\"greet\">Nice to meet you!<\/p>\r\n <\/div>\r\n )\r\n }\r\n});\r\n\r\n\/\/ ...\r\n<\/script><\/code><\/pre>\nNote that the CSS property name should be written in CamelCase way, just as the way in plain JavaScript.<\/p>\n
\/\/ CamelCase for padding-left is: paddingLeft\r\ndocument.getElementById('demo').style.paddingLeft = '30px';<\/code><\/pre>\nReference<\/h3>\n