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. 原生js，时间日期简单应用。

    一.数码时钟,滚动切换时间. <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. Libevent学习笔记

    学习: /Users/baidu/Documents/Data/Interview/服务器-检索端/libevent参考手册(中文版).pdf 讲的不好.翻译的..

  3. HDU 4767

    昨晚苦恼了一晚,因为即将大三了,必须要准备实习什么的事了.一般都会去公司实习吧,但是看看自己的简历,实在拿不出手,因为大一大二都在搞ACM(虽然真正搞的只有大二一年),但却没有什么成绩,又不愿意做项目 ...

  4. 游戏开发人员眼中的Unity 3D网页游戏測评报告

    眼下.能够实现3D页游的主流技术有Silverlight.XNA.Flash.HTML5和Unity3D. 当中.Unity3D作为一款专注于3D游戏的浏览器插件.最近在国内外页游产品线骚动异常:本人 ...

  5. Android測试APP工具（一）

    近期面试APP开发者的时候,遇到了技术总监问 APP測试的概念性问题.后面感觉主要的项目流程.项目逻辑.屏幕适配. 測试是全然没有问题的.可是对于APP的性能測试.压力測试等高端的測试.还是存在着美中 ...

  6. android AChartEnginee解说之源代码框架解读

    从上周把android ACHartEnginee的源代码check out出来后就一直在看这个东西是怎样使用的,以及底层是怎样实现的,把近期一周对这个东西的了解先发上来,即是给自己做一个总结,也希望 ...

  7. 局域网网络性能測试方法HDtune 64K有缓存測速法，让你得知你的网络性能

    该方法能够有效測试出您的网络传输性能究竟有多高,该方法通用于有盘,无盘(系统虚拟盘) ,游戏虚拟盘,以及其它带有缓存功能的虚拟盘软件,可是由于每款软件的工作方式和原理都不仅同样,所以每款软件的測试结果 ...

  8. RecyclerView实现底部载入很多其它功能

    这两天在公司没有什么任务分配,就研究了下咱们Google在Android5.0 推出的一个用来取代ListView的列表控件----RecyclerView. 发现功能上确实比ListView强大了不 ...

  9. caioj1496: [视频]基于连通性状态压缩的 动态规划问题：Manhattan Wiring

    %%%%orz苏大佬 虽然苏大佬的baff吸不得,苏大佬的梦信不得,但是膜苏大佬是少不得的囧 这题还是比较有收获的 哼居然有我不会做的插头DP 自己yy了下,2表示属于2的插头,3表示3的插头 假如当 ...

  10. php面向对象之get和set方法

    php面向对象之get和set方法 简介 1.自己写get或者set 2.用系统的魔术方法__get和__set 代码 <?php class Person{ private $userName ...