React JS Hello World
For instance, the Hello world example of a React website can be as simple as:
Create a simple index.html file and paste following code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello world</title> <!-- Script tags including React --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> <script src="https://firstname.lastname@example.org/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello world</h1>, document.querySelector('#app') ); </script> </body> </html>
How does it work?
Unlike many of its predecessors, React operates not directly on the browser’s Document Object Model (DOM) immediately, but on a virtual DOM. That is, rather than manipulating the document in a browser after changes to our data (which can be quite slow) it resolves changes in its virtual DOM. After the virtual DOM has been updated, React intelligently determines what changes to make to the actual DOM.
The React Virtual DOM exists entirely in-memory and is a representation of the web browser’s DOM. Because of this, we when we write a React component, we’re not writing directly to the DOM, but we’re writing a virtual component that React will turn into the DOM.
DOM DOM DOM 🙁 🙁 What is DOM ?
The HTML DOM is a standard object model and programming interface for HTML. It defines:
The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
For more details about DOM visit https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
React.js Training and Tutorials
Learn how to use React.js, from beginner basics to advanced techniques, with online video tutorials taught by industry experts.