查看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 name: {props.name};
}
class ClassCmp extends Component {
render() {
return name: {this.props.name};
}
}
const jsx = (
我是内容
);
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教程










