依次输入命令:

npm install -g create-react-app
create-react-app react16 cd my-app
npm start

在浏览器中输入 local:3000 即可查看项目运行效果:

* 使用 create-react-app 创建项目成功在命令行中有提示信息如下,分别给出了项目启动、打包、测试和弹出配置文件的命令:

Success! Created react16 at /Users/wangxi/.Trash/react16/react16
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd react16
yarn start
Happy hacking!

参考: Creating a New Application

创建 React 项目的更多相关文章

  1. React(一)使用脚手架创建React项目

    1.安装脚手架 现在使用较多的就是这三种脚手架工具: react-boilerplate react-redux-starter-kit create-react-app 我使用的是第三种,faceb ...

  2. 创建react项目的几种方法

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  3. 使用creata-react-app脚手架创建react项目时非常慢的问题

    创建react项目必须要有下面两个步骤 cnpm install -g create-react-app  //创建react全局变量 create-react-app my-app //创建一个re ...

  4. 创建react项目并集成eslint/prettier/commit-lint

    创建 react 项目 npx create-react-app jira-new --template typescript 如果不想使用 TS,而要用 JS 的话,则删除 -template ty ...

  5. 创建react项目

    npm搭建React项目 React官网提供最简便的方法是使用create-react-app npx create-react-app my-app cd my-app npm start 也可以自 ...

  6. 用rekit创建react项目

    第一步  先进入github.com 然后搜索rekit 往下滑 1 . 先全局安装 npm install -g rekit 2 . 进入自己想要创建项目文件的目录输入 rekit create / ...

  7. create-react-app创建react项目失败!

    create-react-app my-app 用管理员运行cmd,问题依然. 打开日志,看到错误详细信息如下 32189 verbose unlock done using C:\Users\fen ...

  8. create-react-app创建react项目 css模块化处理

    用的css预处理器用sass,其他大同小异. 用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆): 配置sass,用的最新的CRA,webpack4 ...

  9. webpack 4.X 创建 react项目

    1. 新建一个文件夹2. 运行 npm init -y 快速初始化项目3. 在跟目录创建src文件夹 dist文件夹4. 在src下创建 index.html main.js // index.htm ...

  10. npm创建react项目

    1:win+R 输入cmd ,打开cmd面板 2:安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3:安装r ...

随机推荐

  1. 【娱乐向】制作Chrome天气预报扩展程序

    1.什么是Chrome扩展程序 Chrome扩展程序是一个用Web技术开发,用来扩展增强浏览器功能的软件.和一般的网页一样,Chrome扩展程序由html.js.css和图片等部分组成.Chrome插 ...

  2. 问题:调用 ASP.Net Core WebAPI的HTTP POST方法时,从 [FromBody] 中读取的 MongoDB GeoJsonObjectModel成员总是null

    问题描述: POST/PUT to ASP.Net Core with [FromBody] to a MongoDB GeoJsonObjectModel member is always null ...

  3. JavaScript序列化对象成URL格式

    http://access911.net/fixhtm/72FABF1E15DCEAF3.htm?tt=

  4. vs编译报错 BLOCK_TYPE_IS_VALID(pHead->nBlockUse)

    1.重复释放内存导致,new delete和malloc free两个组合分配的堆空间都不能重复释放两次: 2.用delete或者free释放栈空间导致内存空间被破坏(栈空间内存的头部有系统写入的一些 ...

  5. Qt Charts_Audio实践

    这里完全是照搬帮助文档中的代码生成的程序 上预览图 工程文件代码 #------------------------------------------------- # # Project crea ...

  6. java设计模式之观察者模式以及在java中作用

    观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.模型-视图(Model/View)模式.源-监听器(Source/Listener)模式或从属者(Dependen ...

  7. 多线程&&I/O

    不是操作系统的,是UNIX环境高级编程的!

  8. idea 快捷键(复制)

    Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...

  9. Java相关配置合集

    Java环境变量配置: 1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为C:\java\jdk1.6.0_08: 2.安装完成后,右击“我的电脑”,点击“属性”: 3.XP选 ...

  10. wait_event_interruptible_timeout

    最近一套方案涉及到内核线程之间的同步,用到了函数wait_event_interruptible_timeout函数,大致是这样: A:是一个后台的线程,平常没事就睡觉,有时被唤醒,或者每5分钟醒一次 ...