React将由三部分组成，其中，Redux是应用状态管理服务，React-Router用于路由映射，React View用于显示界面。

　　我们使用Facebook推荐的create-react-app来进行项目初始化配置。首先确保系统已正确安装Node及Npm。

⒈使用npm安装create-react-app（全局安装）

npm install create-react-app -g

⒉初始化项目

d:

cd Coreqi

#直接创建ts环境的项目

create-react-app ts-react --scripts-version=react-scripts-ts

⒊运行项目

　　初始化项目之后我们会得到一个名为ts-react的目录，让我们进入目录运行一下吧

cd ts-react

yarn start

　　执行完该命令后会自动打开浏览器访问http://localhost:3000。

初始化一个React项目（TypeScript环境）的更多相关文章

  1. 初始化一个React项目

    1.create-react-app是一个通过npm发布的安装包,在确认Node.js和npm安装好之后,输入下面命令创建. 2.安装结束后,使用下面命令创建应用目录. 3.打开目录 4.运行项目 5 ...

  2. React环境配置（第一个React项目）

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  3. 从零构建一个react+webpack+typescript的应用

    今天要完成在windows下从零开始构建一个react应用的任务 首先,新建一个文件夹,然后在该文件夹下使用命令npm init 初始化一个node项目. 然后安装所需依赖, npm i react ...

  4. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  5. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  6. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  7. react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...

    1.安装react 开发工具 1.下载    chrome      react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是 ...

  8. 如何架构一个 React 项目？

    编程有点像搞园艺.比起竭力去对付BUG(虫子),我们更愿意把一切弄得整洁有序,以免最后落得个身在荒野丛林中.低劣的架构会拖我们的后腿,也会使得BUG更容易钻进系统里去. 想要对你的项目进行架构,方法有 ...

  9. 脚手架创建一个React项目

    一.安装 1.安装node.js 官网地址 https://nodejs.org/en/ 进入后点击下载,官方网站会根据你的系统类型推荐最适合你安装的版本.(如果已经安装了node.js跳过此步)如下 ...

随机推荐

  1. VMware虚拟机找不到USB设备该怎么办?

    VMware虚拟机找不到USB设备该怎么办?打开虚拟机发现竟然找不到usb设备,键盘和鼠标都是usb的,这该怎么办呢?出现这个问题是因为VMUSBArbService服务没有开启,下面分享开启的方法 ...

  2. 批量添加解释-有单词没解释youdao

     下载地址:     有单词没解释 批量查询解释 当你有手里很多单词,数量很大比如500个及单词以上,那么一个一个去查询是相当麻烦的. 如果 有个软件实现批量查询然后将查询的结果添加到单词的后面,是不 ...

  3. 微信小程序实现左侧滑栏

    前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. 效果 先看看效果 ...

  4. DELPHI控件升级

    DELPHI控件升级 1)DELPHI里面卸载旧版控件: 2)WINDOWS里面卸载旧版控件: 3)删除旧版控件所在安装文件夹: 4)删除旧版的DCU,DCP,BPL文件: 5)安装新版控件: 6)程 ...

  5. 设定rsync开机自启动

    1.启用rsync服务systemctl enable rsync 2.打开rsync自己的开关,这个找了好多地方才找到的vi /etc/default/rsyncRSYNC_ENABLE=true

  6. 空指针异常 自动拆箱 防止 NPE，是程序员的基本修养 本手册明确防止 NPE 是调用者的责任。

    空指针异常 空指针异常是指java中的异常类.   中文名 空指针异常 外文名 NullPointerException 当应用程序试图在需要对象的地方使用 null 时,抛出该异常.这种情况包括: ...

  7. MiniUI treeGrid 树节点展开和不展开的性能差别很大

    参考API: http://miniui.com/docs/api/index.html#ui=datagrid http://miniui.com/docs/api/index.html#ui=tr ...

  8. ISO/IEC 9899:2011 条款6.5.6——加法操作符

    6.5.6 加法操作符 语法 1.additive-expression: multiplication-expression additive-expression    +    multipli ...

  9. 基于spark logicplan的表血缘关系解析实现

    随着公司平台用户数量与表数量的不断增多,各种表之间的数据流向也变得更加复杂,特别是某个任务中会对源表读取并进行一系列复杂的变换后又生成新的数据表,因此需要一套表血缘关系解析机制能清晰地解析出每个任务所 ...

  10. 解决 Win10 系统新建文件夹后需手动刷新才能显示

    摘自:https://blog.csdn.net/weixin_44447687/article/details/100702968 1.点击开始菜单,选择“运行”功能,然后在运行打开框中输入 reg ...