查看react原始碼的方法:1、進入react官網;2、下載packages檔案到本機;3、開啟index.js檔案即可,該檔案就是react原始碼的入口檔案。我們也可以透過babel將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('root'));
相關推薦:js教學
以上是怎麼查看react原始碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!