React 17.0.2 源码打包调试方法

最新推荐文章于 2022-10-21 14:57:10 发布
最新推荐文章于 2022-10-21 14:57:10 发布
阅读量597 收藏
点赞数
分类专栏： 前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DongFuPanda/article/details/113398157
版权

更具体可见官网之如何贡献

  1. 拉取代码，打包生成 react、react-dom、scheduler
git clone https://github.com/facebook/react.git
yarn
yarn build react/index,react/jsx-dev-runtime,react-dom/index,scheduler --type=NODE

cd build/node_modules/react
yarn link
cd build/node_modules/react-dom
yarn link
  1. 在其他目录创建 react 项目，通过 yarn link 绑定上面的 react 和 react-dom
yarn create react-app my-app
cd my-app
yarn remove react react-dom
yarn link react react-dom
DongFuPanda
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react打包示例
01-13
react打包示例react打包示例react打包示例react打包示例
React render流程解析
schooling_chan的博客
09-12 466
学习react源码首先从react入口函数开始学习，这篇文章你将学习到如何进行调试代码和学会react render执行流程。 调试代码 这里只是进行简单的流程介绍，具体的可以看卡颂老师的拉取源码教程 # 拉取代码 git clone https://github.com/facebook/react.git # 执行打包命令 yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE # 通过yarn link改变依赖包
react 脚手架打包不生成 sourceMap 的解决方案
纯爱枫若情的博客
09-28 4441
react 脚手架打包不生成 sourceMap 的解决方案 前言 我相信很多前端工程师都跟我一样，用惯了开源的项目脚手架工具以后，都不习惯自己配置 webpack 了。 经常听同行们开玩笑说，某某某个公司要启动一个项目，所有的人员都配置好了，就缺一个首席 webpack 工程师了。 虽然是一句玩笑话，但是从侧面也反映出来了，想把 webpack 配置好，是不多么不容易的事情。自己动手给项目配置 ...
build怎么调试 react_React调试——visual studio code
weixin_32259717的博客
01-14 158
Welcome to Reactyou'll needNode.jsJavaScript runtime andnpm(Node.js package manager) installed. npm is included with Node.js which you can download and install fromNode.js downloads.Tip: To test ...
.tex类型文件怎么阅读_另辟蹊径搭建阅读React源码调试环境-支持所有React版本细分文件断点调试
weixin_39637920的博客
11-23 119
若要高效阅读和理解React源码，搭建调试环境是必不可少的一步。而常规方法：使用react.development.js和react-dom.development.js调试，虽然方便，但无法知道每段代码属于哪个细分文件，所以本文将介绍一种取巧的方法搭建便于调试React源码的环境，支持断点调试细分文件，并且此方法理论上可应用于所有Reat版本。最近一个月忙着换工作，这周终于有时间继续写发文章。写...
react build打包测试环境报错
chuxuezhe427的博客
09-01 741
#npm run build:test 或 yarn build:test 使用前需要安装dotenv-cli（https://github.com/entropitor/dotenv-cli），否则会报如下错误： 安装全局dotenv-cli： 执行命令：yarn global add dotenv-cli 或者 npminstall -gdotenv-cli 安装完成： 再次执行如图： 打包完成 ...
react-17.0.2
02-22
react最新包，17.0.2
debug-react:react@17.0.2调试器开发环境
03-29
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行该应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
react-17.0.2.zip
最新发布
05-04
react.js for windows 各个版本，免费下载 前端三大框架之一 react 各个版本，免费下载 如果下载不了，关注我，评论区联系我 React 是一个库。它允许你将组件放在一起，但不关注路由和数据获取。要使用 React 构建...
react 18.2.0；babel.min.js 6.26.0
07-22
react官网提供的cdn地址经常抽风，因此下载最新js到本地用于开发测试。react.development.js 18.2.0；react-dom.development.js 18.2.0；babel.min.js 6.26.0
基于aliplayer使用react封装的播放器源码.zip
05-18
基于aliplayer使用react封装的播放器源码
React 项目调试技巧
Where there is a will there is a way
11-25 1888
前端开发的调试方式 借助以下插件进行调试。 Redux DevTools React Developer Tools React Perf F12 之后，在源代码处打断点。 堪比 Java 代码调试的方案：用 WebStorm + JetBrains IDE Support 插件，在 WebStorm 内调试代码，直接在 WebStorm 源代码上打断点，调试起来有点象在 IDEA 下调试...
React源码：下载源码(第一步）
YanHSama的博客
04-16 1607
GitHub上react地址：https://github.com/facebook/react git clone https://github.com/facebook/react.git 查看所有分支 git branch -a react 版本分支 切换分支17.0.2 git checkout 17.0.2 项目目录结构
React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)
oKeYue的博客
12-30 2619
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用
React多页面应用6(webpack4 开发环境打包性能初提升)
oKeYue的博客
04-12 915
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.042、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.083、React多页面应用3(webpack4 多页面实现)---2...
React 多环境运行打包配置(版本区分)（env）
Z_Wonderful的博客
10-21 4958
React 多环境运行打包配置(版本区分)
react项目打包
zep
02-24 8691
一、react项目打包 对于使用脚手架创建的项目，打包是一件非常容易的事情： yarn build 其他文件没有太多要解析的，我们看一下js文件： [hash].chunk.js 代表是所有依赖的第三方库， vendor(第三方库) 的代码； main.[hash].chunk.js 我们自己编写的应用程序代码； runtime~main.[hash].js Webpack runtime逻辑的chunk； 用于加载和运行你的应用程序； 思考：随着业务逻辑代码越多，main会变得非常臃肿； 二、
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
oKeYue的博客
01-02 1401
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29 3.React多页面应用
请根据这套依赖："dependencies": { "konva": "^3.3.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-konva": "^16.8.7-4" },写出绘制椭圆，并且当点击选中椭圆时可以操控椭圆旋转
06-14
可以参考以下代码，利用react-konva库绘制椭圆并实现选中椭圆后可以旋转的功能： ```jsx import React, { useState } from 'react'; import { Stage, Layer, Ellipse } from 'react-konva'; const EllipseDemo = () => { const [selected, setSelected] = useState(false); const [rotation, setRotation] = useState(0); const handleEllipseClick = () => { setSelected(!selected); }; const handleEllipseDragEnd = (e) => { setRotation(e.target.rotation()); }; return ( <Stage width={window.innerWidth} height={window.innerHeight}> <Layer> <Ellipse x={window.innerWidth / 2} y={window.innerHeight / 2} radiusX={100} radiusY={50} fill="#00afff" stroke="#000" strokeWidth={2} onClick={handleEllipseClick} draggable onDragEnd={handleEllipseDragEnd} rotation={rotation} shadowBlur={selected ? 10 : 0} shadowOpacity={selected ? 0.6 : 0} shadowOffsetX={selected ? 5 : 0} shadowOffsetY={selected ? 5 : 0} /> </Layer> </Stage> ); }; export default EllipseDemo; ``` 代码解释： 1. 首先通过useState来定义选中状态selected和椭圆旋转角度rotation的状态。 2. 在`<Ellipse>`标签中，定义椭圆的各种属性，其中`onClick`属性用于在点击椭圆时切换选中状态，`draggable`属性用于开启椭圆的拖拽功能，`onDragEnd`属性用于在拖拽结束时保存椭圆的旋转角度。 3. 通过`<Stage>`和`<Layer>`标签来创建画布和图层，将`<Ellipse>`标签放置在图层中，并设置其初始位置、大小和样式。 4. 在椭圆的`<Ellipse>`标签中，使用`shadow`属性来实现选中时的阴影效果。 通过上述代码，我们即可实现绘制椭圆并可以操控旋转的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值