1-react概念：

React是一个用于构建用户界面的JavaScript库。React主要用于构建UI，很多人认为React是MVC中的V（视图）。React起源于Facebook的内部项目。React 拥有较高的性能，代码逻辑非常简单。

2-react特点：

  • 声明式设计−React采用声明范式，可以轻松描述应用。
  • 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
  • 灵活 −React可以与已知的库或框架很好地配合。
  • JSX − JSX是 JavaScript语法的扩展。React开发不一定使用JSX，但建议使用。
  • 组件 − 通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
  • 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
<!DOCTYPE html>

   <html>

     <head>

       <script src="../build/react.js"></script>

       <script src="../build/react-dom.js"></script>

       <script src="../build/browser.min.js"></script>

     </head>

     <body>

       <div id="example"></div>

       <script type="text/babel">

       </script>

     </body>

   </html>

模板中代码一共用了三个库： react.js 、react-dom.js 和 Browser.js
需要注意的是，它们必须首先加载。
1）react.js是React的核心库。
2）react-dom.js是提供与DOM相关的功能。
3）Browser.js的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线时，应将它放到服务器完成。
$ babel src --out-dir build
这个命令可以将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。

3-通过npm使用React

执行以下命令创建项目(支持node.js和npm)：

$ npm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start

React入门基础的更多相关文章

  1. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

  2. Flux --> Redux --> Redux React 入门 基础实例使用

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  3. React入门基础（学习笔记）

    这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html . 一.所需文件 在编 ...

  4. react入门----基础语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. React入门----基础篇

    React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做 ...

  6. React Native基础&入门教程：初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  7. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  8. react native基础与入门

    react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ w ...

  9. React入门介绍（1）-ReactDOM.render()等基础

    React入门介绍-ReactDOM.render()等基础 首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视 ...

随机推荐

  1. django-6-数据库配置及模型创建，激活(django模型系统1)

    <<<数据库的连接配置>>> django配置mysql的流程: 1.创建数据库用户 (1)进入MySQL数据库    (2)创建有数据库权限的用户 (3)退出My ...

  2. Asp.Net IHttpHandler介绍

    ASP.NET响应Http请求时常用的两个处理接口是IHttpHandler和IHttpModule. 一般的,IHttpHandler用来处理一类特定的请求,比如对每个*.asp, *.aspx文件 ...

  3. 洛谷—— P1238 走迷宫

    https://www.luogu.org/problem/show?pid=1238 题目描述 有一个m*n格的迷宫(表示有m行.n列),其中有可走的也有不可走的,如果用1表示可以走,0表示不可以走 ...

  4. [ASP.NET]asp.net动态加载用户控件

    用户控件 // 用户控件源码 namespace wzjr.control { public partial class Topic : System.Web.UI.UserControl { pub ...

  5. HDU 3306

    先转一些   http://www.cnblogs.com/frog112111/archive/2013/05/19/3087648.html Fibonacci数列:F(0)=1 , F(1)=1 ...

  6. [HTML 5] Atomic Relevant Busy

    Together 'aria-live', we can use 'aria-atomic', 'aria-relevant' and 'aria-busy' to give more informa ...

  7. [HTML5] aria-label & aria-labelledby

    'aria-labelledby' overwrite 'aria-label' overwirte native element label. TOP-LEFT: aria-label overwr ...

  8. mysql基础综述（四）

    1.数据库的简单介绍 1.1 数据库,就是一个文件系统,使用标准sql对数据库进行操作 1.2 常见的数据库 oracle  是oracle公司的数据库,是一个收费的大型的数据库 DB2,是IBM公司 ...

  9. IPK僵尸网络 看看其传播手法

    转自:http://www.freebuf.com/vuls/154975.html 一.IPK僵尸网络概述 IPK僵尸家族是自2012年底就开始出现并长期持续活跃在境外的DDoS僵尸网络.2016年 ...

  10. CentOS7开启网络配置

    虚拟机在安装时可以开启网络 如果没有开启的话 可以通过以下操作 ip  addr 查看是否开启网络 没有开启的话 cd /etc/sysconfig/network-scripts/ 然后 执行 ls ...