渲染这俩字可能在很多地方都见过。但可能不太理解是啥意思。

那么首先我们来理解一下渲染。渲染我觉得这样理解比较通俗。我们做一个汽车，开始是没有喷漆的（没有css）只是些框框架架（HTML标签）。那么网页加载就是首先加载完HTML元素，其次是css，css去遍历渲染每个对应元素的样式让其看起来就是我们所想看到的效果一样。不同浏览器的渲染方式不一样，渲染机制也不一样。简单来将一个完整的HTML页面渲染完成是有2个东西的。一个HTML元素加载完成，一个是CSS样式加载完成。其次才是JS，如果JS写在页面顶部在css元素加载之前那就会在其执行完后在执行后面的渲染，会让页面的加载断断续续。所以现在很多JS都是建议放在页面之前而不是在header里。更不能放在样式加载之前。

为什么要说渲染呢，我认为ReactJS就是渲染器。

下面我们来说一下如何入门。首先要做的是下载文件。你可以去官网下载最新版本

http://facebook.github.io/react/

首先我们要导入三个库（实际路径以自己文件为准）

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

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

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

react.min.js 是 React 的核心库。

react-dom.js提供与 DOM 相关的功能。

browser.js 的作用是将 JSX 语法转为 JavaScript 语法。

React JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

使用JSX

<div id="example"></div>
ReactDOM.render(

    <h1>Hello, world!</h1>,

    document.getElementById('example')

);

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

上面代码将一个 h1 标题，插入id为example中.

运行结果：

独立文件

我们也可以将React JSX 代码写在一个独立文件里，例如我们创建一个 helloworld_react.js 文件，代码如下：

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('example')

);

然后可以在HTML中引入

<body>

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

<script type="text/babel" src="helloworld_react.js"></script>

</body>

JSX 语法

JSX的语法，它允许 HTML 与 JavaScript 的混写。

遇到 HTML 标签（以 < 开头的），就用 HTML 规则解析；遇到代码块（以 { 开头的），就用 JavaScript 规则解析。

    var names = ['lisi', 'wanger', 'zhangsan'];

    ReactDOM.render(

      <div>

      {

        names.map(function (name) {

          return <div>Hello, {name}!</div>

        })

      }

      </div>,

      document.getElementById('example')

    );

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。上面程序运行结果如下

组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

    var HelloMessage = React.createClass({

      render: function() {

        return <h1>Hello {this.props.name}</h1>;

      }

    });

    ReactDOM.render(

      <HelloMessage name="John" />,

      document.getElementById('example')

    );

以上代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法，用于输出组件。

注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。因为原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头另外，组件类只能包含一个顶层标签，否则也会报错。

组件的用法与原生的 HTML 标签完全一致，如果我们需要向组件传递参数，可以使用 this.props 对象。以上实例中 name 属性通过 this.props.name 来获取。

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件：

var WebSite = React.createClass({

  render: function() {

    return (

      <div>

        <Name name={this.props.name} />

        <Link site={this.props.site} />

      </div>

    );

  }

});

var Name = React.createClass({

  render: function() {

    return (

      <h1>{this.props.name}</h1>

    );

  }

});

var Link = React.createClass({

  render: function() {

    return (

      <a href={this.props.site}>

        {this.props.site}

      </a>

    );

  }

});

ReactDOM.render(

  <WebSite name="博客园" site=" http://www.cnblogs.com" />,

  document.getElementById('example')

);

实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息，可以理解为 WebSite 拥有 Name 和 Link 的实例。

以上就是RejectJS入门基础，看懂就可以继续深锐学习了。

其实学习ReactJS的要求并不高。有HTML5，CSS和JavaScript的基础就可以了

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

Reactjs 入门基础(三)
State 和 Props以下实例演示了如何在应用中组合使用 state 和 props .我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上.在 render ...
Reactjs 入门基础(二)
如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下: <body> <div id="example"></div> & ...
Reactjs 入门基础(一)
实例中我们引入了三个库: react.min.js .react-dom.min.js 和 browser.min.js: 1,react.min.js -React 的核心库 2,react-do ...
ReactJS入门指南
ReactJS入门指南本文旨在介绍ReactJS的基本知识,并一步步详细介绍React的基本概念和使用方法等,以及相应的Demo.本文在很大程度上参考了React官方文档和官方指南.如果你英语还不错 ...
mybatis入门基础(二)----原始dao的开发和mapper代理开发
承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...
01shell入门基础
01shell入门基础为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...
Markdown入门基础
// Markdown入门基础最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...
ReactJS入门学习二
ReactJS入门学习二阅读目录 React的背景和基本原理理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法如何在JSX中如何使用事件如何在JSX中如何使用 ...
ReactJS入门学习一
ReactJS入门学习一阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的理解从服务器端获取数据及理解state的回到顶部 React是什么 ...

随机推荐

使用CSharp编写Google Protobuf插件
什么是 Google Protocol Buffer? Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 ...
JS自定义对象，正则表达式，JQuery中的一些知识点
一:自定义对象 1.基本概念:①对象:包含一系列无序属性和方法的集合.②键值对:对象中的数据是以键值对的形式存在的,以键取值.③属性:描述对象特征的一系列变量.[对象中的变量]④方法:描述对象行为的一 ...
是什么让spring 5放弃了使用Guava Cache？
一路走来,Spring社区从刚开始的核心模块一直发展到现在,最近Sping5也完成了M5的发布, 相信不久之后第一个RELEASE版本也会发布.里面有很多特性是和即将要发布的JAVA 9息息相关的.今 ...
Vue+axios 实现http拦截及路由拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
SpringMVC中的session用法及细节记录
前言初学SpringMVC,最近在给公司做的系统做登录方面,需要用到session. 在网上找了不少资料,大致提了2点session保存方式: 1.javaWeb工程通用的HttpSession 2 ...
【算法系列学习】[kuangbin带你飞]专题十二基础DP1 F - Piggy-Bank 【完全背包问题】
https://vjudge.net/contest/68966#problem/F http://blog.csdn.net/libin56842/article/details/9048173 # ...
poj1990树状数组
Every year, Farmer John's N (1 <= N <= 20,000) cows attend "MooFest",a social gather ...
最大流算法之EK（最短路径增广算法）
这是网络流最基础的部分--求出源点到汇点的最大流(Max-Flow). 最大流的算法有比较多,本次介绍的是其中复杂度较高,但是比较好写的EK算法.(不涉及分层,纯粹靠BFS找汇点及回溯找最小流量得到最 ...
Redis学习-发布/订阅
Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息.Redis 客户端可以订阅任意数量的频道. 常用命令命令描述复杂度返回 PSUBS ...

ReactJS入门基础