照着官方文档学习react

转载

mob604756f6b718 2017-08-09 21:06:00

文章标签 html html标签大括号 bundle 赋值 文章分类 代码人生

不晓得啥情况，markdown在csdn识别错误？排版后面的代码被破坏了

照着官方文档学习react_html标签

笨人学习法

10000个小时策略来学习，因为笨。先照着官方文档敲一遍，写一遍。

准备

先要准备环境。搭建一个基于webpack的react环境：Hello ReactJS.

一些要点

我在想是否应该完整的记录照抄的过程呢。毕竟已经开始一段，前面的要不要补上？回头看以前写过的angularJS的博客，现在完全不会了，太久没用了。所以，还是记录基础以及关注的问题就好。

1.1 基本格式

react的模板文件后缀结尾为.jsx。

react可以采用html标签拼接的方式定义一个元素。比如：

const element = <h1>Hello, world</h1>;

假设页面有个div:

<div id="root"></div>

那么，reactJS可以这样渲染页面：

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

需要引入react-dom.
element变量就是一个react的元素，一个组件，一个component.
通过ReactDOM.render(reactElement, domElement)来渲染页面

1.1 变量

react可以使用一对大括号来包裹变量，与html拼接：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('clock')
  );
}

setInterval(tick, 1000);

大括号里的代码是js代码
element是一个react组件：component。可以看成由div和h1,h2拼接的匿名组件。

下面实践以上的代码。首先，由于采用单个元素测试，需要修改上次搭建好的环境。

修改webpack.config.js

 module.exports = {
-    entry: './app/index.js',
+    entry: {
+        app: './app/index.js',
+        clock: './app/components/step1-element.jsx'
+    },
     output: {
         path: path.resolve(__dirname, 'dist'),
-        filename: 'index_bundle.js'
+        filename: '[name].bundle.js',
     },

意思是可以渲染多个打包后的js文件。分别定义entry就是需要单独打包的js。在filename就会根据entry的key来生成打包后的文件名。

1.1.1 构建第一个react component

创建app/components/step1-element.jsx

```js

import React from 'react';

import ReactDOM from 'react-dom';

function Clock(props) {

return (

Step1, learn element and variable.

It is {props.date.toLocaleTimeString()}.

);

}

function tick() {

ReactDOM.render(<Clock date={new Date()} />, document.getElementById('clock'));

}

setInterval(tick, 1000);

``- functionClock就是一个react component，和前面的element一样，都是react组件. - react component可以写成html标签的方式，但要求方法名必须大写，也即标签名必须大写。就是组件的用法。 - 组件Clock接收一个参数对象props，props的属性可以通过标签上的变量来赋值。比如date就通过标签传入到functionClock里了。由此，像

`这种拼接的标签肯定也是有function的，不过react库已经写好了。