反応概要

7831 ワード
react javascript テキストリンク

何が反応ですか?
反応は、ユーザーインターフェイスを構築するための宣言的、効率的かつ柔軟なJavaScriptライブラリです.それはあなたが“コンポーネント”と呼ばれるコードの小さく分離された部分から複雑なUISを作成することができます.
反応はいくつかの異なる種類のコンポーネントを持っていますが、我々は反応から始めます.コンポーネントのサブクラス
class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />
我々はすぐにタグのような面白いXMLになるでしょう.我々は、画面上で見たいものを反応するコンポーネントを使用します.我々のデータが変わるとき、反応は効率的に更新して、我々の構成要素を再レンダリングします.
ここで、ShoppingListは反応コンポーネントクラスです、あるいは、成分タイプに反応してください.コンポーネントは、プロップ(“プロパティ”の短い)と呼ばれるパラメーターを取り、レンダリングメソッドを介して表示するビューの階層を返します.

HTMLページに追加する
このクイックスタートチュートリアルでは、このようなページに反応を追加します.
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>

<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

<body>

<script type="text/babel">
    //  JSX Babel code goes here
</script>

</body>
</html>

どのようなバベルですか?
BabelはJavaScriptにマークアップまたはプログラミング言語を翻訳できるJavaScriptコンパイラです.
バベルでは、JavaScriptの最新の機能を使用することができます.
バベル別の変換がご利用いただけます.反応は、JavascriptにJSXを変換するために、Babelを使います.
Please note that <script type="text/babel"> is needed for using Babel.

JSXとは
JSXはJavaScript XMLを表します.
JSXはJavaScriptへのXML/HTMLのような拡張です.
const element = <h1>Hello World!</h1>
上記のように、JSXはJavaScriptやHTMLではありません.
JSXはまた、ES 6(ECMAScript 2015)の完全なパワーとともに来るJavaScriptへのXML構文拡張です.
HTMLと同じように、JSXタグにはタグの名前、属性、および子供を持つことができます.属性が固い括弧で包まれるならば、値はJavaScript式です.Note that JSX does not use quotes around the HTML text string.
DOMレンダリングを無効にします
メソッドReactDOM.render ()を使用してHTML要素をレンダリングします.
<div id="id01">Hello World!</div>

<script type="text/babel">
ReactDOM.render(
    <h1>Hello React!</h1>,
    document.getElementById('id01'));
</script>

JSX表現
式は、cury {}括弧でそれらを包んでJSXで使用できます.
<div id="id01">Hello World!</div>

<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
    <h1>Hello {name}!</h1>,
    document.getElementById('id01'));
</script>

反応元素
反応アプリケーションは通常、単一のHTML要素の周りに構築されます.
開発者はしばしばrootノード(ルート要素)と呼びます.<div id="root"></div>反応する要素は次のようになります.const element = <h1>Hello React!</h1>要素はreactdomでレンダリング(表示)されます.render ()メソッド:ReactDOM.render(element, document.getElementById('root'));反応する要素は不変です.彼らは変えられない.
Response要素を変更する唯一の方法は、毎回新しい要素をレンダリングすることです.
function tick() {
    const element = (<h1>{new Date().toLocaleTimeString()}</h1>);
    ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);

コンポーネント
反応するコンポーネントはJavaScript関数です.
この例では、「Welcome」という名前の反応コンポーネントを作成します.
function Welcome() {
    return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
また、EE 6クラスを使用してコンポーネントを作成することもできます.
この例では、WRITEという名前のReplyコンポーネントをレンダリングメソッドで作成します.
class Welcome extends React.Component {
    render() { return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />, document.getElementById('root'));

反応コンポーネントのプロパティー
この例では、プロパティー引数を持つ“Welcome”という名前の反応コンポーネントを作成します.
function Welcome(props) {
    return <h1>Hello {props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));
また、EE 6クラスを使用してコンポーネントを作成することもできます.
この例では、プロパティー引数を持つ“Welcome”という名前の反応コンポーネントを作成します.
class Welcome extends React.Component {
    render() { return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));

JSXコンパイラ

The examples on this page compiles JSX in the browser.
For production code, the compilation should be done separately.



アプリケーションを作成
Facebookは、反応アプリを構築するために必要なすべてを作成する反応アプリケーションを作成しました.
それはWebPackを使用して開発サーバー、反応、JSX、およびES 6、自動プレフィックスCSSファイルをコンパイルすることです.
を作成するアプリケーションは、テストでは、コードの間違いについて警告してエスリントを使用します.
CREATERANTアプリを作成するには、次のコードを端末に実行します.
npx create-react-app react-tutorial
ノードがあることを確認します.JS 5.2以上.さもなければ、NPXをインストールしなければなりません:
npm i npx
つのフォルダを起動します.
C:\Users\myUser>npx create-react-app react-tutorial

成功結果:
npx: installed 63 in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+ [email protected]
added 1732 packages from 664 contributors and audited 31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]

Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!

We suggest that you begin by typing:

cd react-tutorial
npm start
[プログラマー]数字の表現Lv2 - Python
3.JAVA構文の概要