How to learn react? Detailed introduction to the learning path of react (complete examples included)

Learning React is not something that happens overnight, and getting started doesn’t seem that simple. But I think it's all worth it. Let's read this article

This is some of my experience in learning React, I hope it can help everyone!

Preview

This is a simple user management system with the functions of adding, deleting and changing.

Style

Let’s start with the simplest style

React can use two styles, one is Ordinary css, a style defined in React.

Ordinary css styles are referenced through className=""

<!--普通css样式-->
<style>
	.style_2{
		background-color: #6699ff;
		font-size: 24px;
		padding: 3px 5px 3px 5px;
		color: #FFFFFF;
	}
	.Separate{
		height: 10px;
	}
</style>

<span>账号:</span>

The styles defined in React are referenced through style={}

//React的css样式
	var style_1={
		color:'#9900ff',
		padding:3,
	}

<h1 id="落叶丶Fly的React小站">落叶丶Fly的React小站</h1>

Component

Build the component (the name should be random, the first letter should be capitalized), I built a component called Board here, and then Initialize via getInitialState. Load into html page through ReactDOM.render. If there are multiple components or tags in ReactDOM.render, they need to be wrapped with a p tag.

var Board = React.createClass({
		//初始数据
		getInitialState: function(){
			return ({
				comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
			});    },

//初始化
		eachComment: function(text,i){
			return (
				
					

					<span>账号:</span>
					{text.account}
					

					用户名:
					{text.name}
				
			);
		},

ReactDOM.render(
		//需要用一个p标签来包裹
		

			
<h1 id="落叶丶Fly的React小站">落叶丶Fly的React小站</h1>
			
		,
		document.getElementById('container')
	);

props and state

##state: React treats components as state machines. By interacting with the user, different states are achieved, and then the UI is rendered to keep the user interface and data consistent. In React, you only need to update the component's state, and then re-render the user interface based on the new state (without manipulating the DOM).

props: The main difference between state and props is that props is immutable, while state can be changed based on interaction with the user. Change. This is why some container components need to define state to update and modify data. Subcomponents can only pass data through props.

Function

The button click event in React is similar to ordinary JavaScript, but you should pay attention to

onClick The C in must be capitalized, otherwise an error will be reported. This article changes the Boolean value of editing by clicking a button, and updates it with the setState function to switch between normal mode and editing mode. (If you want to see more, go to the PHP Chinese website React Reference Manual column to learn)

<button>编辑</button>

		//编辑
		edit: function(){
			this.setState({editing: true});
		},
		//保存
		save: function(){
			var val = this.refs.new_account.value;
			var val1 = this.refs.new_name.value;
			console.log("拿到的值是: " + val+val1);
			this.props.updateCommentText(val,val1,this.props.index)
			this.setState({editing: false});
		},

                //普通模式
		renderNormal:function(){
			return (
				

					
{this.props.children}
					<button>编辑</button>
					移除
				
			);
		},
		//编辑模式
		renderForm:function(){
			let children =  this.props.children
			return (
				

					
					

					
					

					保存
				
			)
		},
		//模式更改
		render: function (){
			//console.log(this.props)
			if(this.state.editing){
				return this.renderForm();
			}else{
				return this.renderNormal();
			}
		}

All codes

nbsp;html>


    
    
    
    <script></script>
    <script></script>
    <script></script>

<!--普通css样式-->
<style>
	.style_2{
		background-color: #6699ff;
		font-size: 24px;
		padding: 3px 5px 3px 5px;
		color: #FFFFFF;
	}
	.Separate{
		height: 10px;
	}
</style>

	
	

<script>
	//React的css样式
	var style_1={
		color:&#39;#9900ff&#39;,
		padding:3,
	}
	var Board = React.createClass({
		//初始数据
		getInitialState: function(){
			return ({
				comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
			});
		},
		//修改并更新数据
		updateComment: function(new_account,new_name,i){
			console.log(new_account+":"+new_name);
			var arr = this.state.comments;
			arr[i].account = new_account;
			arr[i].name = new_name;
			this.setState({comments: arr});
		},
		//删除数据
		removeComment: function(i){
			var arr = this.state.comments;
			arr.splice(i,1);
			this.setState({comments: arr});
		},
		//初始化
		eachComment: function(text,i){
			return (
				<Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
					<br className="Separate">
					<span className="style_2">账号:
					<span className="style_2">{text.account}
					<br>
					<span className="style_2">用户名:
					<span className="style_2">{text.name}
				
			);
		},
		//新增用户
		add: function(text){
			var arr = this.state.comments;
			arr.push(text);
			console.log(&#39;arr&#39;, this.state.comments)
			this.setState({comments: arr});
		},
		render: function(){
			return (
				<p>
					<button onClick={this.add.bind(null,{account:"account",name:"name"})}>新增用户
					<p>
					{
						this.state.comments.map(this.eachComment)
					}
					
				
			);
		}
	});
	//编辑保存移除状态
	var Comment = React.createClass({
		getInitialState: function(){
			return ({editing: false});
		},
		//编辑
		edit: function(){
			this.setState({editing: true});
		},
		//移除
		remove: function(){
			// alert("removing comment!");
			this.props.deleteFromBoard(this.props.index);
		},
		//保存
		save: function(){
			var val = this.refs.new_account.value;
			var val1 = this.refs.new_name.value;
			console.log("拿到的值是: " + val+val1);
			this.props.updateCommentText(val,val1,this.props.index)
			this.setState({editing: false});
		},
		//普通模式
		renderNormal:function(){
			return (
				<p>
					<p>{this.props.children}
					<button onClick={this.edit}>编辑
					<button onClick={this.remove}>移除
				
			);
		},
		//编辑模式
		renderForm:function(){
			let children =  this.props.children
			return (
				<p>
					<input ref="new_account" type="text" defaultValue = {children[2].props.children} />
					<p>
					<input ref="new_name" type="text" defaultValue = {children[5].props.children} />
					<p>
					<button onClick={this.save}>保存
				
			)
		},
		//模式更改
		render: function (){
			//console.log(this.props)
			if(this.state.editing){
				return this.renderForm();
			}else{
				return this.renderNormal();
			}
		}
	});	
	ReactDOM.render(
		//需要用一个p标签来包裹
		<p>
			<h1 style={style_1}>落叶丶Fly的React小站
			<Board />
		,
		document.getElementById(&#39;container&#39;)
	);
</script>

This article ends here (if you want to see more, go to the PHP Chinese website

React User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to learn react? Detailed introduction to the learning path of react (complete examples included). For more information, please follow other related articles on the PHP Chinese website!