上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定、属性绑定、数组循环等等。

组件继承和挂载

当我们使用脚手架或者命令行创建一个项目时,会自动初始化一个首页,也就是项目的根组件节点,但是在正常的做项目时,是不建议将过多的代码放在这个跟组件里面的,更多的是组件化处理。一个最简易的组件如下所示。

首先需要引入react,然后通过组件继承的方式在里面添加内容,这里除了上面这种方式以外,也可以采用下面这种方式进行继承。

其中的ReactDOM.render()是react的最基本方法用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点中。react主要使用的是jsx语法,JSX语法能够让我们更直观的看到组件的DOM结构,不能直接在浏览器上运行,最终会转换成js代码。在组件写完以后,需要使用export将组件进行暴露。然后在跟组件App.js中进行引用。

这里,既可以使用单标签还是双标签都可以,在使用单标签的时候需要进行闭合。

插件

如果每次都写组件的时候都把上面的代码写一遍,是非常费时间的,这里推荐使用vscode的一个插件:Simple React Snippets,可以快速生成基本结构,在官网有许多不同的用法

数据定义与绑定

import React, {Component} from 'react'
class Home extends Component{
constructor(){
super();
this.state={
name:"张三",
age:"30",
userInfo:{
job:"react"
}
}
}
render(){
return (
<div>
<p>react组件里面的所有节点需要被一个根节点包裹</p>
<p>姓名:{this.state.name}</p>
<p>年龄:{this.state.age}</p>
<p>工作:{this.state.userInfo.job}</p>
</div>
)
}
} export default Home;

基本的数据使用如上面所示,在进行数据定义的时候,将数据写在constructor()里面的state对象中,在需要使用的地方用大括号括起来,然后按住平常对象调用的方式进行绑定使用就可以了,需要注意的是,在state对象前面,还有一个super()。

Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。用在构造函数中,必须在使用this之前调用。所以通常是写在最前面的。

虽然我们上面的写法是没有错误的,但是在官网给出的例子中,super()是带有一个参数的。官方提供学习的例子中都是写成super(props),是为了

需要在构造函数内使用this.props,更便于父子组件传值,所以说写成super(props)是完全没问题的,也建议就直接这样写。

   

另外需要注意的是,在上面的例子中,我们需要的是4个p标签,但却在p标签外层包裹了一次div,这是因为组件中只能有一个根节点,当有多个元素的时候,需要使用一个根节点进行包裹。

属性绑定

react中在进行属性绑定的时候,常见的属性和html中是一样的,除了后面要说的几个特殊的以外,其他的没什么区别。

import React, {Component} from 'react'

class News extends Component{
constructor(props){
super(props); this.state={
title:'我是一个title',
} }
render(){
return(
<div>
<div title={this.state.title}>属性绑定1</div>
<div id="demo">属性绑定2</div>
</div>
)
}
} export default News;

样式添加

虽然class类也是元素的属性之一,但是因为class是js的一个关键字,所以在绑定class的时候,需要换成className。

首先我们在src文件夹下新建一个assets文件夹,在assets文件夹下面新建一个css文件夹,在css文件夹下新建news.css文件,并添加下面的样式:

然后在news.js组件中引入并使用。

方法一:

  

方法二:

   

行内样式:

import React, {Component} from 'react'

class News extends Component{
constructor(props){
super(props); this.state={
title:'我是一个title',
divStyle:{
color:'blue',
fontWeight:'blod'
},
} }
render(){
var hStyle ={
color:"red",
backgroundColor:"green"
}
return(
<div>
<div style={this.state.divStyle}>行内样式1</div>
<div style={{"color":"red"}}>行内样式2</div>
<div style={hStyle}>行内样式3</div>
</div>
)
}
} export default News;

  

图片引入

首先是远程图片使用,和在html中是一样的。

但是本地图片时不能直接这样使用的。首先在assets文件夹下面新建一个一个images的文件夹,并添加一张图片。

图片并不能正常显示,这是因为在react中使用本地图片资源的时候,需要先进行引入再使用。

