React 解析/ 第二节 使用 Reac
官方脚手架 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.jsnpm start命令启动动项目,会启动一个本地服务器,且默认占用 3000 端口; 
React 解析/ 第二节 使用 Reac的更多相关文章
- android内部培训视频_第二节 布局基础
第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...
- seajs第二节,seajs各模块依赖关系
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- VUE2.0实现购物车和地址选配功能学习第二节
第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...
- 第二节 安装CentOS
Linux 第二节一.安装VNware workstation 10二.安装CentOS 1.root/123456 用户登录[root@localhost ~]# 2.关机 init 0 3.ifc ...
- 源码讲解 node+mongodb 建站攻略(一期)第二节
源码讲解 node+mongodb 建站攻略(一期)第二节 上一节,我们完成了模拟数据,这次我们来玩儿真正的数据库,mongodb. 代码http://www.imlwj.com/download/n ...
- 第二节:Web前端-ASP.NET之C#基础
第二节:Web前端-ASP.NET之C#基础 学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...
- 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)
说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...
- Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...
随机推荐
- Visual Studio Team Services使用教程【2】:添加团队成员
2017.4.23之后建议朋友看下面的帖子 TFS2017 & VSTS 实战(繁体中文视频) Visual Studio Team Services(VSTS)与敏捷开发ALM实战关键报告( ...
- python 实现整数的反转:给定一个整数,将该数按位逆置,例如给定12345变成54321,12320变成2321.
给定一个n位(不超过10)的整数,将该数按位逆置,例如给定12345变成54321,12320变成2321. # 第一种方法,使用lstrip函数去反转后,数字前面的0 import math num ...
- 16.python内置函数
Python 内置函数:https://www.runoob.com/python/python-built-in-functions.html 原文:https://www.cnblogs.com/ ...
- scrf 原理及flask-wtf防护
了解什么是scrf? SCRF跨站点请求伪造Cross—Site Request Forgery) 指恶意用户通过个人用户的点击,然而盗用用户的账号信息,并发送邮件.虚拟货币的转账,以及一些重要的事务 ...
- iptables 添加80端口规则
iptables -t filter -A INPUT -p tcp -s 10.0.0.0/24 -j DROP 在filter表的input链做规则丢弃10.0.0.0网段的ip包iptables ...
- Eclipse和Tomcat的版本问题---已解决
Eclipse和Tomcat的版本问题---已解决 这篇文章主要是解决版本匹配的问题 我的电脑上装的是jdk10,如图: Tomcat装的是9: 接着配置好环境变量,直接上图: 然后启功Tomcat, ...
- docker-tmpfs挂载
使用tmpfs挂载 卷和绑定装置允许在主机和容器之间共享文件,以便即使在容器停止后也可以保留数据. 如果你在Linux上运行Docker,你有第三个选择:tmpfs mounts.使用tmpfs装载创 ...
- zTree 节点勾选取消勾选 选中取消选中
zTreeObj.cancelSelectedNode function 举例 取消当前所有被选中节点的选中状态 var treeObj = $.fn.zTree.getZTreeObj(" ...
- C语言关键字const作用及其应用
只要学过C语言的,都有知道const这个关键字,知道是用来定义常量的,如果一个变量被const修饰,那么它的值就不能再被改变,那么还有什么其他作用呢? 一.const常用作用 1.修饰局部变量 con ...
- 使用WebUploader上传HTML文件并读取文件
需求: 前端需要上传HTML文件并识别里面有多少个特殊标签并录入到数据库. 思路: 使用WebUploader上传文件,然后使用FileReader接口和DOMParser识别HTML中的特殊标签 资 ...