登录  /  注册
首页 > web前端 > js教程 > 正文

怎么查看react源码

王林
发布: 2020-11-30 10:43:46
原创
3616人浏览过

查看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('root'));
登录后复制

相关推荐:js教程

以上就是怎么查看react源码的详细内容,更多请关注php中文网其它相关文章!

相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学