反応を学ぶにはどうすればよいですか？ React の学習パスの詳細な紹介 (完全な例が含まれています)

React の学習は一夜にしてできるものではなく、始めるのもそれほど簡単ではないようです。しかし、それだけの価値があると思います。以下の記事を読んでみましょう

これは React を学習する際の私の経験の一部です。皆さんのお役に立てれば幸いです。

プレビュー

追加、削除、変更の機能を備えたシンプルなユーザー管理システムです。

スタイル

最も単純なスタイルから始めましょう

React では、通常の CSS と React で定義されたスタイルの 2 つのスタイルを使用できます。

className="" を通じて参照される通常の CSS スタイル。

<!--普通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>

React で定義され、style={} を通じて参照されるスタイル。 )、最初の文字は大文字にする必要があります)、ここで Board というコンポーネントを構築し、それを getInitialState

を通じて初期化しました。 ReactDOM.render を通じて HTML ページに読み込みます。 ReactDOM.render に複数のコンポーネントまたはタグがある場合は、それらを p タグで囲む必要があります。

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

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

rreeprops と state

state:

React はコンポーネントをステート マシンとして扱います。ユーザーと対話することにより、さまざまな状態が実現され、ユーザー インターフェイスとデータの一貫性を保つために UI がレンダリングされます。 React では、コンポーネントの状態を更新し、(DOM を操作せずに) 新しい状態に基づいてユーザー インターフェイスを再レンダリングするだけで済みます。

props: state と props の主な違いは、

props が不変であるのに対し、state はユーザーとの対話に基づいて変更できることです。このため、一部のコンテナ コンポーネントではデータを更新および変更するために状態を定義する必要があります。 子コンポーネントは props を介してのみデータを渡すことができます。

関数 Reactのボタンクリックイベントは通常のJavaScriptと似ていますが、onClick

の

Cは大文字にする必要があり、そうでない場合はエラーが報告されることに注意してください。この記事では、ボタンをクリックして編集のブール値を変更し、setState 関数で更新して通常モードと編集モードを切り替えます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの React Reference Manual 列にアクセスして学習してください)

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')
	);

すべてのコード

<button onClick={this.edit}>编辑</button>

この記事はここで終了です (さらに詳しく知りたい場合は、 PHP 中国語 Web サイト

React ユーザー マニュアル

コラムで学習してください) にアクセスしてください。ご質問がある場合は、以下にメッセージを残してください。

以上が反応を学ぶにはどうすればよいですか？ React の学習パスの詳細な紹介 (完全な例が含まれています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。