Let us look at how react web application works. Please find the source code for very basic application at below location.
https://github.com/conquistadorjd/myreactapp
Let us look at index.js file.
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (<div>
<h1>You are on website techtrekking.net</h1>
<ul>
<li >FIrst</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Now let us look at each elements separately:
var React = require('react');
- It saves a JavaScript object into your file. This object contains methods that are needed to make React work, such as React.createElement and React.createClass
- when a JSX element is compiled, it transforms into a React.createElement() call. e.g. React.createElement
var ReactDOM = require('react-dom');
- The methods returned by require(‘react-dom’) are for interacting with the DOM. e.g. ReactDOM.render
- This object contains methods that are concerned with DOM interaction, such as ReactDOM.render
ReactDOM.render(<App />, document.getElementById('root'));
- ReactDOM.render is the most common way to render JSX
- It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM.
- ReactDOM.render()’s first argument should evaluate to a JSX expression, it doesn’t have to literally be a JSX expression. The first argument could also be a variable.
- Second argument is the DOM where this will be rendered.