Write a simple Hello Word program
<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" />
<title> Hello React! </ title>
<script src = "https://cdn.bootcss.com/react/15.4.2/react.min.js"> </ script>
<script src = "https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"> </ script>
<script src = "https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"> </ script>
</ head>
<body>
<div id = "root"> </ div>
<script type = "text / babel">
var Hello = React.createClass ({
render: function () {
return <h1> Hello, world! </ h1>
}
});
ReactDOM.render (<Hello />, document.getElementById ('root'));
</ script>
</ body>
</ html>
This is not using build tools to use react to write a program that displays Hello, world. Here are a few things we need to do to use react:
1. Introduce the three files react.min.js, react-dom.min.js and babel.min.js, among which
1. react.min.js is the core library of react
2. react-dom.min.js provides operations related to the DOM, such as inserting components into a node of the DOM
3. babel.min.js is used to compile jsx and es6 syntax
<script src = "https://cdn.bootcss.com/react/15.4.2/react.min.js"> </ script>
<script src = "https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"> </ script>
<script src = "https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"> </ script>
2. In the template file, here is the above html file, providing a container to insert the content into this container
<div id = "root"> </ div>
3. Write jsx code, the type = "script / babel" of the script here, specify to use babel to compile the jsx file, there are two things in this jsx file:
1. Use React.createClass to create a component named Hello
2. Use ReactDOM.render to insert the Hello component into the div whose node id is root
<script type = "text / babel">
var Hello = React.createClass ({
render: function () {
return <h1> Hello, world! </ h1>
}
});
ReactDOM.render (<Hello />, document.getElementById ('root'));
</ script>
Click here to view the demo
Source code github address
Article reference [Rookie tutorial-react]
Article reference [Teacher Ruan Yifeng-react]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
