React Developer Tools – React开发人员工具

点击下载:React_Developer_Tools_4.4.crx

React Developer Tools是针对开源React JavaScript库的Chrome DevTools扩展。它使您可以检查Chrome开发者工具中的React组件层次结构。

介绍与使用方法:

现在开始新建一个react项目:

1、确保电脑中已经安装好node  npm

如何确定已经安装好node–打开命令工具 输入cmd==》输入node -v 如出现版本号,则说明node已经安装好。

方案一会帮你打包你的代码,为你提供一个开发服务器,但是需要自己添加所需依赖。

2、安装全局包,在WebStorm的左下角点击Terminal,输入:npm i react-scripts -g。 

3、初始化,继续输入: npm init,然后安静等待,当出现下图划线部分时(如果你的项目名不是英文小写,请自觉输入),否则一直狂按回车键就好。 

4、在新创建的项目下新建一个名为public的文件夹,并在该文件夹下新建一个名为index.html的文件。 

5、在新创建的项目下新建一个名为src的文件夹,并在该文件夹下新建一个名为index.js的文件。

6、添加依赖,点回左下角的Terminal,继续输入:npm i react react-dom -S。
打开index.html文件,在代码行中输入!,再按tab键,可快捷生成html文档。之后在body标签对中添加<div id="app" />

7、打开package.json文件,将下图中的内容进行替换:

替换后: 

8、在src文件夹下新建一个组件App.js,其代码如下:

import React from 'react';

class App extends React.Component {
render () {
return (
<div>
Hello React!
</div>
);
}
}

export default App;

9、打开index.js文件,在代码行中输入:

import React from 'react';
import ReactDOM from 'react-dom';
 
import App from './App';
 
ReactDOM.render(<App />, document.getElementById('app'));

10、运行,点回左下角的Terminal,输入:npm start,即可运行我们写的Hello React! 小应用

 

给TA买糖
共{{data.count}}人
人已赞赏
实用插件

Native HLS Playback – 允许浏览器“本地”播放HLS视频网址(m3u8)

2021-10-7 9:30:38

实用插件

Office Editing for Docs, Sheets & Slides – 在浏览器中打开excl、word、ppt文档

2021-10-7 9:30:40

重要说明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Mankey 或给邮箱发送邮件l.0.h#foxmail.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索