reactjs学习——制作button组件

  前端时间一直在折腾nodejs,好不容易有点搞懂express框架想要作业登录注册系统来练练手,路由搞好了,ajax搞好了,页面也搞好了,兴冲冲的准备测试了,麻蛋我忘记世界上有一种东西叫数据库,还没连数据库/(ㄒoㄒ)/~~网上好多都是教mangoDB,又要重新学,搞来搞去没弄好/(ㄒoㄒ)/~~等我折腾好了再来写nodejs。

  reactjs太火啦,感觉不去学学有点对不起web工程师的名头哈哈哈哈哈哈,学了几天自己做了一个button的组件,和bootstrap那个有点像,先来说说学习reactjs。

  虽然已经火了好久,但是资料还是不是特别多啊,我在学的时候被添加style样式烦了很久(还是没弄清楚),然后正式版本又没出来,facebook一直在改改改,可是国内更新进度跟不上,导致很多资料都是以前版本的,哎,以后还是自己看英文的啦,老子英语这么好不能废了哈哈哈。

  我学的时候觉得这两个讲的很好,推荐下:

    入门实例教程 - 阮一峰的网络日志 (!推荐,这个日志会随版本更新!)这个真的是入门啦,我每个做了两遍以上,会让你懂一些基本操作方法,多做几遍就有感觉了。当然说说入门,要理解react还差远了,我做完里面的demo其实还是糊里糊涂的,然后噔噔噔就要推荐下面这个了。

    ReactJS 生命周期、数据流与事件 有很多网页都有写react组件的生命周期,但我看了以后,觉得这个讲的最好!我把他打印下来好好研究了!虽然我现在对销毁&清理期这部分还是懵逼状态。

    现在来放下我写的button组件哟~

    效果:

    代码:  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactButton</title>
    <script type="text/javascript" src="build/react.js"></script>
    <script type="text/javascript" src="build/react-dom.js"></script>
    <script type="text/javascript" src="build/browser.min.js"></script>
    <style type="text/css">
        .box{
            float: left;
            margin:20px;
            }</style>
</head>
<body>
    <div id="Primary" class="box"></div>
    <div id="Success" class="box"></div>
    <div id="Danger" class="box"></div>
    <script type="text/babel">
        var MyReactButton=React.createClass({
            getDefaultProps:function(){
                return{
                    children:‘button‘,
                    pattern:‘Primary‘
                };
            },
            getInitialState:function(){
                return{
                        opacity:‘0.92‘,
                };
            },
            handleMouseover:function(){
                    this.setState({
                    opacity:1
                });
            },
            handleMouseout:function(){
                this.setState({
                    opacity:‘0.92‘
                });

            },
            render:function(){
                var styles={
                    Primary:{
                        opacity:this.state.opacity,
                        backgroundColor:‘#2e6da4‘,
                        padding:‘6px 12px‘,
                        color:‘#fff‘,
                        border:‘1px solid #2e6da4‘,
                        borderRadius:‘4px‘,
                        fontSize:‘14px‘,
                    },
                    Success:{
                        opacity:this.state.opacity,
                        backgroundColor:‘#4cae4c‘,
                        padding:‘6px 12px‘,
                        color:‘#fff‘,
                        border:‘1px solid #4cae4c‘,
                        borderRadius:‘4px‘,
                        fontSize:‘14px‘
                    },
                    Danger:{
                        opacity:this.state.opacity,
                        backgroundColor:‘#d43f3a‘,
                        padding:‘6px 12px‘,
                        color:‘#fff‘,
                        border:‘1px solid #d43f3a‘,
                        borderRadius:‘4px‘,
                        fontSize:‘14px‘
                    },
                };
                return(
                     <button style={styles[this.props.pattern]} className={this.props.className} onMouseOver={this.handleMouseover} onMouseOut={this.handleMouseout}>{this.props.children}</button>
                     );
             }
        });

        ReactDOM.render(<MyReactButton pattern=‘Primary‘>Primary</MyReactButton>,
        document.getElementById(‘Primary‘));
        ReactDOM.render(<MyReactButton pattern=‘Success‘>Success</MyReactButton>,
        document.getElementById(‘Success‘));
        ReactDOM.render(<MyReactButton pattern=‘Danger‘>Danger</MyReactButton>,
        document.getElementById(‘Danger‘));
    </script>
</body>
</html>

现在来讲下疑问:

