新闻api Nmap 微信小程序 webserver jquery networking sms 管理后台ui matlab读取dat文件 xcode打包 mysql删除表 destoon模板 python代码示例 python条件判断 python打开文件夹 python安装模块 java初级 java获取ip地址 java的map 怎么装linux系统 广告代码 wps2011 win7loader 图解设计模式 ezcad2 ad19 选项卡 淘宝自动发货软件 位置不可用 win10画图 tableau下载 ps镜头校正 透视网格工具怎么取消 安卓游戏辅助 cad拉伸命令 jsps2寸照片制作 nonetype 只狼月隐糖 qq拼音输入法官网 xp系统修复工具
当前位置: 首页 > 学习教程  > 编程语言

React基础知识(一)

2020/12/28 19:42:23 文章标签:

一、搭建React工作环境 React的核心库:react.development.js。React进行Dom操作的库:react-dom.development.js。将JSX语言转换为JavaScript语言:babel.min.js。 如果我们将所有的React代码都书写在HTML文档中,则页面的启动不需…

一、搭建React工作环境

  1. React的核心库:react.development.js
  2. React进行Dom操作的库:react-dom.development.js
  3. 将JSX语言转换为JavaScript语言:babel.min.js

如果我们将所有的React代码都书写在HTML文档中,则页面的启动不需要服务器。
如果我们将所有的React代码都书写在独立的js文件中,则页面的启动需要服务器。

<!--:引入顺序不可改变 -->
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel" src="js/index.js"></script>

二、第一个React程序:Hello,React!

1. React的核心方法

React的核心方法:ReactDOM.render(JSX代码,DOM Node)
功能:将JSX代码生成的HTML节点放入指定的DOM节点中。

ReactDOM.render(
   <h1>Hello,React!</h1>,
   document.getElementById(“app”)
)

2. JSX代码必须具备一个根据节点

3. JSX是HTML和JavaScript语言的混合

  1. HTML代码必须用<>扩住。
  2. JavaScript代码必须用{}扩住
    在HTML代码中嵌入的JavaScript代码必须是一个数组。
    例:做一个数组,在页面中利用React技术将数组元素渲染为一个无序列表
let list=['张三','李四',……];
ReactDOM.render(
<div>
	<ul>
		{
			list.map(item=>{
				return <li>{item}</li>
			})
		}
	</ul>
</div>,
document.getElementById(“app”)
)
//也可以将对数组的操作放在核心方法以外,并最终生成数组

三. React组件

React组件名必须用大写字母开头,格式:

class 组件名 extends React.Component{
	constructor(props){
		super(props);
	}
	render(){
		return (
			//JSX代码
		)
	}
}
1. 为组件中的HTML元素绑定事件
btnClick(){
	//
}
render(){
  return (
  	<h1 onClick={this.h1Click}></h1>
  )
}
2. 如何定义数据区
  1. 数据区定义在组件的构造函数中,以类的属性来进行定义
constructor(props){
	super(props);
	this.state={
		//数据区
	}
}
  1. 在JSX代码中如何调用数据区中的数据:{this.state.变量名}
  2. 在方法中如何使用 指向组件的this:
<button onClick={this.btnClick.bind(this)}>单击</button>
  1. 如何修改数据区中的数据:
this.setState({
	a:200
})
  1. 在组件的使用过程中,可以通过类似于HTML属性的格式向组件定义部分传递参数
<Book title=你好"" ok="Hello"></Book>
//引用属性:this.props.title   this.props.ok
class Book extends React.Component{
    constructor(props){
        super(props);  	//调用父组件传递属性,参照ES6 class 关键字
        this.state={  	//state是类Book的属性,state是组件Book的数据区
            a:100,
            list:['第一','第二']
        };
    }

    //h1的单击事件
    h1Click(){
        window.alert(this.props.ok);
    }

    //按钮的单击事件
    btnClick(){
        console.log(this);
        this.setState({
            a:this.props.title
        })
    }
    render(){
        return (
            <div>
                <h1 onClick={this.h1Click.bind(this)}>
                    欢迎学习React组件{this.state.a}
                </h1>
                <hr></hr>
                <button onClick={this.btnClick.bind(this)}>单击</button>
                    //参照函数的apply()或call()方法
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <Book title="你好" ok="Hello"></Book>
    </div>,
    document.getElementById('app')
);

本文链接: http://www.dtmao.cc/news_show_550353.shtml

附件下载

上一篇:毕设日记1

下一篇:js和“原生js”

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?