一、在非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. spark2.4.5计算框架中各模块的常用实例

    本项目是使用scala语言给出了spark2.4.5计算框架中各模块的常用实例. 温馨提醒:spark的版本与scala的版本号有严格的对应关系,安装请注意. Spark Core RDD以及Pair ...

  2. php内置函数call_user_func()

    <?php //call_user_func(callback,name,age) //第一个参数callback作为回掉函数使用,其余的参数是他的参数 function now($a,$b) ...

  3. 前端JS—显示赋值(一)

    一:js代码必须位于<script>js代码</script> 把js代码放到<body>元素的地步,可以改善显示速度 二:js显示数据 使用 window.ale ...

  4. Docker数据管理(一)

    数据卷挂载 在生产环境中,需要对数据进行持久化,冗余化,或者在需要在多个容器之间进行数据共享 数据卷:容器内数据直接映射到本地主机环境 数据卷容器:使同特定容器维护数据卷 -v 进行映射 1.在容器内 ...

  5. python学习13类2之封装

    '''''''''面向对象三大特性:封装,继承,多态1.封装: 类中以_或者__的属性,都是私有属性,禁止外部调用.'''class Student(object): def __init__(sel ...

  6. 自定义spring boot的自动配置

    文章目录 添加Maven依赖 创建自定义 Auto-Configuration 添加Class Conditions 添加 bean Conditions Property Conditions Re ...

  7. dhcpd.conf(5) - Linux man page

    http://linux.die.net/man/5/dhcpd.conf Name dhcpd.conf - dhcpd configuration file Description   The d ...

  8. CloudCC CRM探讨:精细流程管理与员工悟性培养

    很多企业主招聘时更喜欢专业的销售,来给他们创造价值.老板不愿意花时间在"磨刀上",而喜欢员工一来就"砍柴".即使是建立培训机制,仍然很大程度依赖于员工自己的悟性 ...

  9. 一个简易的SocketIM

    今天做了一个简易的socketIM的小示例.基本思想是开启两个winform,每个winform既充当服务器也充当客户端.一个监听8000端口,另外一个监听8001端口,两个winform接收到信息之 ...

  10. Knapsack Problem

    0-1背包 描述:N件物品,第i件的重量是w[i],价值v[i].有一个容量为W的背包,求将哪些物品放入背包可使总价值最大.每件物品可以用0或1次. 分析:根据题意,可以写出表达式: \[max(\S ...