Comment apprendre à réagir ? Introduction détaillée au parcours d'apprentissage de React (exemples complets inclus)

Learning React ne se fait pas du jour au lendemain, et démarrer ne semble pas non plus si simple. Mais je pense que tout cela en vaut la peine. Lisons cet article

C'est une partie de mon expérience dans l'apprentissage de React, j'espère que cela pourra aider tout le monde !

Aperçu

Il s'agit d'un système de gestion d'utilisateurs simple avec les fonctions d'ajout, de suppression et de modification.

Style

Commençons par le style le plus simple

React peut utiliser deux styles, l'un est du CSS ordinaire, un style défini dans React.

Styles CSS courants, référencés via 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>

Styles définis dans React, via style={} Pour citer

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

<h1 style={style_1}>落叶丶Fly的React小站</h1>

composant

pour construire le composant (le nom doit être arbitraire, la première lettre doit être en majuscule ), I Un composant appelé Board est construit ici puis initialisé via getInitialState. Chargez dans la page HTML via ReactDOM.render. S'il y a plusieurs composants ou balises dans ReactDOM.render, ils doivent être encapsulés avec une balise p.

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 et état

state : React traite les composants comme un état machine (machines à états). En interagissant avec l'utilisateur, différents états sont obtenus, puis l'interface utilisateur est rendue pour maintenir la cohérence de l'interface utilisateur et des données. Dans React, il vous suffit de mettre à jour l'état du composant, puis de restituer l'interface utilisateur en fonction du nouvel état (sans manipuler le DOM).

props : La principale différence entre l'état et les accessoires est que les props sont immuables, tandis que l'état peut être modifié en fonction de l'interaction. avec l'utilisateur. C'est pourquoi certains composants du conteneur doivent définir un état pour mettre à jour et modifier les données. Les composants enfants ne peuvent transmettre des données que via des accessoires.

Fonction

L'événement de clic sur le bouton dans React est similaire au JavaScript ordinaire, mais faites attention à onClick Le C doit être en majuscule, sinon une erreur sera signalée. Cet article modifie la valeur booléenne de l'édition en cliquant sur un bouton et la met à jour avec la fonction setState pour basculer entre le mode normal et le mode d'édition. (Si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Colonne React Reference Manual pour en savoir plus)

<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();
			}
		}

Tous les codes

    
    
    
    
    
    

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

	
	

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois React User Manual colonne pour apprendre). Si vous avez des questions, vous pouvez laisser une question ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!