반응을 배우는 방법? React 학습 경로에 대한 자세한 소개(전체 예제 포함)

React를 배우는 것은 하루아침에 이루어지는 것이 아니며, 시작하는 것도 그렇게 간단해 보이지 않습니다. 그러나 나는 그것이 그만한 가치가 있다고 생각합니다. 아래에서 이 글을 읽어보세요

이것은 제가 React를 배우면서 경험한 내용 중 일부입니다. 모두에게 도움이 되기를 바랍니다!

Preview

추가, 삭제, 변경 기능을 갖춘 간단한 사용자 관리 시스템입니다.

Style

가장 간단한 스타일부터 시작하겠습니다

React는 두 가지 스타일을 사용할 수 있습니다. 하나는 일반 CSS이고 다른 하나는 React에서 정의한 스타일입니다.

className=""을 통해 참조되는 일반 CSS 스타일

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

<span>账号:</span>

React에 정의된 스타일, style={}

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

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

Component

을 통해 참조됨 구성 요소 빌드(원하는 대로 이름 지정) ) , 첫 글자는 대문자로 표기해야 합니다) 여기에 Board라는 컴포넌트를 만든 뒤 getInitialState를 통해 초기화했습니다. ReactDOM.render를 통해 html 페이지에 로드합니다. ReactDOM.render에 여러 구성요소나 태그가 있는 경우 p 태그로 래핑해야 합니다.

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는 구성 요소를 상태 머신으로 취급합니다. 사용자와 상호 작용하여 다양한 상태가 달성된 다음 사용자 인터페이스와 데이터의 일관성을 유지하기 위해 UI가 렌더링됩니다. React에서는 구성 요소의 상태를 업데이트한 다음 새 상태를 기반으로 사용자 인터페이스를 다시 렌더링하기만 하면 됩니다(DOM을 조작하지 않고).

props: state와 props의 주요 차이점은 props는 변경할 수 없지만 상태는 사용자와의 상호 작용에 따라 변경될 수 있다는 것입니다. 이것이 바로 일부 컨테이너 구성 요소가 데이터를 업데이트하고 수정하기 위해 상태를 정의해야 하는 이유입니다. 하위 구성 요소는 props를 통해서만 데이터를 전달할 수 있습니다.

기능

React의 버튼 클릭 이벤트는 일반 JavaScript와 유사하지만 onClick의 C는 대문자로 표기해야 하며, 그렇지 않으면 오류가 보고된다는 점에 유의하세요. 이 글에서는 버튼을 클릭하여 편집의 Boolean 값을 변경하고, 일반 모드와 편집 모드를 전환하는 setState 함수로 업데이트합니다. (자세한 내용을 보고 싶으시면 PHP 중국어 홈페이지의 React Reference Manual 칼럼을 참고하세요.)

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

모든 코드

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>

이 글은 여기서 끝납니다. (더 보고 싶으시면, PHP 중국어 웹사이트 React 사용자 매뉴얼칼럼에서 자세히 알아보세요.) 궁금한 사항이 있으면 아래에 메시지를 남겨주세요.

위 내용은 반응을 배우는 방법? React 학습 경로에 대한 자세한 소개(전체 예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!