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. java 使用for循环打印杨辉三角形

    首先需要说明的问题: 什么是杨辉三角形? 如图所示:杨辉三角形由数字排列,基本的特点是两侧的数值均为1,其它位置的数值是基正上方的数值与其左上方的数值之和. 代码实现: package test; i ...

  2. golang net包使用

    创建简单的响应服务器 package main import ( "net/http" ) func handlerFunc(w http.ResponseWriter, r *h ...

  3. LCA(ST倍增)

    时间复杂度: dfs树,求st表(状态数组f):O(NlgN) 处理M个查询:O(MlgN) 总:O((M+N)lgN) #include<iostream> #include<cs ...

  4. Spark源码剖析 - SparkContext的初始化(一)

    1. SparkContext概述 注意:SparkContext的初始化剖析是基于Spark2.1.0版本的 Spark Driver用于提交用户应用程序,实际可以看作Spark的客户端.了解Spa ...

  5. 第七节: EF的三种事务的应用场景和各自注意的问题(SaveChanges、DBContextTransaction、TransactionScope)

    一. 什么是事务 我们通俗的理解事务就是一系列操作要么全部成功.要么全部失败(不可能存在部分成功,部分失败的情况). 举一个事务在我们日常生活中的经典例子:两张银行卡(甲.乙),甲向乙转钱,整个过程需 ...

  6. MySQL无法插入中文的解决方案

    本人在做数据库的连接过程中,发现无法插入中文值.原因是mysql的默认编码是latin1,只须将编码改为utf8即可. 在mysql的命令行窗口中输入 status 会出现当前的编码.在mysql的安 ...

  7. H5——弹性盒

    [flex 弹性盒布局] * 1.给父容器添加display:flex/inline-flex;属性 * 2.父容器可以使用的属性值有: * ① flex-direction 属性决定主轴的方向(即项 ...

  8. Leetcode#344. Reverse String（反转字符串）

    题目描述 编写一个函数,其作用是将输入的字符串反转过来. 示例 1: 输入: "hello" 输出: "olleh" 示例 2: 输入: "A man ...

  9. iTOP-4412开发板_驱动_adc驱动升级和测试例程

    本文档介绍 iTOP-4412 开发板的 adc 驱动的升级和测试例程.自带的驱动只能支持一路 adc,本文介绍如何修改可以支持 4 路 adc 的控制.1 硬件简介如下图所示,这是 4412 的 d ...

  10. HTTP报错401和403详解及解决办法

    一.401: 1. HTTP 401 错误 - 未授权: (Unauthorized) 您的Web服务器认为,客户端发送的 HTTP 数据流是正确的,但进入网址 (URL) 资源 , 需要用户身份验证 ...