官方脚手架 create-react-app

React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpack + ES6,无需开发者自行配置,只需通过一些命令就能快速构建 React 开发环境、运行项目,并带有热更新,且支持打包生成开发环境可用的构建版本。

说明:CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解,如果你是新手,我们强烈建议先在不用构建工具的情况下学习 React,在熟悉 React 本身之后再使用 CLI。 此处仅作简单的了解,对后续 React 知识点的学习没有影响!

执行以下命令创建项目:

npm i create-react-app -g        // 全局安装 create-react-app 脚手架
create-react-app project-name // 通过 create-react-app 创建名为 project-name 的项目(项目名称不能使用大写英文)

项目的目录结构:

  • node_modules:项目依赖;
  • package.json:项目的描述文件,记录项目依赖的版本信息等;
  • public: manifest.json 指定了开始页面为 index.html,是代码执行的源头;
  • scr:项目的源代码;
  • .gitignore:用于 git,记录 git 所需忽略的文件;
    my-app
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── .gitignore
    ├── public
    │ ├── favicon.ico
    │ ├── index.html
    │ └── manifest.json
    └── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

    npm start 命令启动动项目,会启动一个本地服务器,且默认占用 3000 端口;

React 解析/ 第二节 使用 Reac的更多相关文章

  1. android内部培训视频_第二节 布局基础

    第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...

  2. seajs第二节,seajs各模块依赖关系

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  4. VUE2.0实现购物车和地址选配功能学习第二节

    第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...

  5. 第二节 安装CentOS

    Linux 第二节一.安装VNware workstation 10二.安装CentOS 1.root/123456 用户登录[root@localhost ~]# 2.关机 init 0 3.ifc ...

  6. 源码讲解 node+mongodb 建站攻略(一期)第二节

    源码讲解 node+mongodb 建站攻略(一期)第二节 上一节,我们完成了模拟数据,这次我们来玩儿真正的数据库,mongodb. 代码http://www.imlwj.com/download/n ...

  7. 第二节:Web前端-ASP.NET之C#基础

    第二节:Web前端-ASP.NET之C#基础 学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...

  8. 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

    说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...

  9. Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...

随机推荐

  1. Python1_Python的目录结构、执行顺序、__name__ == __main__

    Python执行顺序 python属于脚本语言,不像编译型的语言那样先将程序编译成二进制后再运行,而是动态地逐行解释运行: 也就是从脚本的第一行开始运行,没有统一的入口. python会从文件的第一行 ...

  2. 用VISA工具驱动继电器外设

    1.驱动方式:TCP 2.开发过程 第一步:外设识别 TCP方式将继电器插上网线后,并不能像串口一样自动识别到这个外设,需要手动连接.打开NI MAX后,右击设备与接口,然后点击新建,双击VISA T ...

  3. 开发板免费领!腾讯云IoT应用创新大赛正式启动!

    大赛简介 腾讯云IoT应用创新大赛是腾讯云面向物联网领域举办的大型竞赛,通过腾讯云IoT全链路产品能力,开放平台和服务,与广大开发者共同创新,孵化优秀的IoT产品和解决方案,共同构建IoT应用生态. ...

  4. ELK学习实验007:Nginx的日志分析系统之Metribeat配置

    一 Metricbeat 简介 1.1 系统级监控,更简洁将 Metricbeat 部署到您的所有 Linux.Windows 和 Mac 主机,并将它连接到 Elasticsearch 就大功告成了 ...

  5. 机器学习回顾篇(12):集成学习之Bagging与随机森林

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  6. 面试官刁难:Java字符串可以引用传递吗?

    老读者都知道了,六年前,我从苏州回到洛阳,抱着一幅"海归"的心态,投了不少简历,也"约谈"了不少面试官,但仅有两三个令我感到满意.其中有一位叫老马,至今还活在我 ...

  7. shell 概览

    shell能做什么: 1. 自动化批量系统初始化程序(update,软件安装,时区设置,安全策略...) 2. 自动化批量软件部署程序(LAMP,LNMP,Tomcat,LVS,Nginx) 3. 管 ...

  8. 11.在Chrome谷歌浏览器中安装插件XPath Helper的方法

    1.首先在以下链接下载XPath Helper插件,链接:https://pan.baidu.com/s/1Ng7HAGgsVfOyqy6dn094Jg 提取码:a1dv 2.插件下载完成后解压,然后 ...

  9. 剑指Offer-60~68题

    60. \(n\) 个骰子的点数 题目描述: 扔 \(n\) 个骰子,向上面的数字之和为 \(S\).给定 \(n\),请列出所有可能的 \(S\) 值及其相应的概率. 示例: 输入:n = 1 输出 ...

  10. pdf文件内容查看器 -- 采用wpf开发

    前言 pdf是一种应用非常广的版式文档格式,已成为事实上的国际标准.关于pdf格式的文章汗牛充栋,本文也是关于pdf格式的文章,但是本文不是纸上谈兵:本人这几周一直研究pdf格式内容,不但对pfd格式 ...