react怎么写组件 _组件

1.如何写出漂亮的 react 组件这个是react最新版api，也就是0.14版本做出的改变。
主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。
这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨使用相同的react组件。
新的react包包含了React.createElement,.createClass,ponent,.PropTypes,.children以及其他元素和组件类。这些都是你需要构建组件时助手。
而react-dom包包括ReactDOM.render,.和.findDOMNode 。在 react-dom/server ，有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。
总的来说，两者的区别就是：ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（)来使用。
更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，并将其移动到一个更合适的存储库。
2.如何科学的组织React组件样式React的组件式开发，让我们可以利用其Component Model，专注于单个组件的逻辑开发，其中还包括组织组件的样式。
先声明，本文并不是webpack配置教程，不会介绍详细的配置过程，假设你们已经用过了css-loader style-loaderextract-text-webpack-plugin 。正在使用的方式我们理想中的文件结构可能会是这样的：- components - modal - modal.jsx - modal.css // 可以是任意预处理器 - dropdown - dropdown.jsx - dropdown.css然而，js现在可以做模块化，css并不行，所有css的定义都可以被视为全局变量，在css被打包后，一个组件的样式有可能会影响到其他组件，于是我们可以通过命名约定（name convention）来曲线救国（这一点并不局限于react开发）。
@modal-prefix: modal;[email protected]{modal-prefix} {}[email protected]{modal-prefix}-title {}类似于上面的使用less的方式，在文件顶部先定义个类的前缀，来尽量避免命名冲突的可能。于是在组件中就可以这样做import React from 'react';import './modal.less';export default React.createClass({ render () { return Hello； }}）；上面就是我现在在用的方式，利用命名约定做到了伪模块化（其实即便不是在使用react开发项目，也会用类似的方式）。
CSS in JS之前看到过一个ppt:/vjeux/react-css-in-js，谈到了类似的问题。一个方向是把样式也直接写进组件里，即使用inline style 。
首先，直接用传统的inline style并不可取，它对属性的支持有限，比如不能用伪类、多个不同浏览器前缀的相同属性、媒体查询、动画等。至于重用样式而言，在react中倒是还行：将需要重用的样式对象作为模块导出即可。
其实大家很努力地希望CSS in JS可以实现，比如：react-stylegithub地址它的局限就是上面提到过的属性支持的问题，没有细究这个东西，不太喜欢。local scoped CSS/css-modules/css-modules/webpack/css-loader#local-scope用这个东西现在是webpack官方支持的，已在css-loader中实现，可以真正让你的css代码作为本地声明，类似的代码：// style.css:local(.title) { background: red； }在需要这份样式的组件里引入这个模块：import styles from 'style.css'首先css的语法中是不支持这个：local（)的，我们先看看页面最终的代码：Info到这里应该明白了，其实这也算是个预处理器，它将：local(.title)的类名变成了一个哈希值，仅可以通过模块导入的方式来获取这个哈希值并应用到组件上（生成的类名是可以配置的）。
现在css-loader可以通过添加module选项（详细内容可以参考上面CSS Modules的链接）使得css默认定义的是local scoped的，希望共享的可以用：global（)定义。也可以和预处理器混用：：global { .global-class-name { color: green； }}目前看下来，它只对class名做哈希，也就是说：：local(.title span) // .[hash] span然而：local(.title .name) // .[hash0] .[hash1]这个算是一个有意思的方式，首先它依赖于webpack，而webpack并不局限于React的开发，任何前端项目都可以使用webpack，那么就也都可以使用CSS Modules的概念，不知道这个CSS Modules会有怎么样的发展，感觉可以尝试。