React のソースコードを表示する方法

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 サイトの他の関連記事を参照してください。