1)怎么把共有的style属性提取出来,类似于mixin那样,这样有些我就不用重复写了,可惜我弄了好久还是没弄明白/(ㄒoㄒ)/~~有知道的说下啊

2)我把jsx文件单独写一个文件而不是写进HTML,可是老是报错

    

时间: 2024-10-02 03:13:52

reactjs学习——制作button组件的相关文章

ReactJS学习笔记(二)-组件嵌套与组件复用

我们终要远行,最终告别稚嫩的自己. 使用React来构建web应用,每个页面都将是多个组件组成,并且相互嵌套来构成的,接下来就学习下组件的嵌套. 一.组件嵌套: 背景交代: 1.创建一个html,包含引用的相关js.需要被渲染的div: 2.创建一个有label与input标签组成的简单组件 - IvanInput,并可以通过传入数组来渲染多组label与input标签,拥有不同的label名称.inputType.inputRef.inputName及input的onChange事件: 3.创

ExtJs学习笔记之Button组件

按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点击按钮时执行handler 内部的代码, 或用来 listeners(监听)一些事件,比如 mouseover. 范例:: 1.示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Unity3D 在自定义脚本中实现Button组件上的OnClick面板

Unity3D 在自定义脚本中实现Button组件上的OnClick面板UnityEvent脚本代码事件传参多参数传入下述内容不对c#语法做过多讲解,仅对已入门并有兴趣的同学做为学习和拓展的资料 大家在Unity制作的过程中一定都使用过UI功能,那么很多人也一定见过这个面板: 那么我们如何能在自己的脚本中添加上像OnClick这样的面板呢. UnityEventUnity中内置了一个UnityEvent类作为事件处理的类,我们只要在脚本中声明出来,Unity便会自动添加到脚本面板上,这样便可以在

VB制作ASP组件_本站原创视频录像

由本人第一次尝试制作的录像视频教程,由于电脑速度较慢,播放时间较慢,请谅解. 本录像讲解最基础的VB封装ASP代码生成DLL的制作教程,适合初级学习者参考.也是本人学习VB制作ASP组件的第一个尝试,录像基本成功. 用vb编写asp组件(dll)示例下面,将演示如何使用vb制作asp的dll组件... 1. 启动你的vb,选择activex dll图标,然后在点击菜单的工程>>引用,接 着在弹出的"引用"窗口从中选择 microsoft active server page

reactjs学习一(环境搭配react+es6+webpack热部署)

reactjs学习一(环境搭配react+es6+webpack热部署) reactjs今年在前端圈里很火,用了三四个月,感觉确实很适合前端开发人员使用,值得深入一下,所以这里记录一下我简单的学习过程,首先是react的环境,由于现在react的新版本已经很稳定了,所以推荐使用es6+webpack来搭建开发环境. 首先,安装nodejs,略过,安装gitbrach,略过,直接搜索到相对应软件的官网,下载最新正式版本的软件,然后就下一步下一步完成安装就可以了,很简单的过程,但是不容忽略,如有问题

android学习--TabHost选项卡组件

TabHost是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个标签页,每个标签页获得了一个与外部容器相同大小的组件摆放区域.在手机系统的应用类似"未接电话"."已接电话"."呼出电话"等. 1 . TabHost提供了两个方法来创建选项卡.添加选项卡 newTabSpec(String tag)  : 创建选项卡 addTab(TabHost.TabSpec  tabSpec) : 添加选项卡 2.TabHost 切换选项卡触发的

ReactJS 学习路线

Node.js: 推荐采用nvm的方式安装,nvm(Node Version Manager)用于Node的版本管理,方便不同版本的Node之间的切换 安装npm,npm(Node Package Manager)Node.js的包管理工具.Node.js社区有非常丰富的javascript包,通过npm可以非常简单的安装.使用,并且还可以把依赖的包同时下载下来. 由于npm的官方源非常慢,所以最好用淘宝的源替换.(淘宝源的同步频率是10分钟) npm config set registry "

学习制作手机网站1

学习制作手机网页 流式布局: 盒子的padding 和margin width都要使使用 百分比来定义 百分比 如果一个盒子没有父元素,那么它的宽度默认就是相对于浏览器的宽度 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Document</title> 5 <style> 6 .box{ 7 /*相对于浏览器的宽度*

学习制作手机页面2

学习制作手机页面2. 先介绍一个css3的属性.box-sizing 这个属性 就是把盒模型的border 和padding 都计算在内 未使用box-sizing的代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>box-sizing</title> 6 7 <style&