ReactJS入门基础

时间 2019-12-13

标签 reactjs 入门基础繁體版

原文原文链接

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

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

为何要说渲染呢，我认为ReactJS就是渲染器。git

下面咱们来讲一下如何入门。首先要作的是下载文件。你能够去官网下载最新版本github

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 相关的功能。babel

browser.js 的做用是将 JSX 语法转为 JavaScript 语法。框架

React JSX

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

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的基础就能够了

1. Reactjs 入门基础(一)
2. ReactJS入门之ReactJS简介
3. reactJs 基础
4. 【JavaScript】ReactJS基础
5. ReactJS基础(续)
6. ReactJS 快速入门
7. ReactJS入门指南
8. ReactJS入门教程
9. ReactJs入门教程
10. 【ES6+ReactJs】第3章：ReactJS入门(2)
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Kotlin 基础语法 - Kotlin 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用