如何查看react源码

这篇文章给大家分享的是有关如何查看react源码的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

查看react源码的方法：1、进入react官网；2、下载packages文件到本地；3、打开index.js文件即可，该文件就是react源码的入口文件。我们还可以通过babel将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'));

感谢各位的阅读！关于如何查看react源码就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！