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 ...
随机推荐
- python 使用.bat文件自动执行
@echo off title demo cmd "/c activate py36 && cd demo&& python demo_test.py&quo ...
- 深入浅出Android makefile(2)--LOCAL_PATH（转载）
转自:http://nfer-zhuang.iteye.com/blog/1752387 一.说明 上文我们对acp的Android.mk文件做了一个大致的描述,使得大家对Android.mk文件有了 ...
- bzoj 1649: [Usaco2006 Dec]Cow Roller Coaster【dp】
DAG上的dp 因为本身升序就是拓扑序,所以建出图来直接从1到ndp即可,设f[i][j]为到i花费了j #include<iostream> #include<cstdio> ...
- bzoj1880: [Sdoi2009]Elaxia的路线(spfa,拓扑排序最长路)
1880: [Sdoi2009]Elaxia的路线 Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 1944 Solved: 759[Submit][St ...
- 清北考前刷题day2早安
/* 做法一:按h sort一遍,对于一段区间[i,j],高度花费就是h[j]-h[i] 然后枚举区间,把区间内C排序,一个一个尽量选即可. n^3logn 标算:n^3 dp 高度排序,保证从前往后 ...
- java程序死锁，3种方式快速找到死锁代码
java程序中出现死锁问题,如果不了解排查方法,是束手无策的,今天咱们用三种方法找到死锁问题. 运行下面代码 package com.jvm.visualvm; /** * <a href=&q ...
- CSS左侧固定右侧自适应
方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...
- ACM_输出格式
输出格式 Time Limit: 2000/1000ms (Java/Others) Problem Description: 某水比参加了XX杯,但是他太水,所以三等都木有,所以他决定出一道水题水一 ...
- C# 事件与委托（转载）
委托的定义 delegate 是 C# 中的一种类型,它实际上是一个能够持有对某个方法的引用的类.与其它的类不同,delegate 类能够拥有一个方法的签名(signature),并且它"只 ...
- java 分解整数 【个 十 百】（数组案例）
求一个数两位数的个位数,十位数,百位数及千位: int num = 53; int g = (num / 1) % 10; //个位 int s = (num / 10) % 10; //十位 in ...