react项目安装及运行
博客地址 :https://www.cnblogs.com/sandraryan/
安装node ,有就跳过。
node.js官网:https://nodejs.org/en/
终端用node -v 和 npm -v 来查看版本号。
用npm 安装 create-react-app工具,自动地在本地目录中创建react项目。
npm install -g create-react-app
全局安装create-react-app脚手架工具,使用命令创建新的react项目。
create-react-app 文件夹名
在文件夹中部署npm,导入react-dom依赖包.
cd 文件夹:
npm init (然后一路回车)初始化 package.json
,它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。
npm install --save react react-dom ( 在该目录下导入react和react-dom)
npm install --save react-router-dom (react路由,以后会用到)
打开 npm start 成功√
CSS in js 可以将css写在js中react安装styled-copmonents 工具包,对js中css代码进行解析,转码生效(组件化样式)
npm i styled-components --save
安装react 数据监测组件
npm i prop-types --save
react项目安装及运行的更多相关文章
- React Native 安装
第一 :在天朝如果你可以违规上网的话便可以按 react native 中文网的文档进行安装与调试.地址为:https://reactnative.cn/docs/getting-started.ht ...
- 解决react项目中跨域和axios封装使用
最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点 1.请求跨域问题 2.如何发起请求 3.axios的简单封装 全局安装create-react-app脚手架 ...
- react项目搭建及webpack配置
1,配置webpack npm install -g webpack webpack的cli环境 npm install -g webpack-dev-se ...
- 前端新手如何安装webstorm ,初步搭建react项目
下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了.(存微信收藏..) 1:在webstorm下配置node环境: 2:完成之后: React官方脚手架地址: https ...
- react项目如何运行
react项目如何运行 一.总结 一句话总结: npm i 安装好package.json的 指定插件后,npm start 启动项目 二.react项目的安装与运行 转自或参考:react项目的安装 ...
- react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...
1.安装react 开发工具 1.下载 chrome react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC 下载好是 ...
- 基于Abp React前端的项目建立与运行——React框架分析
基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 ...
- JavaWeb学习之tomcat安装与运行、tomcat的目录结构、配置tomcat的管理用户、web项目目录、虚拟目录、虚拟主机(1)
1.tomcat安装与运行双击tomcat目录下的bin/startup.bat,启动之后,输入http://localhost:8080,出现安装成功的提示,表示安装tomcat成功 2.tomca ...
- React项目搭建及依赖安装
一.前提 首先保证node.js已安装完成... 安装完成后,打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成. 二.安装react脚手架 在cmd命令行中输 ...
随机推荐
- spring boot定时任务解析
在SpringBoot中定时任务一般使用的是@Scheduled注解. @Scheduled 1.注解内容: @Target({ElementType.METHOD, ElementType.ANNO ...
- 2019.9.18 csp-s模拟测试46 反思总结
神志不清: 回去休息(x)继续考试(√) 非常爆炸的一次考试.看错题码完T1回去再看发现自己过于幼稚,T2读完题看着16mb的空间秒出正解然后逻辑出现致命失误100pts->0pts,T3看了一 ...
- chrome 浏览器 添加访问助手来访问网上应用商店
chrome浏览器的强大之处,在于可以chrome浏览器的扩展程序来实现很多功能.然而不能下载扩展程序.可以借助chrome访问助手来实现: 下载chrome访问助手:https://pan.baid ...
- python 单元测试之初次尝试
python 语言中有很多单元测试框架和工具,而unittest单元测试框架作为标准python语言中的一个模块.是其他框架和工具的基础.想要进行单元测试,我们需要使用到unittest框架中的功能. ...
- ListView设置的点点滴滴
去掉ListView的分界线 1. ListView的属性Divider设为#FFCC00 这种对任何背景都适用 2. 把ListView的属性Divider设为和背景一样的颜色 3.and ...
- 手把手教你如何玩转消息中间件(ActiveMQ) https://blog.csdn.net/cs_hnu_scw/article/details/81040834
#情景引入小白:起床起床起床起床....快起床~我:怎么了又,大惊小怪,吓到我了.小白:我有事有事想找你,十万火急呢~~我:你能有什么事?反正我不信..那你说说看~~小白:就是我有两个小表弟,叫大白和 ...
- 更新与发展 | Alibaba Cloud Linux 2 特性与开发细节揭秘
2019 年 4 月,Alibaba Cloud Linux 2 (Aliyun Linux 2) 正式开源.时至今日,已经走过三个月的里程.在这段时间内,这个刚诞生不久的为阿里云 ECS 环境定制优 ...
- docker入门 基础命令 docker安装
docker入门 在学一门新知识的时候,超哥喜欢提问,why?what?how? wiki资料 什么是docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes ...
- 非接触型手掌静脉识别 PalmSecure™
静脉识别,使用近红外线读取静脉模式,与存储的静脉模式进行比较,进行本人识别的识别技术.富士通的PalmSecure™,利用该技术,由离开识别装置的位置,使用近红外线拍摄,与预先存储的静脉模式进行比较从 ...
- springboot集成mongoDB 异常认证
1.springboot连接mongoDB 出现异常认证 异常详情: com.mongodb.MongoSecurityException: Exception authenticating Mong ...