Let us start the looking into React with some basic examples, as always we will start will a very basic Hello World example.
This example just displays a string "Hello World" in the browser. The example contains 2 files index.html and index.jsx.
The index.html is the template file into which the react component will be loaded.
The index.jsx file is the React component file which contains a HelloWorld component.
Apart from these files we will need to setup the environment to take care of compiling the .jsx files and rendering the component to the browser. Setting up the environment will be an overkill for this basic example hence we will skip that part. For this example am using a "webpack-react-boilerplate" which takes care of setting up the environment so that we can focus on the actual example.
Let us now look into the example files.
index.html
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Component } from 'react';
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<span>Hello World</span>
</div>
);
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('app'));
The index,html file has a div tag with id="app", this will be the placeholder for the React component.
The index.jsx file has a HelloWorld react component. The ReactDOM.render() statement loads the component into the div tag
This example just displays a string "Hello World" in the browser. The example contains 2 files index.html and index.jsx.
The index.html is the template file into which the react component will be loaded.
The index.jsx file is the React component file which contains a HelloWorld component.
Apart from these files we will need to setup the environment to take care of compiling the .jsx files and rendering the component to the browser. Setting up the environment will be an overkill for this basic example hence we will skip that part. For this example am using a "webpack-react-boilerplate" which takes care of setting up the environment so that we can focus on the actual example.
Let us now look into the example files.
index.html
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Component } from 'react';
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<span>Hello World</span>
</div>
);
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('app'));
The index,html file has a div tag with id="app", this will be the placeholder for the React component.
The index.jsx file has a HelloWorld react component. The ReactDOM.render() statement loads the component into the div tag
No comments:
Post a Comment