里面如何配置库_如何使用在线编辑工具快速调试React代码

在日常工作中，经常会遇到想要快速实现一个小的demo来测试自己想法的情况，网上有很多好用的在线编辑工具，如 CodePen , jsFiddle, JSRun等等

可参照程序员专用十大在线编译器整理：

https://cloud.tencent.com/developer/news/411708

问题一如何建立并配置CodePen来开发React小例子

1. 注册账号，可以用邮箱注册登陆

2. 点击页面左边的设置按钮去配置所需要的库和编译器，语言等

3. 写code并运行查看结果

下载库的一个地址：

• https://cdnjs.cloudflare.com 是快速，可靠，全局可用的开源包的下载

• https://unpkg.com 可以快速利用URL的方式下载npm上的包

1. 你可以直接在codepen中AddExtenertalScripts 中直接搜索需要的库

2. 假如你需要更多的lib,可以去cdnjs lib 下载

        https://cdnjs.com/libraries

• 做了一个小例子，是从React的官网上复制的代码，主要是完成鼠标移动时的图片跟随效果，https://codepen.io/ref3oz/pen/LYRBYqB试了一下，

        配置里面填：

https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js

是可以正常跑的，具体的配置可以查看以下例子中的设置，只需要修改JS配置：https://codepen.io/bradleyboy/pen/OPBpGw

//此时 JS 中需要写 React.render()函数调用React.render()

遇到的问题

但是填入0.16/17 版本的貌似有问题。

https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/cjs/react.development.js

当你添加react一个lib的时候，会出现以下error：

TypeError: React.render is not a function. (In 'React.render( /*#__PURE__*/React.createElement(MouseTracker, null), documen

我们是需要两个lib, React 和 React-dom.

https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js

仍然会出错，可以参考该问题总结：

 https://blog.csdn.net/jingshui1234/article/details/51612734

此时仍然会报错，

TypeError: ReactDOM.render is not a function. (In 'ReactDOM.render( /*#__PURE__*/React.createElement(MouseTracker, null), document.getElementById("page"))', 'ReactDOM.render' is undefined)

解决方案

方案一： 

但是把配置改成15.4.2就可以了

https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.jshttps://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js

方案二：

利用unpkg中的react库，配置文件改为：

https://unpkg.com/react@16.7.0/umd/react.production.min.jshttps://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js

• 值得注意的是，react的code应该写在JS tāb下，HTML中需要写一个root element去渲染react component 

问题二

MAC code . command not found error : 

code .不能快速打开当前路径的控制面板。

1. 打开vscode 快捷键shift+command+p 后输入shell

2. 选择 Install ‘code’ command in PATH