首頁  >  文章  >  web前端  >  怎麼查看react原始碼

怎麼查看react原始碼

王林
王林原創
2020-11-26 10:08:214374瀏覽

查看react原始碼的方法:1、進入react官網;2、下載packages檔案到本機;3、開啟index.js檔案即可,該檔案就是react原始碼的入口檔案。我們也可以透過babel將react原始碼進行轉換。

怎麼查看react原始碼

本教學操作環境:windows10系統、react16版,此方法適用於所有品牌電腦。

(學習影片分享:react影片教學

具體方法如下:

一、進入官網

https://github.com/facebook/react

二、原始碼都在 packages 檔案裡

https://github.com/facebook/react/tree/master/packages

三、可以將檔案下載到本地,這樣看起來會方便點

四、然後進入 pageages/react/index.js 檔案裡,這個文件就是react原始碼的入口

五、這個網址可以將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(&#39;root&#39;));

相關推薦:js教學

#

以上是怎麼查看react原始碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn