照着官方文档学习react

不晓得啥情况,markdown在csdn识别错误?排版后面的代码被破坏了,正确的排版:https://ryan-miao.github.io/2017/08/03/react-tutorial-1/

照着官方文档学习react

笨人学习法

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。可以看成由divh1,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接收一个参数对象propsprops的属性可以通过标签上的变量来赋值。比如date就通过标签传入到functionClock里了。由此,像

`这种拼接的标签肯定也是有function的,不过react库已经写好了。
  • react component必须有返回值,返回一段html代码,用圆括号包裹
  • html标签与js变量可以通过一对大括号的方式拼接起来

修改app/index.html.添加一个我们用来测试div节点。这里主要用于clock
```diff

  • +


  • +





唯有不断学习方能改变! -- Ryan Miao
上一篇:GIT | 常用命令学习指南


下一篇:Node | Linux安装及部署