React.js学习版1~

前段时间开始学习React，今天来写一个React的学习体会~
React.js的中文网站：http://www.reactjs.cn/

对于React的介绍，上面写说是用于构建用户界面的JavaScript库
有大多数人认为React是MVC中的View(视图)

创造React是为了解决构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React采用下面两种主要思想。
简单：仅仅只要表达出你的应用程序在任何一个时间点应该呈现的样子，当底层数据改变时，React会自动处理所有用户界面的更新。
表达能力（Declarative）：当数据变化了，React概念上是类似点击了更新的按钮，但仅仅只会更新变化的部分。

首先我们需要在页面当中引进

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

这三个文件可以去react的官网下载
这三个标签必须写在头部，进行首先加载。
之前我们学习过，放在头部的js弊端是“必须等到全部”JavaScript代码都被下载、解析和执行完成之后，才能开始呈现页面内容。
而React.js必须利用这个弊端，进行首先加载，才能使页面内容呈现出来。

还有一个核心注意点就在于以前我们引入js文件时，type类型写的是text/javascript，而现在在react中，我们书写的是text/babel
即<script type="text/babel">

只有通过这个写法，react才能够被成功执行
我们引进的三个文件

react.js为React的核心库
react-dom.js为提供DOM相关操作的功能
browser.js是将JSX语法转化为JavaScript语法

ReactDOM.render()
首先最重要的是学习React的最基本语法，用于将模板转化为HTML语言，并插入指定的DOM节点。
例如：
先来输出hello world，这是一个国际惯例啊国际惯例，开始学会打代码的第一句总是hello world。
首先我们先在body里创建一个div，用于当我们要插入的DOM节点的爸爸

<body>
    <div id="Box"></div>
</body>

这一个结构，清晰明了~
之后书写script代码

<script type="text/babel"> ReactDom.render( <h1>Hello,world</h1>,document.getElementById('Box') ); </script>

这里有一个非常重要的部分，我们之前熟悉的代码当中我写完document.getElementById(‘元素id名’);会习惯性的加一个分号，如果在这里添加的话会有报错。
报错形式如下：

这个提示超级清晰明了~一看就会了
还有一个重要的问题~
当你用react插入单标签的时候，有时候会漏掉一些东西，比如我插入img标签，大家都知道，img是一个单标签。

ReactDOM.render(
    <img src="../images/1.jpg" alt="xi" >,document.getElementById('Box')
)

最重要的东西一定不能遗漏，我们先看这个报错

单标签的结尾被我们漏掉了，应该写成

ReactDOM.render(
    <img src="../images/1.jpg" alt="xi" />,document.getElementById('example')
)

这个时候就会出现一个完整的图片了~

JSX语法
JSX为JavaScript XML的缩写，是一种js和xml混写的代码。
它存在的作用在于允许HTML语言直接写在JavaScript语言当中，不加任何的引号。

例子

var names = ['1','2','3'];
ReactDOM.render(
    <div>
     {
         names.map(function (name) { 
              return <div>Hello,{name}!</div>
         })
      }
      </div>,document.getElementById('Box')
)

这个时候的页面效果就会呈现

JSX语法允许直接在模板上插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

var arr = [
    <img src="../images/1.jpg" alt="图片" />,<img src="../images/2.jpg" alt="图片" />,<img src="../images/3.jpg" alt="图片" />
];
ReactDOM.render(
    <div>{arr}</div>,document.getElementById('example')
);

这个时候就会展开三个图片~

组件

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('Box')
);

HelloMessage是一个组件类，模板插入时，会自动生成HelloMessage的一个实例。所有组件类都必须有自己的render方法，用于输出组件。
特别需要注意的是，
组件类的第一个字母必须大写
组件类只能包含一个顶层标签，否则就会报错
添加组件属性，有一个地方需要注意，就是
class属性需要写成className，for属性写成htmlFor
这是因为class和for都是js的保留字，如果按原来写，会报错。

第一版先到这儿~

原文链接：https://www.f2er.com/react/306196.html

猜你在找的React相关文章