一、在非create-react-app创建的项目,使用JSX需要注意的问题

1.1 入门的时候,要引入Babel,并将<script>标签加上type='text/babel'的属性。

1.2 将JSX引入项目,需要安装node.js,

第1步:运行npm init -y
第2步:运行npm install babel-cli@6 babel-preset-react-app@3

 安装完成后,运行

npx babel --watch src --out-dir . --presets react-app/prod 

注:npx是npm 5.2+附带的打包运行程序工具

上述命令会将src目录下所有js文件用Babel转移后的结果文件添加至根目录下。

二、react中状态和生命周期的使用

以官网教程中的时钟为例

class Clock extends React.Component{
constructor (props) {
super(props);
this.state = {
date: new Date()
};
}
render () {
return (
<div>
<h1>hello world</h1>
<h2>it is {this.state.date.toLocaleString()}</h2>
</div>
)
}
} function tick () {
ReactDOM.render(
<Clock />,
document.querySelector('#test')
)
} setInterval(tick, 1000);

上述代码实现了展示时钟的功能,但却不能实现组件的销毁。而要实现销毁,需要用到生命周期。

class Clock extends React.Component{
constructor (props) {
super(props);
// this.state={} can only in constructor
this.state = {
date: new Date()
};
}
  // 安装
componentDidMount () {
this.timeId = setInterval(
() => this.tick(),
1000);
}
  // 卸载
componentWillUnmount () {
clearInterval(this.timeId);
}
tick () {
     // 这里用的是this.setState()。还有一种形式this.setState((state,props) => {....});
this.setState({
date: new Date()
})
}
render () {
return (
<div>
<h1>hello world</h1>
<h2>it is {this.state.date.toLocaleString()}</h2>
</div>
)
}
} ReactDOM.render(
<Clock/>,
document.querySelector('#clock')
);

  组件可以选择将其状态作为道具传递给其子组件,如Clock将其state.date传给了<h2>.

<h2>it is {this.state.date.toLocaleString()}</h2>

这通常称为“自上而下”或“单向”数据流。任何状态始终归某个特定组件所有,并且从该状态派生的任何数据或UI都只会影响树中“其下方”的组件。

三、构建工具选择

作为一个入门者,选择create-react-app

npx create-react-app 项目名称
cd 项目名称
npm start

四、create-react-app创建的工程中使用自定义组件

我们用create-react-app创建的react工程,在src目录下创建components文件夹,并新建Clock.js文件。

代码:

import React from 'react';

class Clock extends React.Component{
constructor (props) {
super(props);
// this.state={} can only in constructor
this.state = {
date: new Date()
};
}
componentDidMount () {
this.timeId = setInterval(
() => this.tick(),
1000);
}
componentWillUnmount () {
clearInterval(this.timeId);
}
tick () {
this.setState({
date: new Date()
})
}
render () {
return (
<div>
<h1>hello world</h1>
<h2>it is {this.state.date.toLocaleString()}</h2>
</div>
)
}
} export default Clock

五、在App.js中引入

展示下效果:

React学习随笔的更多相关文章

  1. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  2. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  3. React学习资料

    以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...

  4. React学习笔记(一) 基础知识

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...

  5. (转) 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-01-FAQ

    特别棒的一篇文章,仍不住转一下,留着以后需要时阅读 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-01-FAQ

  6. React学习系列

    React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...

  7. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  8. react 学习与使用记录

    相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...

  9. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

随机推荐

  1. Scala教程之:可扩展的scala

    文章目录 隐式类 限制条件 字符串插值 s 字符串插值器 f 插值器 raw 插值器 自定义插值器 Scala是扩展的,Scala提供了一种独特的语言机制来实现这种功能: 隐式类: 允许给已有的类型添 ...

  2. 修改mysql配置中my.conf中max_allowed_packet变量

    mysql根据配置文件会限制server接受的数据包大小. 有时候大的插入和更新会受max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置 show VARIABLES ...

  3. canvas 绘图api的位置问题

    很久没碰canvas了,今天因为canvas绘图的为之问题浪费了一些时间. 我们知道canvas的默认宽高是300X150嘛. 实际使用的时候当然是自定义一个高宽啦. 通常我们会习惯性地在js中通过c ...

  4. 虚拟化学习笔记-KVM虚拟化跨机迁移原理

    参考:https://zhuanlan.zhihu.com/p/27055555 在线迁移过程划分为三个阶段:准备阶段.迁移阶段和切换阶段.迁移环境为虚拟化底层KVM+Qemu.虚拟化管理Libvir ...

  5. GCD-Euclidean Algorithm

    求解两个正整数的最大公约数(Greatest Common Devisor),可以采用循环进行遍历,不过效率很低.所以引入欧几里得算法(Euclid's algorithm). 欧几里得算法基于GCD ...

  6. 疯子的算法总结(九) 图论中的矩阵应用 Part 2 矩阵树 基尔霍夫矩阵定理 生成树计数 Matrix-Tree

    定理: 1.设G为无向图,设矩阵D为图G的度矩阵,设C为图G的邻接矩阵. 2.对于矩阵D,D[i][j]当 i!=j 时,是一条边,对于一条边而言无度可言为0,当i==j时表示一点,代表点i的度. 即 ...

  7. FTP服务器项目的一些整理

    几个月前按照网上的教程写了一个FTP的服务器,现在回头整理一下里面的一些知识. FTP简介 FTP是文件传输协议(File Transfer Protocol),工作在TCP/IP协议族的应用层,其传 ...

  8. E - 梦幻岛宝珠 HYSBZ - 1190 变形01背包 难

    E - 梦幻岛宝珠 HYSBZ - 1190 这个题目我觉得很难,看题解都看了很久. 首先可以得到一个大概的思路就是分组,每一个数都可以分成 a*2^b  所以把b相同的数都分成一个组. 在每一组内部 ...

  9. 牛客小白月赛16 小石的妹子 二分 or 线段树

    牛客小白月赛16 这个题目我AC之后看了一下别人的题解,基本上都是线段树,不过二分也可以. 这个题目很自然就肯定要对其中一个进行排序,排完序之后再处理另外一边,另一边记得离散化. 怎么处理呢,你仔细想 ...

  10. spring的单元测试

    如果spring 4.3.18这个版本的spring要使用junit,需要使用junit的junit-4.12之上的版本.使用这个版本junit的时 候需要引入hamcrest-all的jar包.之前 ...