react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...
1.安装react 开发工具
1.下载 chrome react developer tools
下载地址:https://pan.baidu.com/s/1eSZsXDC 下载好是一个crx 格式的文件。
2.安装:打开chrome 浏览器==>更多工具==》扩展程序
将插件拖入 在详细信息中点击启用即可; react developer tools 安装完毕。
2.现在开始新建一个react项目:
1.确保电脑中已经安装好node npm
如何确定已经安装好node--打开命令工具 输入cmd==》输入node -v 如出现版本号,则说明node已经安装好,详情请看之前关于“安装node及相关配置”的文章
npm同理。
2.
方案一:
方案一会帮你打包你的代码,为你提供一个开发服务器,但是需要自己添加所需依赖。
安装全局包。
在WebStorm的左下角点击Terminal,输入:npm i react-scripts -g
。初始化。
继续输入:npm init
,然后安静等待,当出现下图划线部分时(如果你的项目名不是英文小写,请自觉输入),否则一直狂按回车键就好。在新创建的项目下新建一个名为public的文件夹,并在该文件夹下新建一个名为index.html的文件。
在新创建的项目下新建一个名为src的文件夹,并在该文件夹下新建一个名为index.js的文件。
添加依赖。
点回左下角的Terminal,继续输入:npm i react react-dom -S
。打开index.html文件,在代码行中输入
!
,再按tab键
,可快捷生成html文档。之后在body
标签对中添加:<div id="app" />
打开package.json文件,将下图中的内容进行替换:
替换后:
在src文件夹下新建一个组件App.js,其代码如下:
import React from 'react'; class App extends React.Component {
render () {
return (
<div>
Hello React!
</div>
);
}
} export default App;打开index.js文件,在代码行中输入:
import React from 'react';
import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('app'));
运行。
点回左下角的Terminal,输入:npm start
,即可运行我们写的Hello React! 小应用啦~
方案二:
方案二的方法更方便,使用create-react-app
包,然后几行命令就搞定了,只是可能会比较慢== (在cmd命令行中)进入某盘f:回车即可,进入某个路径 f:\react和回车即可
你可以在GitHub上面详细了解这个包。 create-react-app
会帮你下载项目的模板文件,比如public/index.html和src/index.js这些,然后会帮你执行npm install来安装项目依赖。
这里就不按步骤依次截图了,在左下角的Terminal中按序键入下列命令就好,其他的都不用做:
1.npm i create-react-app -g
2.create-react-app test
3.cd react-router/
4.npm start
步骤2 的
create-react-app test
test 为项目的名字
问题及解决:
import
是ES6的语法,需要转换一下:
转换成ES6后,忽略这条消息就好:
React使用的是JSX语法,需要转换一下:
全文完。
转载于:https://www.cnblogs.com/ylboke/p/9593029.html
react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...的更多相关文章
- PythonWeb开发教程(二),搭建第一个django项目
这篇写怎么创建django项目,以及把django项目运行起来. 1.创建django项目 a.使用命令创建,安装完django之后就有django-admin命令了,执行命令创建即可,命令如下: ...
- React - React Developer Tools开发者工具的安装与使用(Chrome调试插件)
原文地址:http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html 虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过Re ...
- 安装DRools开发环境
1.下载相关安装包和开发插件 网站:http://www.jboss.org/drools/downloads.html 1.1 drools-distribution-6.3.0.Final.zip ...
- 15个必须知道的 Chrome 开发技巧
在 Web 开发者中,Chrome 是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用 console 和 d ...
- Android Studio 入门级教程(二):新建一个属于自己的工程并安装Genymotion模拟器
声明 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4392611.html [系列] Andr ...
- React开发调试工具--react-developer-tools
1. 首先,下载react-developer-tools开发调试工具插件. 因为谷歌插件下载需要FQ,这里提供一个本地资源:https://www.crx4chrome.com/crx/3068/ ...
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 7. react 基础 - React Developer Tools 的安装 及 使用
1. 安装 react 开发调试工具 React Developer Tools 打开 chrome 浏览器访问 chrome://extensions/ 点击右上角的 拓展程序 -> 打开 c ...
- win10下通过编译源码方式在chrome中成功安装react-devtools开发工具插件
win10下通过编译源码方式在chrome中成功安装react-devtools开发工具插件 1.去git上下载react-devtools文件到本地,https://github.com/fac ...
随机推荐
- 【原创】Linux RCU原理剖析(一)-初窥门径
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- 微信小程序wx.setStorage(OBJECT)
关于微信小程序的:wx.setStorage(OBJECT)在官网API介绍到:
- android开发对应高德地图定位服务进度一
进行android的高德地图开发首先需要进入高德地图的控制台进行注册登录.之后创建新的应用并且绑定软件得到相应的key. 这里面需要找到自己软件对应的多个SHA1.这里有发布版和调试版,以及对应的软件 ...
- flask-migrate的基本使用
Flask-migrate 在实际开发环境中,经常会发生数据库修改的行为.一般我们修改数据库不会手动的去修改,而是去修改orm对应的模型, 然后再把模型映射到数据库中.这时候如果有一个工具能专门做这种 ...
- Linux网络安全篇,认识防火墙(二),Netfilter
一.概述 因为iptables软件利用的是数据包的过滤的机制.所以它会分析数据包的报头数据.根据报头数据与定义的规则来决定该数据是否可以放行.若数据包内容与规则内容相同则放行,否则继续与下一条规则进行 ...
- javascript 入门 之 bootstrap 第一个程序
<table data-toggle="table"> <thead> <tr> <th>Item ID</th> &l ...
- 搭建react项目(低配版)
react项目低配版,可作为react相关测试的基础环境,方便快速进行测试. git clone git@github.com:whosMeya/simple-react-app.git git ch ...
- 19cRAC增删节点
由于测试环境打19c补丁失败,导致节点2 d2 crs无法启动!打补丁没有有效备份,亲人两行泪 先删再加节点. 一.删除节点 1.1 删除实例 参考 https://www.cnblogs.com/ ...
- 011-指针(上)-C语言笔记
011-指针(上)-C语言笔记 学习目标 1.[掌握]字符串常用函数 2.[掌握]指针变量的声明 3.[掌握]指针变量的初始化 4.[掌握]函数与指针 5.[掌握]指针的数据类型 6.[掌握]多级指针 ...
- Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题
1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...