React Components Basic Component
Example
Given the following HTML file:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Freact%2F15.2.1%2Freact.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Freact%2F15.2.1%2Freact-dom.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbabel-core%2F5.8.34%2Fbrowser.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%26lt%3Bdiv%2520id%3D%26quot%3Bcontent%26quot%3B%26gt%3B%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520type%3D%26quot%3Btext%2Fbabel%26quot%3B%2520src%3D%26quot%3Bscripts%2Fexample.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode">You can create a basic component using the following code in a separate file:
scripts/example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class FirstComponent extends Component {
render() {
return (
<div className="firstComponent">
Hello, world! I am a FirstComponent.
</div>
);
}
}
ReactDOM.render(
<FirstComponent />, // Note that this is the same as the variable you stored above
document.getElementById('content')
);
You will get the following result (note what is inside of div#content):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Freact%2F15.2.1%2Freact.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Freact%2F15.2.1%2Freact-dom.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbabel-core%2F5.8.34%2Fbrowser.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%26lt%3Bdiv%2520id%3D%26quot%3Bcontent%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bdiv%2520className%3D%26quot%3BfirstComponent%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Hello%2C%2520world!%2520I%2520am%2520a%2520FirstComponent.%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520type%3D%26quot%3Btext%2Fbabel%26quot%3B%2520src%3D%26quot%3Bscripts%2Fexample.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode">
