React学习随笔
一、在非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学习随笔的更多相关文章
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- (转) 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-01-FAQ
特别棒的一篇文章,仍不住转一下,留着以后需要时阅读 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-01-FAQ
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
随机推荐
- spark2.4.5计算框架中各模块的常用实例
本项目是使用scala语言给出了spark2.4.5计算框架中各模块的常用实例. 温馨提醒:spark的版本与scala的版本号有严格的对应关系,安装请注意. Spark Core RDD以及Pair ...
- php内置函数call_user_func()
<?php //call_user_func(callback,name,age) //第一个参数callback作为回掉函数使用,其余的参数是他的参数 function now($a,$b) ...
- 前端JS—显示赋值(一)
一:js代码必须位于<script>js代码</script> 把js代码放到<body>元素的地步,可以改善显示速度 二:js显示数据 使用 window.ale ...
- Docker数据管理(一)
数据卷挂载 在生产环境中,需要对数据进行持久化,冗余化,或者在需要在多个容器之间进行数据共享 数据卷:容器内数据直接映射到本地主机环境 数据卷容器:使同特定容器维护数据卷 -v 进行映射 1.在容器内 ...
- python学习13类2之封装
'''''''''面向对象三大特性:封装,继承,多态1.封装: 类中以_或者__的属性,都是私有属性,禁止外部调用.'''class Student(object): def __init__(sel ...
- 自定义spring boot的自动配置
文章目录 添加Maven依赖 创建自定义 Auto-Configuration 添加Class Conditions 添加 bean Conditions Property Conditions Re ...
- dhcpd.conf(5) - Linux man page
http://linux.die.net/man/5/dhcpd.conf Name dhcpd.conf - dhcpd configuration file Description The d ...
- CloudCC CRM探讨:精细流程管理与员工悟性培养
很多企业主招聘时更喜欢专业的销售,来给他们创造价值.老板不愿意花时间在"磨刀上",而喜欢员工一来就"砍柴".即使是建立培训机制,仍然很大程度依赖于员工自己的悟性 ...
- 一个简易的SocketIM
今天做了一个简易的socketIM的小示例.基本思想是开启两个winform,每个winform既充当服务器也充当客户端.一个监听8000端口,另外一个监听8001端口,两个winform接收到信息之 ...
- Knapsack Problem
0-1背包 描述:N件物品,第i件的重量是w[i],价值v[i].有一个容量为W的背包,求将哪些物品放入背包可使总价值最大.每件物品可以用0或1次. 分析:根据题意,可以写出表达式: \[max(\S ...