照着官方文档学习react

简介: 不晓得啥情况,markdown在csdn识别错误?排版后面的代码被破坏了,正确的排版:https://ryan-miao.github.io/2017/08/03/react-tutorial-1/笨人学习法10000个小时策略来学习,因为笨。

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

img_49a369b98ae955d49edf570f9c8de82a.jpg

笨人学习法

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
目录
相关文章
|
28天前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
68 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
前端开发 JavaScript
react学习(13)props
react学习(13)props
|
2月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
33 0
|
19天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
34 2
|
1月前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
12 1
|
1月前
|
JSON 前端开发 JavaScript
React 进阶阶段学习计划
React 进阶阶段学习计划
|
2月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
29 2
|
2月前
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
|
2月前
|
前端开发
react学习(15)函数式组件中使用props
react学习(15)函数式组件中使用props