ホームページ > ウェブフロントエンド > jsチュートリアル > Reactをインストールするにはどうすればよいですか? React のインストール手順の紹介 (完全な例付き)

Reactをインストールするにはどうすればよいですか? React のインストール手順の紹介 (完全な例付き)

寻∝梦
リリース: 2018-09-11 13:57:58
オリジナル
3079 人が閲覧しました

この記事ではreactのインストール手順を中心に紹介し、reactの特徴や概念についても解説していますので、一緒に読んでいきましょう

一 React

1. コンセプト

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。
React は主に UI の構築に使用され、MVC の V (ビュー) に相当します。
React は、Instagram Web サイトを構築するための Facebook の内部プロジェクトとして誕生し、2013 年 5 月にオープンソース化されました。
React はパフォーマンスが高く、コード ロジックは非常にシンプルです。

2. 機能

  • 効率的 - React は DOM をシミュレートすることで DOM との対話を最小限に抑えます。 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

  • 灵活 −React可以与已知的库或框架很好地配合。

  • JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但建议使用它。

  • 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

  • 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。(Redux)

3. [安装] (https://doc.react-china.org/docs/installation.html)

yarn init
yarn add react react-dom react-scripts
ログイン後にコピー

package.json

{  "name": "test",  "version": "1.0.0",  "description": "zzz",  "main": "index.js",  "license": "MIT",  "dependencies": {    "react": "^16.2.0",    "react-dom": "^16.2.0",    "react-scripts": "^1.0.17"
  },  "scripts": {    "start": "react-scripts start"
  }
}
ログイン後にコピー

4. 组件

1. ES6 class

class Welcome extends React.Component {
    render() {        return (            <h1> Hello, {this.props.name} </h1>
        )
    }
} 
class App extends React.Component {
    render() {
        return (            <p>
                <Welcome name = "zhz1" />
                <Welcome name = "zhz2" />
                <Welcome name = "zhz3" />
            </p>
        )
    }
}
ログイン後にコピー

2. 函数式 (无状态组件)

function Welcome(props) {
    return <h1> Hello, {props.name} </h1>}
function App() {
    return (        <p>
            <Welcome name = "zhz1" />
            <Welcome name = "zhz2" />
            <Welcome name = "zhz3" />
        </p>
    )
}
ログイン後にコピー

3. ES5-写法 React.createClass(仅做参考)

React.createClass会自绑定函数方法(不像React.Component只绑定需要关心的函数)导致不必要的性能开销,增加代码过时的可能性。

const Welcome = (props) => {    return <h1> Hello, {this.props.name} </h1>}
const App = React.createClass ({
    render() {
        return (            <p>
                <Welcome name1 = "ss" />
                <Welcome name1 = "zhz2" />
                <Welcome name1 = "zhz3" />
            </p>
        )
    }
});
ログイン後にコピー

导出(提供接口)
export default App

5. Props 属性

6. State 状态

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。

React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)(想看更多就到PHP中文网React参考手册栏目中学习)

class Welcome extends React.Component {
    render() {        return (            <h1 onClick={this.props.onClick} > Hello, {this.props.name} </h1>
        )
    }
} 
class App extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        }
    }
    changeText() {
        this.setState((preState, props) => ({
            selected: !preState.selected
        }))
    }
    render() {
        return (            <p> 
                <Welcome name= {this.state.selected ? "zhz3-selected" : "zhz3" } onClick={() => this.changeText()} />                <h1 onClick={() => this.changeText()}> {this.state.selected ? "zhz3-selected" : "zhz3" } </h1>
            </p>
        )
    }
}
export default App;
ログイン後にコピー

6. 注意

  • class 属性变为 className

  • tabindex 属性变为 tabIndex

  • for 属性变为 htmlFor

  • textarea 的值通过需要通过 value 属性来指定

  • style 属性的值接收一个对象,css 的属性变为驼峰

柔軟性 −React は既知のライブラリやフレームワークとうまく連携します。

JSX -JSXはJavaScript構文の拡張です。 JSX は React 開発には必須ではありませんが、推奨されます。 🎜🎜🎜🎜Component - React を通じてコン​​ポーネントを構築すると、コードの再利用が容易になり、大規模プロジェクトの開発にうまく適用できます。 🎜🎜🎜🎜一方向応答データ フロー - React は一方向応答データ フローを実装し、それによってコードの繰り返しを減らします。そのため、従来のデータ バインディングよりもシンプルになります。 (Redux)🎜🎜🎜🎜3. [インストール] (https://doc.react-china.org/docs/installation.html)🎜rrreee🎜🎜🎜package.json🎜rrreee🎜4 . コンポーネント🎜

1. ES6 クラス

rrreee

2. 機能 (ステートレス コンポーネント)

rrreee

3. ES5 の作成メソッド React.createClass (参照のみ) >🎜React.createClass は関数メソッドを自己バインドします (必要な関数のみをバインドする React.Component とは異なります)。これにより、不要なパフォーマンスのオーバーヘッドが発生し、コードが陳腐化する可能性が高まります。 🎜rrreee🎜Export (インターフェイスの提供) 🎜export default App🎜🎜5. Props 属性🎜🎜6. 状態 state🎜🎜React はコンポーネントをステート マシン (ステート マシン) として扱います。ユーザーと対話することにより、さまざまな状態が実現され、ユーザー インターフェイスとデータの一貫性を保つために UI がレンダリングされます。 🎜🎜 React では、コンポーネントの状態を更新し、新しい状態に応じてユーザー インターフェイスを再レンダリングするだけで済みます (DOM を操作しないでください) (さらに詳しく知りたい場合は、PHP 中国語 Web サイトにアクセスしてください) 🎜React リファレンス マニュアル🎜 の列を参照してください) 🎜rrreee🎜6. 🎜🎜🎜🎜class 属性が className に変更されることに注意してください🎜🎜🎜🎜tabindex 属性が tabIndex に変更されることに注意してください。 🎜🎜🎜for 属性が htmlFor に変更されます🎜🎜🎜textarea の値は、value 属性を通じて指定する必要があります。🎜🎜🎜style 属性の値を受け取ります。 css 属性は ハンプケース になります (backgroundColor など)。 🎜🎜🎜🎜この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト🎜React ユーザーマニュアル🎜 の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。 🎜

以上がReactをインストールするにはどうすればよいですか? React のインストール手順の紹介 (完全な例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート