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入门--------安装react的更多相关文章
- react入门安装
react的入门安装 1.react的适用方法有两种,其一是依赖在线的cdn地址: https://reactjs.org/docs/cdn-links.html 官方给的cdn地址如下 <sc ...
- 【React入门】React父子组件传值demo
公司一直是前后端分离的,最近集团开始推进中后台可视化开发组件(基于React封装),跟师兄聊起来也听说最近对后台开发人员的前端能力也是越来越重视了.所以作为一名后端,了解下前端的框架对自己也是大有好处 ...
- React - 入门：前导、环境、目录、原理
前导介绍: facebook.2013开源.官网:https://reactjs.org/ 版本v16之后,对其底层的核心算法进行了重构,引入了底层的新引擎React Fiber(16版本以后的rea ...
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南（包括ES5和ES6对比）
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载，比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- react 入门教程 阮一峰老师真的是榜样
- 转自阮一峰老师博客 React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...
- react入门之使用webpack搭配环境（一）
react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app ...
随机推荐
- POJ3709 K-Anonymous Sequence 斜率优化DP
POJ3709 题意很简单 给n个递增整数(n<=500000)和一种操作(选择任意个数 使他们减少整数值) 使得对于所有的整数 在数列中 有k个相等的数 O(n^2)的DP方程很容易得出 如下 ...
- [Swift]Array数组的swapAt函数
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- C#+ItextSharp 查看pdf文件页面尺寸
1# Nuget下载itextSharp,下载到本地 pm>Install-Package iTextSharp -Version 5.5.10 2# 引用dll,添加命名空间 using iT ...
- MySQL故障处理一例_Another MySQL daemon already running with the same unix socket
MySQL故障处理一例:"Another MySQL daemon already running with the same unix socket". [root@test- ...
- 块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）
<html> <head> <meta charset="utf-8"> <title>块级标签</title> < ...
- 所有版本chrome、chromedriver、firefox下载链接
1. 所有版本chrome下载 是不是很难找到老版本的chrome?博主收集了几个下载chrome老版本的网站,其中哪个下载的是原版的就不得而知了. http://www.slimjet.com/ch ...
- cloudera-server启动File not found ： /usr/sbin/cmf-server解决办法（图文详解）
解决方法 见 cloudera-agent启动File not found : /usr/sbin/cmf-agent解决办法(图文详解) 欢迎大家,加入我的微信公众号:大数据躺过的坑 ...
- [译]libcurl错误码
CURLcode Almost all "easy" interface functions return a CURLcode error code. No matter wha ...
- Spring Boot (31) 数据验证
曾经参数的验证是这样的: public String test(User user){ if(user == null){ throw new NullPointerException("u ...
- android视频播放器系列（二）——VideoView
最近在学习视频相关的知识,现在也是在按部就班的一步步的来,如果有同样需求的同学可以跟着大家一起促进学习. 上一节说到了可以使用系统播放器以及浏览器播放本地以及网络视频,但是这在很大程度上并不能满足我们 ...