或者使用es5的语法也可以:

数组循环

在使用数组的时候,需要先定义一个数组,然后直接在需要使用的地方直接调用就可以了,需要注意的是,react中使用数组的时候,循环数据要加key。

import React, {Component} from 'react'

class News extends Component{
constructor(props){
super(props); this.state={
list:[<li key='1'>1111</li>,<li key='2'>2222</li>,<li key='3'>3333</li>],
} }
render(){ return(
<ul>
{this.state.list}
</ul>
)
}
} export default News;

但是这里是因为在数组中的每一项都是li,所有可以直接放在ul中进行循环渲染,那么当数组中的每一项不是这种格式的呢,此时需要使用map()来将数组项转成需要的格式。

import React, {Component} from 'react'

class News extends Component{
constructor(props){
super(props); this.state={
fruit:['香蕉','荔枝','金桔','雪梨'],
} }
render(){
let fruitList = this.state.fruit.map(function(value,key){
return <li key={key}>{value}</li>
})
return(
<ul>
{fruitList}
</ul>
)
}
} export default News;

除了上面这种提前将数据转换格式后再使用的办法外,还可以像下面这样在使用的时候再进行转换。

import React, {Component} from 'react'

class News extends Component{
constructor(props){
super(props); this.state={
newsList:[
{title:'新闻111'},
{title:'新闻222'},
{title:'新闻333'},
{title:'新闻444'},
]
} }
render(){
return(
<ul>
{
this.state.newsList.map(function(value,key){
return (<li key={key}>{value.title}</li>)
})
}
</ul>
)
}
} export default News;

react基础的更多相关文章

  1. react基础(1)

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  2. react基础(2)

    react基础(1):介绍了如何创建项目,总结了JSX.组件.样式.事件.state.props.refs.map循环,另外还讲了mock数据和ajax 还是用 react基础1 里创建的项目继续写案 ...

  3. react基础语法(五) state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  5. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  6. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  7. React 基础入门,基础知识介绍

    React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...

  8. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  9. React 基础入门

    React 起源于 Facebook 内部项目,是一个用来构建用户界面的 Javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组 ...

随机推荐

  1. linux 的压缩 打包

    1.压缩打包,常见的命令:gzip bzip2 xz zip tar gzip:  不能压缩目录 gip  -[0-9]  file_name   压缩级别, 默认是6 gzip  file_nane ...

  2. 斐波那契 - pythoon实现

    def fn_1(n): if n == 0 : return n elif n == 1 : return n else: a = [0,1] for i in range(2,n): a.appe ...

  3. java路径

    System.out.println(ResourceUtils.getURL("classpath:").getPath());

  4. [codeforces Mail.Ru Cup 2018 Round 3][B Divide Candies ][思维+数学]

    https://codeforces.com/contest/1056/problem/B 题意:输入n,m    求((a*a)+(b*b))%m==0的(a,b)种数(1<=a,b<= ...

  5. Stm32L0串口中断接收使用

    最新在做LoRa的项目,使用的是STM32L072和SX1276,需要做一个串口透传模块,刚开始做demo的时候不考虑功耗,所以串口发送和接收直接使用下列函数执行: HAL_UART_Transmit ...

  6. 数字int字符串str(深入学习)

    数字int字符串str 查看一个对象的类 如:如查看对象变量a是什么类          用到函数type(),函数值是要查看的对象变量 1 #!/usr/bin/env python 2 # -*- ...

  7. LeetCode – All Nodes Distance K in Binary Tree

    We are given a binary tree (with root node root), a target node, and an integer value K. Return a li ...

  8. LeetCode–Flip Game

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...

  9. SpringBoot企业级博客开发

    1.springboot生成项目 PS : 进入项目,输入gradle build,生成build文件夹:  然后进入libs有jar,使用java jar进行运行项目 PS: 这个项目没有准守res ...

  10. NonAction与ChildActionOnly

    NonAction 表示它不是一个真正的Action,而是一个普通方法: ChildActionOnly 表示它只能在View中通过Html.Action或Html.RenderAction来使用