1.安装脚手架

现在使用较多的就是这三种脚手架工具：

  1. react-boilerplate
  2. react-redux-starter-kit
  3. create-react-app

我使用的是第三种，facebook官方开发的脚手架

npm install -g create-react-app

2.创建React项目

create-react-app my-app

主要依赖 react, react-dom, react-scripts

生成目录结构为：

3.运行React项目

npm start

4.使用ChromeReack插件调试工具

在chrome浏览器中添加拓展程序

自行下载文件

链接：https://pan.baidu.com/s/1T5gtbf3vIPOCkYiMmxFpqw 密码：oke5

React（一）使用脚手架创建React项目的更多相关文章

  1. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  2. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  3. 使用vue-cli脚手架创建vue项目

    使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...

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

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

  5. 通过脚手架创建Vue项目

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...

  6. 基于3.X版本的脚手架创建VUE项目

    一.基于交互式命令行的方式,创建vue项目 1.命令:vue create 项目名称.项目名称必须是英文的.不要包含中文.特殊的字符和符号.在cmd中输入命令:vue create vue_proje ...

  7. vue-cli 3.0脚手架创建vue项目

    1. 卸载vue-cli 2.0 npm uninstall -g vue-cli 2. 安装vue-cli 3.0 npm install @vue/cli 3. 创建项目 npm create & ...

  8. 使用vue-cli脚手架创建的项目结构详解

    项目整体目录结构预览 src目录 src整体结构 开发过程中基本上操作都在该目录下进行操作的,项目所有源码都是在这个目录下 main.js文件,项目核心文件 App.vue文件,项目入口文件 rout ...

  9. 用脚手架创建vue项目

    .创建文件地址 首先创建一个文件夹,我用的HBuilder编辑器 , 然后把文件夹拖入编辑器 , 在你创建的文件夹里面打开cmd 2.输入安装命令 : 1). npm install --global ...

随机推荐

  1. Docker：dockerfile构建php项目 [八]

    一.把项目封装成docker镜像的步骤 把项目封装成docker镜像的步骤: 1.先运行一个基础容器,手动制作docker镜像 2.编写dockerfile,构建镜像 3.测试运行 二.dockerf ...

  2. MongoDB实战性能优化

    1. 性能优化分类 mongodb性能优化分为软件层面和操作系统层面. 软件层面,一般通过修改mongodb软件配置参数来达到,这个需要非常熟悉mongodb里面的各种配置参数: 而操作系统层面,相对 ...

  3. react实战项目开发(1) 搭建react开发环境初始化项目（Create-react-app）

    前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...

  4. [Android] Android 锁屏实现与总结 （二）

    上接: [Android] Android 锁屏实现与总结 (一) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 ...

  5. 51nod 1215 数组的宽度

    若一个数在一段区间内作为最大值存在,那么答案应该加上这个数 若一个数在一段区间内作为最小值存在,那么答案应该减去这个数 所以我们利用单调栈,高效求出a[i]在哪个区间内作为最大/最小值存在,从而确定, ...

  6. Django之分页

    需要知道:每页多少条数据.一共多少条数据.一共需要多少页.每页从哪开始到哪结束 注意问题:1.用户输入页码为非数字.  2.用户输入页码超出页码范围 def books(request): try: ...

  7. mac使用apktool打包回apk

    升级最新版的apktool 下载目录:https://ibotpeaches.github.io/Apktool/install/. 权限修改 将上述的文件放在usr/local/bin目录下并执行 ...

  8. 【原创】大数据基础之CM5（Cloudera Manager）+CDH5离线安装

    CM/CDH 5.16.1 CM官方:https://www.cloudera.com/products/product-components/cloudera-manager.html CDH官方: ...

  9. Python内置模块之-hashlib

    一 .概述 摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用16进制的字符串表示). 摘要算法的特点 不论data大小,摘要结果是固定长度 单向函数, ...

  10. MVC4 发布到II7或者IIS7.5遇到NO Find问题

    1.出现的错误页面