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 className="style_2">账号:</span>

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

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

<h1 style={style_1}>落叶丶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 className="style_2">账号:</span>
					{text.account}
					


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

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

			<h1 style={style_1}>落叶丶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

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 onClick={this.edit}>编辑</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 onClick={this.edit}>编辑</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

    
    
    
    
    
    


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

	
	

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!