您的位置：首页 > Web前端 > React

蓝鸥React Native零基础入门到项目实战 组件

2016-12-27 10:32 260 查看
蓝鸥React Native零基础入门到项目实战 Hello React http://edu.csdn.net/course/detail/3129 组件



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<!-- react.js是React的核心库 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供与DOM相关的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="./build/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>
<!-- React渲染的模板内容会插入到这个DOM节点中，作为一个容器 -->
<div id="container">

</div>

</body>
<!-- 在React开发中，使用JSX，跟JavaScript不兼容，在使用JSX的地方，要设置type：text/babel -->
<!-- babel是一个转换编译器，ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">

// 在此处编写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、this.props（组件自身的属性）

给组件设置的属性，都会存储在this.props对象中，this.props对象的属性跟组件的属性是一一对应

*/

/*
定义组件类，实现：组件从外部接收内容，并进行展示

*/

// 我们约定：用于传值的属性名称helloText
//
// var HelloMessage = React.createClass({
//
//     render: function() {
//       /*
//         this表示当前这个组件对象
//         this.props.helloText 可以解释：当前组件对象的 props对象中存储的 helloText属性中的值
//        */
//       return <h1>{this.props.helloText}</h1>;
//     }
// });
//
// ReactDOM.render(
//   <HelloMessage helloText="你好 蓝鸥" />,
//   document.getElementById("container")
// );

/*
设置组件的样式，讲解三种：
1、内联样式
2、对象样式
3、选择器样式

注意：在React和HTML5中设置样式时的书写格式是有区别的
* 1、HTML5以;结尾
*    React以,结尾
* 2、HTML5中key、value都不加引号
*    React中属于JavaScript对象，key的名字不能出现"-"，需要使用驼峰命名法。如果value为
*    字符串，需要加引号。
* 3、HTML5中，value如果是数字，需要带单位
*    React中不需要带单位

* 我们定义一个组件类，同时使用三种设置组件样式的方式
* 需求：定义一个组件，分为上下两行显示内容
* <div>  内联样式：设置背景颜色，边框大小，边框颜色
*   <h1></h1>  对象样式：设置背景颜色，字体颜色
*   <p></p>  选择器样式：设置字体大小
* </div>
*
* 注意：在React中使用选择器样式设置组件样式时，属性名不能使用class，需要使用className替换。
* 类似的：使用htmlFor替换for
*/

/*
// 创建设置h1样式对象
var hStyle = {
backgroundColor: "green",
color: "red"
}

var ShowMessage = React.createClass({
render: function() {
return (
<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")
);
*/

/*
复合组件

也被称为组合组件，创建多个组件合成一个组件
*/

/*
定义一个组件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.lanou3g.com">http://www.lanou3g.com</a>
}
});

// WebShow
var WebShow = React.createClass({
render: function() {
return (
<div>
<WebName />
<WebLink />
</div>
);
}
});

ReactDOM.render(
<WebShow />,
document.getElementById("container")
);

</script>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Hello React React Native 免费React视频 础入门到项目实战 蓝鸥
相关文章推荐
新的分享
章节导航