React ソース コードを表示する方法: 1. React 公式 Web サイトにアクセスします; 2. パッケージ ファイルをローカルにダウンロードします; 3. React ソース コードのエントリ ファイルである Index.js ファイルを開きます。 Babel を介して React ソースコードを変換することもできます。
このチュートリアルの動作環境: Windows10 システム、react16 バージョン この方法は、すべてのブランドのコンピューターに適しています。
(学習ビデオ共有: react video チュートリアル)
具体的な方法は次のとおりです:
1. 公式 Web サイトにアクセスします
https://github.com/facebook/react
2. ソース コードはすべてパッケージ ファイル
https://github.com/facebook/react/tree/master/packages
3 にあります。ファイルはローカルにダウンロードでき、より便利です
4. 次に、pageages/react/ と入力します。 Index.js ファイル、このファイルは React ソースコードの入り口です。
5 この URL は、React コードを babel
https://react.docschina.org/
で変換したコードとして表示できます。例:
import React, { Component } from "react"; import ReactDOM from "react-dom"; import "./index.css"; function FuncCmp(props) { return <div>name: {props.name}</div>; } class ClassCmp extends Component { render() { return <div>name: {this.props.name}</div>; } } const jsx = ( <div> <p>我是内容</p> <FuncCmp name="我是function组件" /> <ClassCmp name="我是class组件" /> </div> ); ReactDOM.render(jsx, document.getElementById("root"));
babel によるコンパイル後:
function FuncCmp(props) { return React.createElement( "div", null, "name: ", props.name ); } class ClassCmp extends React.Component { render() { return React.createElement( "div", null, "name: ", this.props.name ); } } let jsx = React.createElement( "div", null, " ", React.createElement( "div", { className: "border" }, "我是内容" ), " ", React.createElement(FuncCmp, { name: "我是function组件" }), " ", React.createElement(ClassCmp, { name: "我是class组件" }), " " ); ReactDOM.render(jsx, document.getElementById('root'));
関連する推奨事項: js チュートリアル
以上がReact のソースコードを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。