React从入门到精通系列之(1)安装React
一、安装React
React是灵活的,可以在各种类型的项目中使用。 你可以使用它创建一个全新的应用程序,也可以逐步将其引入现有的项目中,而不需要重写整个项目。
创建一个单页面应用
Create React App
是开始构建新的React单页应用程序的最佳方式。 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的开发体验,并可以有效优化您的应用程序,提升开发效率。
$ npm install -g create-react-app
$ create-react-app hello-world
$ cd hello-world
$ npm run start
上面只是创建了一个React应用,不需要关心也需要不处理后端逻辑或数据库;
它只是一个React的前端环境集成工具,负责创建前端的开发环境,所以你可以使用它与你想要的任何后端进行交互。 它内部使用了webpack,Babel和ESLint,你可以单独配置它们,来达到定制化的效果。
在已经开发的项目中使用React
您不需要重新编写应用程序即可开始使用React。
我们建议将React添加到应用程序的一小部分,例如单个小部件,以便您可以看到它是否适合您的用例。
虽然React可以在没有构建工具的情况下使用,但我们建议使用并设置它,以便提高生产力。 现代构建工具通常包括:
一个包管理器,例如
npm
一个打包工具,例如
webpack
一个编译工具,例如
Babel
安装React
我们建议使用Yarn或npm来管理React前端模块的依赖。
通过Yarn安装:
yarn add react react-dom
通过npm安卓:
npm install --save react react-dom
使用ES6和JSX
我们建议您使用Babel中的React配置让您在JavaScript代码中可以使用ES6和JSX。 ES6是一组现代JavaScript特性,使开发更容易,JSX是对React非常有效的JavaScript语言的扩展。
具体请百度Babel如何在许多不同的构建环境中配置Babel。首先 确保你安装了babel-preset-react
和babel-preset-es2015
,并已经在.babelrc
配置中启用它们。
使用ES6和JSX写一个HelloWorld的例子
我们建议使用像webpack
或Browserify
这样的打包工具,以便您可以编写模块化代码,它们可以将不同的代码模块打包捆绑到一起,用来优化的代码加载时间。
一个简单的React示例如下所示:
这里我使用的是bower来安装react和react-dom。
mkdir hello-world & cd hello-world
bower install react babel --save
touch index.html
然后在index.html中写入以下内容:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="bower_components/react/react.js"></script><script src="bower_components/react/react-dom.js"></script><script src="bower_components/babel/browser.js"></script><script type="text/babel">var doc = document;ReactDOM.render(<h1>你好,react</h1>,doc.getElementById('app'))</script><title>ReactDOM.render</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
最后在浏览器中打开这个页面,就可以看到最终效果。
React从入门到精通系列之(1)安装React相关推荐
- React从入门到精通系列之(12)深入理解JSX
十二.深入理解JSX 从根本上讲,JSX就是提供了一个React.createElement(component, props, ...children)函数的语法糖.就像下面的JSX代码: < ...
- React从入门到精通系列之(14)refs和DOM元素
十四.refs和DOM元素 在典型的React数据流中,props是父组件与其子组件交互的唯一方式. 要修改子组件,需要使用一个新的props进行重新渲染. 但是,在某些情况下,您需要在典型数据流之外 ...
- React从入门到精通教程01
React从入门到精通教程 React从入门到精通教程 React简介 官方文档 React使用来干什么的 为什么需要React React特点 React基础 React的使用 Hello Worl ...
- 【ArcGIS遇上Python】从入门到精通系列之第一章:ArcGIS Python简介
文章目录 1. Python简介 2. Python的特点 3. ArcGIS的脚本语言 4. ArcGIS中的Python脚本编辑器 1. Python简介 Python是一种跨平台的计算机程序设计 ...
- Linux从入门到精通系列之PPTP
Linux从入门到精通系列之PPTP 今天我们来说下怎么在linux环境下如何搭建PPTP-×××,PPTP(Point to Point Tunneling Protocol),即点对点隧道协议.该 ...
- Jenkins pipeline 入门到精通系列文章
Jenkins2 入门到精通系列文章. Jenkins2 下载与启动 jenkins2 插件安装 jenkins2 hellopipeline jenkins2 pipeline介绍 jenkins2 ...
- html5从基础到入门,Html5从入门到精通系列2:Html5基础
Html5从入门到精通系列2:Html5基础 (2015-04-04 11:36:53) 标签: html5 html5教程 html5视频教程 html5从入门到精通 2-1.1.HTML5简介.M ...
- ArcGIS10从入门到精通系列实验图文教程(附配套实验数据持续更新)
文章目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 本教程<ArcGIS从入门到精通系列实验教程>内容包括:ArcGIS平台简介.ArcGIS应用基础.空间数据的采集 ...
- OpenShift从入门到精通系列之一:通过OpenShift实现数字化转型
OpenShift从入门到精通系列之一:通过OpenShift实现数字化转型 一.企业数字化转型之PaaS 二.企业数字化转型之DevOps 三.企业数字化转型之微服务 四.微服务架构的主要类型 五. ...
最新文章
- java知识理论_JAVA理论知识 - OSC_rnoszD的个人空间 - OSCHINA - 中文开源技术交流社区...
- Http Tunnel 小记
- python文本清洗_【python】TXT文本数据清洗和英文分词、词性标注
- Python测试开发django3.视图和URL配置
- 用户'sa'登录失败(错误18456)解决方案图解
- php table转json,html table表数据转Json格式示例代码分析
- JAVA蓝桥杯:杨辉三角形
- 1 CentOS 6下FastDFS实现分布式文件系统
- UVA347 LA5455 Run【迭代+打表】
- findwindow\sendmessage向第三方软件发送消息演示
- 安卓帧数监测软件_手机帧数测试软件-手机fps帧数显示软件1.6 免root版-东坡下载...
- 数据挖掘与可视化相关论文
- oppok3如何刷机_OPPO K3(6GB/64GB/全网通)手机密码忘记怎么刷机?
- php tcpdf中文手册,TCPDF:用于生成PDF文档的开源PHP类
- java 货币格式 转换_java格式化数值成货币格式示例
- 重复抽样与不重复抽样的抽样平均误差大小?
- 基于rrweb框架对web 页面录制与回放
- 查询python答案的app_2020知到APP大数据分析的python基础最新免费答案查询
- 无人机与视觉结合项目
- 【转】看完这篇,请不要再说不懂MOSFET
热门文章
- 【转载】混合高斯模型(Mixtures of Gaussians)和EM算法
- [BTCC] 要“工程师”“工程师”“工程师”
- Linux命令--pwd
- 纯css实现毛玻璃效果
- Spring MVC 解决日期类型动态绑定问题
- Visual Studio 快捷键 转载
- SQL函数---SQL HAVING 子句
- Exchange server 2010系列教程之一 安装Exchange 2010准备条件
- Excel对重复数据分组,求出不同的数据(office 2013)
- JavaWeb项目异常管理之log4j的使用教程