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'));