1.react 基础 （创建组件及在浏览器上渲染组件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container">
</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码
// 8.需求：渲染一行标题,显示"Hello React"
//
/*
ReactDOM.render()
React的基本方法,用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点中
3个参数
第一个：模板的渲染内容(HTML形式)
第二个：这段模板需要插入的DOM节点(本程序中,是id为container的div节点)
第三个：渲染后的回调,一般不用
*/
// ReactDOM.render(
// <h1>Hello React</h1>,
// document.getElementById("container")
// );
/*
JSX入门
JSX不是一门新的语言,是个语法(语法糖)
*/
// 1.JSX必须借助React环境运行
// 2.JSX标签其实就是HTML标签,只不过我们在JavaScript中书写这些标签的时候,不用使用""括起来,
// 可以像XML一样书写
ReactDOM.render(
<h1>
Hello React
</h1>,
document.getElementById("container")
);
// 3.转换：JSX语法能够让我们更直观的看到组件的DOM结构,不能直接在浏览器上运行,最终会转化成JavaScript代码执行
ReactDOM.render(
React.createElement("h1",null,"Hello React"),
document.getElementById("container")
);
// 4.在JSX中运行JavaScript代码
// 使用{}括起来 {表达式}
//
var text = "百度";
ReactDOM.render(
<h1>{text}</h1>,
document.getElementById("container")
);
// 5.例如：属性、设置样式、事件绑定
</script>
</html>
2.设置组件样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
<style>
.pStyle {
font-size: 20px;
}
</style>
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container">
</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码
/*
创建一个组件类,用于输出Hello React
1.React中创建的组件类以大写字母开头,驼峰命名法
2.在React中使用React.createClass方法创建一个组件类
3.核心代码：每个组件类都必须实现自己的render方法。输出定义好的组件模板。返回值：null、false、组件模板
4.注意：组件类只能包含一个顶层标签
*/
// var HelloMessage = React.createClass({
// render:function(){
// return <h1>Hello React</h1>;
// }
// });
// // 渲染
// ReactDOM.render(
// // 在模板中插入<HelloMessage />会自动生成一个实例
// <HelloMessage />,
// document.getElementById("container")
// );
/*
设置组件的样式,三种：
1.内联样式
2.对象样式
3.选择器样式
注意：在React和HTML5中设置样式时的书写格式是有区别的
* 1.HTML5以 ; 结尾
React以 , 结尾
* 2.HTML5中key、value都不加引号
React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法(例：backgroundColor)。如果value为字符串,需要加引号。
* 3.HTML5中,value如果是数字,需要带单位
React中不需要带单位
* 我们定义一个组件类,同时使用三种设置组件样式的方式
* 需求：定义一个组件,分为上下两行显示内容
* <div> 内联样式：设置背景颜色,边框大小,边框颜色
* <h1></h1> 对象样式：设置背景颜色,字体颜色
* <p></p> 选择器样式：设置字体大小
* </div>
*
* class 和 for 是React中的保留字
* 注意：在React中使用选择器样式设置组件样式时,属性名不能使用class,需要使用className替换。
* 类似的：使用htmlFor替换for
*/
// 创建设置h1样式对象
var hStyle = {
backgroundColor:"green",
color:"red"
}
// 创建组件 通过this.props传值
var ShowMessage = React.createClass({
render:function() {
return (
// 外面的{}是JSX语法,里面的{}表示对象
<div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
<h1 style={hStyle}>{this.props.firstRow}</h1>
<p className="pStyle">{this.props.secondRow}</p>
</div>
);
}
});
ReactDOM.render(
<ShowMessage firstRow="你好" secondRow="世界" />,
document.getElementById("container")
);
</script>
</html>
3.复合组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container">
</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码
/*
复合组件
也被称为组合组件,创建多个组件合成一个组件。
*/
/*
定义一个组件WebShow。功能：输出网站的名字和网址,网址是一个可以点击的链接。
分析：定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,兵器可以点击
*/
// 定义WebName组件
var WebName = React.createClass({
render:function() {
return <h1>百度</h1>;
}
});
// 定义WebLink组件
var WebLink = React.createClass({
render:function() {
return <a href="http://www.baidu.com">http://www.baidu.com</a>;
}
});
// 定义复合组件 WebShow
var WebShow = React.createClass({
render:function() {
return (
// 嵌套组件
<div>
<WebName />
<WebLink />
</div>
);
}
});
// 将组件类WebShow渲染到网页上
ReactDOM.render(
<WebShow />,
document.getElementById("container")
);
</script>
</html>
4.
时间： 2024-10-11 18:59:08