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 ...
随机推荐
- centOS封装
前言 在实际工作中,CentOS的安装需要设置的语言.键盘模式.时区等信息都存在很大程度上的雷同型.并且,安装完成后的一些设置工作也都是一样的.这些工作都可以在安装操作系统的时候自动完成.最终做到,安 ...
- vue-cli 升级至 webpack 4 指北
时至今日(2018-7-11),vue-cli 任然未稳定支持至webpack4,所以我自己也来创建一个 vue 初始化模板 不过大致的原因我也能猜到,因为很多插件仍然是一个不稳定的点,比如我在创建中 ...
- Matlab vs Python 作图
-- Matlab 作图示例 x=-3:0.00003:3; y1=sin(x)./x; y2=x./sin(x); plot(x,y1,x,y2); -- Python 作图示例 import nu ...
- C/C++自实现的函数(memset, memcpy, atoi)
函数原型: void * memset ( void * buffer, int c, size_t num ); 关于void * 因为任何类型的指针都可以传入memset函数,这也真是体现了内存操 ...
- 如何在Eclipse或者Myeclipse中使用tomcat（配置tomcat，发布web项目）？（图文详解）（很实用）
前期博客 Eclipse里的Java EE视图在哪里?MyEclipse里的Java EE视图在哪里?MyEclipse里的MyEclipse Java Enterprise视图在哪里?(图文详解) ...
- pyDes 实现 Python 版的 DES 对称加密/解密--转
https://my.oschina.net/leejun2005/blog/586451 手头有个 Java 版的 DES 加密/解密程序,最近想着将其 Python 重构下,方便后续脚本解析,捣鼓 ...
- 为什么字符串类型可以调用构造函数String的方法，却又不是它的实例
从所周知,在js中定义一个字符串我们有两种办法: var a = new String("a"); var a = "a"; 第一种方法使用构造函数创建,作为S ...
- JavaScript开发心得--如何传递某行数据给下一页
1, 应用场景 在某个html页面显示一批数据,如20个用户的名称.年龄等,每行都要一个编辑按钮,点击编辑后,将此行数据带入某个专门的编辑页进行显示,修改后保存. 问题是 点击编辑按钮后,如何得知要编 ...
- spring中配置数据源
spring中配置数据源的几种常见方式: #mysql 数据库配置(jdbc.properties) jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.u ...
- Redis系列(十一)--阿里云开发规范
本文主要介绍阿里云Redis的开发规范,主要从以下几个方面说明: 1.键值设计 2.命令使用 3.客户端使用 4.相关工具 一.键值设计 1.key name设计 1).[建议]:可读性和可管理性 以 ...