一、在非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. 2019-2020-1 20199308《Linux内核原理与分析》第三周作业

    <Linux内核分析> 第二章 操作系统是如何工作的 2.1 函数调用堆栈 3个关键性的方法机制(3个法宝) 存储程序计算机 函数调用堆栈机制 中断 堆栈相关的寄存器 ESP:堆栈指针(s ...

  2. java 之 jsp详解

    jsp所需环境 eclipse JSP/Servlet 环境 jsp处理 以下步骤表明了 Web 服务器是如何使用JSP来创建网页的: 就像其他普通的网页一样,您的浏览器发送一个 HTTP 请求给服务 ...

  3. 【shell】Shell变量基础及深入

    1. 什么是变量 变量就是用一个固定的字符串(也可能是字符数字等的组合),替代更多更复杂的内容,这个内容里可能还会包含变量和路径,字符串等其他内容. 变量的定义是存在内存中. x=1 y=2 2. 变 ...

  4. Linux hostname主机名查看和设置

    查询主机名: uname -n hostname [root@oldboy ~]# uname -n oldboy [root@oldboy ~]# hostname oldboy Linux操作系统 ...

  5. 压缩工具gzip、bzip2、xz的使用

    2019独角兽企业重金招聘Python工程师标准>>> 本文使用 为了要压缩 常见压缩格式 压缩工具 gzip压缩工具 bz2压缩工具 xz压缩工具 为什么要压缩 为什么要压缩?文件 ...

  6. php beast windows编译教程

    git clone https://github.com/Microsoft/php-sdk-binary-tools.git c:\php-sdk cd c:\php-sdk git checkou ...

  7. js怎么删除数组元素,有哪些删除元素方法

    JavaScript删除元素方法 1.根据索引删除数组元素 delete 数组[索引]   *注意delete 后面是空格 var arr1=["aa","bb" ...

  8. D. Carousel(分类+构造)

    \(题目的要求似乎很低:只需要不同类的相邻元素不同色就行了.\) 下面的讨论的话,实际上最后一个点是关键,要想到怎么让最后一个点不开新的颜色就简单了. \(分情况讨论:\) \(\color{Red} ...

  9. 【FPGA篇章三】FPGA常用语句:Verilog基本语法要素

    欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 Verilog中总共有十九种数据类型,我们先介绍四个最基本的数据类型,他们是: reg型.wire型.integer型.parameter型 ...

  10. Day_08【面向对象】扩展案例4_年龄为30岁的老王养了一只黑颜色的2岁的宠物……

    #分析以下需求,并用代码实现: 1.定义动物类 属性: 年龄,颜色 行为: eat(String something)方法(无具体行为,不同动物吃的方式和东西不一样,something表示吃的东西) ...