react foundation - from installation

1, react installation mode

Import method: script tag import

1. You can go to the react official website to download, or you can directly use the React CDN Library of BootCDN. The address is as follows:

<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>
We have introduced three libraries: react.min.js, react dom.min.js and babel.min.js
React.min.js - the core library of react
React dom.min.js - provides DOM related functionality
babel.min.js - Babel can convert ES6 code to ES5 code, so that we can execute React code on browsers that currently do not support ES6. Support for JSX is embedded in Babel. By using Babel with the Babel sublime package, you can take the syntax rendering of the source code to a new level. So if we need to use JSX, the type attribute of the < script > tag needs to be set to text/babel.
2. Instance: the instance includes how to define components and add classes in react. Note that there is only one root node in each component of react
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react Foundation 01</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>
    <style>
    	.first{
    		color:#185;
    	}
    </style>
</head>
<body>
	<div id="example"></div>
	<script type="text/babel">
	{
		// ReactDOM.render(
		// 	<h1>Hello React</h1>,
		// 	document.getElementById("example")
		// ); 
	}
		var Hello=React.createClass({
			render:function(){
				return(
					<div className="first">
						<p>first react assembly</p>
						<p>It's a struggle whether to go or not</p>
					</div>
				)
			}
		});
		ReactDOM.render(<Hello/>,document.getElementById("example"));
	</script>
</body>
</html>

3. Pass value between components

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>props Pass value</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="example"></div>
	<script type="text/babel">
		var ComponentOne=React.createClass({
			render:function(){
				return(
					<div>
						{this.props.title},{this.props.hello}
					</div>
				)
			}
		});
		var ComponentTwo=React.createClass({
			render:function(){
				var hello="hello react";
				return(
					<ComponentOne title="react Value transfer between components" hello={hello}/>
				)
			}
		});
		ReactDOM.render(<ComponentTwo/>,document.getElementById("example"));
	</script>
</body>
</html>
4. Event response in react

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react event</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="example"></div>
	<script type="text/babel">
		var EventTest=React.createClass({
			// State initialization
			getInitialState:function(){
				return{
					title:"Click Change"
				}
			},
			// Define events
			btnClick:function(){
				this.setState({
					title:"Click the button"
				})
			},
			render:function(){
				return(
					<div>
						<p>{this.state.title}</p>
						<button onClick={this.btnClick}>change</button>
					</div>
				)
			}
		});
		ReactDOM.render(<EventTest/>,document.getElementById("example"));
	</script>
</body>
</html>
npm method installation

One click building method

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

react is now installed

Tags: React npm sublime Attribute

Posted on Thu, 30 Apr 2020 11:40:40 -0700 by Idri