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. 【 ACM-ICPC 2018 沈阳赛区网络预赛 D】Made In Heaven

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 点可以重复走的k短路. [代码] #include <bits/stdc++.h> #define LL long lo ...

  2. 关于ajax异步请求不到数据的问题 302跨域请求

    项目大致问题是这样的 在线咨询模块的数据是通过ajax异步加载来请求到数据,然后动态解析并且显示 前台页面的请求代码 后台action: 另外就是这个项目还有一个登陆权限的认证,如果不登录后台或者登录 ...

  3. ZOJ 2314 Reactor Cooling

    Reactor Cooling Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...

  4. ASP.NET--Razor-model-compare属性用法

    学习使用model中的compare属性来判断两个密码之间是否相同 [Required] [StringLength(100, ErrorMessage = "The {0} must be ...

  5. [GraphQL] Apollo React Query Component

    In this lesson I refactor a React component that utilizes the graphql higher-order component to the ...

  6. 安装ftp碰到的问题及解决方法

    1   CRT显示乱码:     本地windows机器.改动SecureCRT的设置.找到"选项"->"会话选项"->"外观" ...

  7. webview同步cookies

    目前很多android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优 ...

  8. 英语发音规则---R字母

    英语发音规则---R字母 一.总结 一句话总结: 1.在词首和词中时,字母r常读作摩擦辅音/r/? red /red/ n. 红色 ruler /'ruːlə/ n. 尺:统治者 rub /rʌb/ ...

  9. caffe：使用C++来提取任意一张图片的特征

    0x00 关于使用C++接口来提取特征,caffe官方提供了一个extract_features.cpp的例程,但是这个文件的输入是blob数据,即使输入层使用的是ImageData,也需要在depl ...

  10. 什么是BOM头（字节顺序标记(ByteOrderMark)）

    在utf-8编码文件中BOM在文件头部,占用三个字节,用来标示该文件属于utf-8编码,现在已经有很多软件识别bom头,但是还有些不能识别bom头,比如PHP就不能识别bom头,这也是用记事本编辑ut ...