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命令行中输 ...
随机推荐
- JAVA数据库连接池的革命 -- 从BoneCP到HikariCP(转)
从BoneCP到HikariCP 今天笔者本想更新一下项目中使用到的BoneCP版本的.却无意发现jolbox网站打不开了.起初以为是被墙掉了,经过一番查找,居然在BoneCP的Github站看到了如 ...
- Docker容器中MySQL最大连接数被限制为214的解决方案
原文:Docker容器中MySQL最大连接数被限制为214的解决方案 一.背景 话说笔者在上次的博客里简单的讲了一下调整MySQL最大连接数的方法.在文章的最后笔者提到了还有一些特殊情况比如说Dock ...
- 【流水调度问题】【邻项交换对比】【Johnson法则】洛谷P1080国王游戏/P1248加工生产调度/P2123皇后游戏/P1541爬山
前提说明,因为我比较菜,关于理论性的证明大部分是搬来其他大佬的,相应地方有注明. 我自己写的部分换颜色来便于区分. 邻项交换对比是求一定条件下的最优排序的思想(个人理解).这部分最近做了一些题,就一起 ...
- bzoj 1045 [HAOI2008] 糖果传递——设变量推式子
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1045 费用流TLE. #include<iostream> #include&l ...
- vim中NERDTREE插件的使用
一个显示目录树的插件,很不错 学习于: http://blog.csdn.net/xiongzhengxiang/article/details/7375607
- C# 配置文件 Appconfig
WinForm或WPF应用程序有时候需要保存用户的一些配置就要用到配置文件,而微软为我们的应用程序提供了Application Configuration File,就是应用程序配置文件,可以很方便的 ...
- 如何在不卸载原来jdk1.8的情况下切换到jdk1.7
将Path环境变量中的JAVA_HOME变量中写入现在的JDK1.7路径即可.
- springboot自定义错误页面(转)
方法一:Spring Boot 将所有的错误默认映射到/error, 实现ErrorController @Controller @RequestMapping(value = "error ...
- es6 babel转码器安装配置及常见命令
示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...
- thinkphp---display与fetch区别
区别: ① display方法直接输出模板文件渲染后的内容,fetch方法是返回模板文件渲染后的内容 ② 有时候我们不想直接输出模板内容,而是希望对内容再进行一些处理后输出, 就可以使用fetch方法 ...