创建一个单页面应用

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的更多相关文章

  1. react入门安装

    react的入门安装 1.react的适用方法有两种,其一是依赖在线的cdn地址: https://reactjs.org/docs/cdn-links.html 官方给的cdn地址如下 <sc ...

  2. 【React入门】React父子组件传值demo

    公司一直是前后端分离的,最近集团开始推进中后台可视化开发组件(基于React封装),跟师兄聊起来也听说最近对后台开发人员的前端能力也是越来越重视了.所以作为一名后端,了解下前端的框架对自己也是大有好处 ...

  3. React - 入门：前导、环境、目录、原理

    前导介绍: facebook.2013开源.官网:https://reactjs.org/ 版本v16之后,对其底层的核心算法进行了重构,引入了底层的新引擎React Fiber(16版本以后的rea ...

  4. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  5. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  6. 史上最详细Windows版本搭建安装React Native环境配置 转载，比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  7. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  8. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

  9. react入门之使用webpack搭配环境（一）

    react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app ...

随机推荐

  1. bzoj4810

    http://www.lydsy.com/JudgeOnline/problem.php?id=4810 问题就在于怎么快速查询 我们先用莫队转移,但是没办法快速地查询,那么我们就用bitset这个东 ...

  2. 6. extjs panel layoutconfig属性

    转自:https://blog.csdn.net/xingtianyiyun/article/details/7686811 layoutConfig: Object 这是一个包含指定布局详细属性的对 ...

  3. js moment.js日期操作类 datetime，日期操作,dayjs

    http://momentjs.com/ JS时间处理插件MomentJS https://juejin.im/post/5a2bdc55f265da432b4abf5e Day.js 2kB超轻量时 ...

  4. [App Store Connect帮助]五、管理构建版本（1）上传构建版本概述

    在您添加 App 至您的帐户之后,您可以使用 Xcode 或 Application Loader 来上传构建版本.稍后,您可以随着您 App 的更改上传更多构建版本.分发构建版本以供测试,或提交您的 ...

  5. swoole多进程处理产生的问题

    以前用swoole的时候,没有涉及到数据库连接,碰到问题没有那么多,后来公司业务原生来写swoole多进程,问题出现很多 1.多进程之间会产生进程隔离,global无效,不能共用一个mysql,red ...

  6. [转]C语言常见错误总结1

    指针与数组的对比c程序中,指针和数组在不少地方可以相互替换着用,让人产生一种错觉,以为两者是等价的 数组要么在静态存储区被创建(如全局数组),要么在栈上被创建.数组名对应着(而不是指向)一块内存,其地 ...

  7. 枚举+贪心 HDOJ 4932 Miaomiao's Geometry

    题目传送门 /* 题意:有n个点,用相同的线段去覆盖,当点在线段的端点才行,还有线段之间不相交 枚举+贪心:有坑点是两个点在同时一条线段的两个端点上,枚举两点之间的距离或者距离一半,尽量往左边放,否则 ...

  8. ORA-01654_TableSpace空间不足问题处理

    操作环境:Windows Server 2008 R2,32位Oracle11g R2. 导入大批量数据时报如下错误信息: ORA-: 索引IOT.IDX_IOT_EQUIP_ID无法通过1024(在 ...

  9. 405 Convert a Number to Hexadecimal 数字转换为十六进制数

    给定一个整数,编写一个算法将这个数转换为十六进制数.对于负整数,我们通常使用 补码运算 方法.注意:    十六进制中所有字母(a-f)都必须是小写.    十六进制字符串中不能包含多余的前导零.如果 ...

  10. LN : leetcode 217 Contains Duplicate

    lc 217 Contains Duplicate 217 Contains Duplicate Given an array of integers, find if the array conta ...