不晓得啥情况,markdown在csdn识别错误?排版后面的代码被破坏了,正确的排版:https://ryan-miao.github.io/2017/08/03/react-tutorial-1/
笨人学习法
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);
``- function
Clock就是一个react component,和前面的
element一样,都是react组件. - react component可以写成html标签的方式,但要求方法名必须大写,也即标签名必须大写。
就是组件的用法。 - 组件
Clock接收一个参数对象
props,
props的属性可以通过标签上的变量来赋值。比如
date就通过标签传入到function
Clock里了。由此,像
- react component必须有返回值,返回一段html代码,用圆括号包裹
- html标签与js变量可以通过一对大括号的方式拼接起来
修改app/index.html.添加一个我们用来测试div节点。这里主要用于clock
```diff
- +
-
+
唯有不断学习方能改变! -- Ryan Miao