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 ...
随机推荐
- 6章 Models
传统的MVC结构中,有模型这么一个概念.Django中,Models又是怎么一回事呢? 刚才生成的这些乱七八糟的数据迁移就是Django自带的一些应用 INSTALLED_APPS = [ 'djan ...
- 全分布式的Hadoop虚拟机安装
在集群环境下装机.配置.运行的全过程,梳理总结到本文中. 第一部分:环境规划 •用户 hadoop 密码 hadoop •机器 机器名称 IP地址 Master.Hadoop 192.168.1.10 ...
- Unity资源的查找
Object.Destroy static function Destroy(obj: Object, t: float = 0.0F): void; Description Removes a ...
- bzoj 1635: [Usaco2007 Jan]Tallest Cow 最高的牛【差分】
s[i]为差分后的"i这头牛前有几头比它高",计算答案的时候加成前缀和,假设第一头最高减一下即可 用map记录一下被加过的区间,避免重复 #include<iostream& ...
- PostgreSQL逻辑复制之pglogical篇
PostgreSQL逻辑复制之slony篇 一.pglogical介绍 pglogical 是 PostgreSQL 的拓展模块, 为 PostgreSQL 数据库提供了逻辑流复制发布和订阅的功能. ...
- taro.js & dva 脚手架搭建及常见问题
## taro.js & dva 脚手架 ### 启动 npm install -g @tarojs/cli // 全局安装taro-cli npm i npm run dev:weapp / ...
- 获取Sprite上某一个点的透明度
转载[ http://www.cnblogs.com/Androider123/p/3795050.html] 本篇文章主要讲一下怎么做一个不规则的按钮,比如如下图的八卦,点击绿色和点击红色部分,需要 ...
- 循环语言（for）
循环语句: 给出初始条件,先判断是否满足循环条件,如果不满足条件则跳过for语句,如果满足则进入for语句循环,for语句内的代码执行完毕之后,将按照状态改变改变变量,然后判断是否符合循环条件,符合继 ...
- duilib入门问题集
问:如何把资源放入zip?答: 先SetResourcePath设置资源目录,再SetResourceZip设置压缩资源文件名 问:如何设置窗体的初始化大小?答:设置XML文件的Window标签的si ...
- Framework7首页隐藏navbar
f7首页隐藏navbar其他页面显示navbar 帮别人解决问题,自己也记录一下, 首页.navbar加.navbar-hidden, 首页.page加.no-navbar, 如果首页有.navbar ...