react_1

28695 ワード
Web開発コース
react
次の2つのリンクから変更します.
http://www.runoob.com/react
http://www.ruanyifeng.com/blog/2015/03/react.html
  • Reactは、ユーザインタフェースを構築するためのJAVASCRITPライブラリです.
  • dom操作を最小限に抑えることで、jsベースのページレンダリングロジック
    • をより容易にすることができます.
    reactの機能
  • ウェブサイトを書いて、h 5-appを開発しますhttp://www.runoob.com/react/react-install.html
  • 原生app:react-nativeを開発する:https://reactnative.cn/

    • 最初のreactインスタンス
  • 外部のライブラリをインポートすることに注意(ローカルにダウンロードしてからインポートすることも選択可能)
  • 次のコードは全部で3つのライブラリを使用しました:react.js 、react-dom.jsとbabel.min.js、最初にロードする必要があります.ここでreact.jsはReactのコアライブラリ、react-domです.jsはDOMに関する機能を提供する、Browser.jsの役割はJSX構文をJavaScript構文に変換することです.このステップは時間がかかります.実際にオンラインになったときは、サーバに置いて
    • を完了する必要があります.
  • scriptラベルのtypeプロパティはtext/babelです.これはReact独自のJSX構文でJavaScriptと互換性がないためです.JSXを使用する場合はtype=「text/babel」
    • を付ける
  • Reactは、通常のJavaScriptの代わりにJSXを使用します.これにより、要素の挿入が容易になります.
  • 表示する必要があるすべての内容は1つのブロックでなければなりません.最上階には複数の兄弟がいてはいけません.
  • ReactDOM.renderは、テンプレートをHTML言語に変換し、指定したDOMノードを挿入するReactの最も基本的な方法です.
    • 
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js">script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js">script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js">script>
head>
<body>

<div id="example">div>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);
script>

body>
html>

    その他同上
  • jsxは、変数によって
    • を定義することができる.
    const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

    に質問
    1 reactで次のリストを出力してください.
  • 春眠不覚暁
  • あちこちで鳴き鳥
    • を聞いています
    jsx構文
  • <>html出力
    • に従う.
  • {}内のコードはjs出力
    • として使用される.
    namesは変数です
    var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <p>{names}</p>,
  document.getElementById('example')
);

    namesを要素として直接出力すると
    var arr = [
  <h1>Alice</h1>,
  <h2>Kate</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

    mapでマッピングできます
    var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);
  • reactに基づくサイクル実装
    • var names = ["ccc","bbb","aaa"];

var dd=[]
for (var i = 0; i < 4; i++){
		dd.push(<div>{names[i]}</div>)
}

ReactDOM.render(
  <div>{dd}
  </div>,
  document.getElementById('example')
);

    に質問
    1 reactのmapとループ方法でそれぞれ以下のフォーマット「春暁」を出力してください.
    春の眠りは至る所で鳥の夜来の風雨の音を聞いて花が散ってどれだけ知っているか分からない.
    2,配列arr=[4,3,2,5,1,3,2]が与えられ,reactによりページに3より大きい数が出力される
    45
    3、配列arr=[4,3,2,5,1,3,2]が与えられ、reactによってページに3より大きい数が出力され、以下のフォーマットで出力される.
    Find, 4 Find, 5
  • jsxのスタイル
  • なぜjsx要素にスタイルを直接書き込むことができないのですか?
  • jsxではclassはclassName
    • と書かなければならないことに注意してください.
    	<style>
	.foo{
		color:red;
	}
	style>
	<div id="root">div>
	<script type="text/babel">
	const element = <h1 className="foo">Hello, world</h1>;
	ReactDOM.render(element, document.getElementById('root'));
	script>

        <div id="example">div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>    </h1>,
      	document.getElementById('example')
      );
    script>
  • JSXではif else文は使用できませんが、
    • の代わりにconditional(三元演算)式を使用できます.
        <div id="example">div>
    <script type="text/babel">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}h1>
        div>
      	,
      	document.getElementById('example')
      );

    に質問
    1,reactのclassNameと変数導入の方法でそれぞれ次のスタイルの表示react_1_第1张图片をしてください
    2,reactで次のようなカラーの『春暁』を実現してください(ここではループが2つの異なる配列を伝達することに注意してください.カラースタイルはc 2=[{color:“blue”},{color:“pink”},{color:“yellow”},{color:“red”}])と書くことができます.
    react_1_第2张图片
    関数コンポーネント
  • Reactでは、コードをコンポーネントにカプセル化し、通常のHTMLラベルを挿入するように、このコンポーネント
    • をWebページに挿入することができる.
  • の次のコードでは、変数HelloMessageはコンポーネントクラスです.テンプレートを挿入すると、HelloMessageのインスタンスが自動的に生成されます(以下、「コンポーネント」はコンポーネントクラスのインスタンスを指します).すべてのコンポーネントクラスには、コンポーネントを出力するための独自のrenderメソッドが必要です.
  • コンポーネントクラスの最初のアルファベットは大文字でなければなりません.そうしないと、HelloMessageはhelloMessageと書くことができません.また、コンポーネントクラスにはトップレベルのラベルが1つしか含まれていません.そうしないと、エラーが発生します.
    • <div id="example">div>
<script type="text/babel">
function HelloMessage(props) {
	return <h1>Hello World!</h1>;
}

const element = <HelloMessage />;

ReactDOM.render(
	element,
	document.getElementById('example')
);
script>
  • コンポーネントにパラメータを渡す必要がある場合は、thisを使用します.propsオブジェクト
  • パラメータを渡す方法は、コンポーネントのプロパティに
    • と書くことに注意してください.
  • 次の例のname属性はpropsを通過する.nameは
    • を取得する
    <div id="example">div>
<script type="text/babel">
function HelloMessage(props) {
	return <h1>Hello {props.name}!</h1>;
}

const element = <HelloMessage name="Runoob"/>;

ReactDOM.render(
	element,
	document.getElementById('example')
);
script>

    に質問
    1.reactで関数コンポーネントを定義し、任意の文字列とその色を入力し、入力した色に従って斜体フォーマットとして出力させる
    Getting your new app listed - the 5 Essential Steps to App Store Acceptance
    Swift API Design Guidelinesを翻訳してみた(Fundamentals)