鉴于个人的开发习惯,我将react默认的文件结构作了如下修改:

我们的项目是写在src目录下的。

那么,接下来,继续看react的组件式如何编写的吧。

一、react的组件

不同于vue的每个组件都是一个vue文件(其实就是一个包含css,js,html的页面),react每个组件都是js文件。它长这样:

你也可以选择不用class写,而是直接用function写(开启了babel的js高亮:view, Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)):

二、Props

写组件的话,里面的数据当然不能写死咯,所以,依然是使用props来传递用户自定义的数据。

组件:

调用:

最终渲染:

如果你是用function的话,你可能要作如下改动:

注意:组件名称必须以大写开头!!!组件名称必须以大写开头!!!组件名称必须以大写开头!!!

三、父子组件

最终渲染:

React之组件的更多相关文章

  1. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  2. Griddle, griddle-react 一个REACT 表格组件

    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html

  3. React Native组件之Text

    React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...

  4. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  5. reactjs入门到实战(七)---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

  6. React Native 组件之TextInput

    React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...

  7. React的组件用法

    React.createClass() 中文翻译 https://discountry.github.io/react/3.4K ( https://doc.react-china.org868 ) ...

  8. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  9. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  10. React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题

    React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...

随机推荐

  1. 2045331 《Java程序设计》第09周学习总结

    2045331 <Java程序设计>第09周学习总结 教材学习内容总结 第十六章 整合数据库 16.1.1JDBC简介 1.JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接 ...

  2. MAC OS X的命令行技巧

    ##透明度#降低透明度defaults write com.apple.universalaccess reduceTransparency -bool true#恢复默认透明度defaults wr ...

  3. Windows Server 2008驱动安装全攻略

    安装设备驱动程序原本是一件非常简单的事情,很多驱动程序在安装的时候我们只要不停单击“下一步”按钮,就能让驱动程序顺利地在对应计算机系统“落户”;不过,当身边的计算机系统升级为Windows Serve ...

  4. .Net HttpClient form-data格式请求

    var multipartFormDataContent = new MultipartFormDataContent(); multipartFormDataContent.Add(new Stri ...

  5. mongodb可视化客户端下载

    网站:https://www.mongodbmanager.com/files/ 直接下载:https://www.mongodbmanager.com/files/mongodbmanagerpro ...

  6. HDU1698 just a Hook - 带有lazy标记的线段树

    2017-08-30 16:44:33 writer:pprp 上午刚刚复习了一下不带有lazy标记的线段树, 下午开始学带有lazy标记的线段树 这个是我看大佬代码敲的,但是出了很多问题, 这提醒我 ...

  7. 「SSH 黑魔法」: 代理、端口转发和 shell 共享

    在好朋友的推荐下,我看了这个视频: The Black Magic Of SSH 这个视频里面,介绍了  ssh 的一些高级应用:结合工作的经历,两类问题会对我们平时的工作帮助很大: 1. 两个人怎么 ...

  8. jQuery获取属性值的方法

    1.利用绑定事件:     $(".callback").on("click","#knbh",function(){      ***** ...

  9. 关于Eclipse SVN 分支 与主干 小结

    SVN建立分支和合并代码 https://blog.csdn.net/luofeixiongsix/article/details/52052631 SVN创建指定版本号的分支 https://blo ...

  10. 一切从Trade开始(转)

    taobao.trades.sold.get 取得交易列表 从店铺取得时间 taobao.shop.get (nick,field)shop.created 循环读取从开店时间到当前时间的所有交易 t ...