react開發怎麼做佈局寫樣式|react怎麼寫行內樣式

、rn的佈局

rn的佈局是完全是用flex來實現。使用flex來進行佈局是多麼讓人爽心悅目的一件事，按照設計圖來實現一個頁面是很容易的事情，寫過pc端佈局轉向寫rn的佈局的童鞋，這種感覺更有強烈（個人YY的哈）；用flex解決pc端的垂直居中的問題真是小菜一碟啊；

flex的用法就不多說了，具體可參考阮一峯老師的這篇文章《flex佈局：語法篇》，裏面對flex的講解非常詳細；

需要注意的是：rn中的flex的相關屬性不是完全依照w3c規範提供的各種值，對其中的某些屬性值進行了閹割，下面就借用《React-Native樣式指南》中內容說明一下：

、rn的佈局

rn的佈局是完全是用flex來實現。使用flex來進行佈局是多麼讓人爽心悅目的一件事，按照設計圖來實現一個頁面是很容易的事情，寫過pc端佈局轉向寫rn的佈局的童鞋，這種感覺更有強烈（個人YY的哈）；用flex解決pc端的垂直居中的問題真是小菜一碟啊；

flex的用法就不多說了，具體可參考阮一峯老師的這篇文章《flex佈局：語法篇》，裏面對flex的講解非常詳細；

需要注意的是：rn中的flex的相關屬性不是完全依照w3c規範提供的各種值，對其中的某些屬性值進行了閹割，下面就借用《React-Native樣式指南》中內容說明一下：

直接在標籤上寫style 或 定義一個對象寫好樣式然後賦值給style屬性 記得大小寫透過import css|scss|sass 檔案形式 使用方面跟html一樣只是class要寫成className 然後將定義好的樣式名填進去即可如果項目使用create-react-app的話，還可以使用另一種方法 樣式檔案名需要XXX.module.(s|sa|c)ss，使用的話像這樣 import style from '你的樣式檔案目錄'demo 這樣有點一好處就是不會造成樣式重複問題，他在打包過程中會將className中的名稱混淆。

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;.@{modal-prefix} {}.@{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會有怎麼樣的發展，感覺可以嘗試。

這裏是一個使用樣例：/css-modules/webpack-demo寫在最後的話目前的探索結果暫時是這樣，之後可能會繼續來填坑。反正現在應該不會去用CSS in JS,CSS Modules可以一試，因爲css-loader這個插件基本react的項目裏都會使用，寫好的組件一個import， 樣式和組件都有了，不過仍需實踐。

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;.@{modal-prefix} {}.@{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會有怎麼樣的發展，感覺可以嘗試。

這裏是一個使用樣例：/css-modules/webpack-demo寫在最後的話目前的探索結果暫時是這樣，之後可能會繼續來填坑。反正現在應該不會去用CSS in JS,CSS Modules可以一試，因爲css-loader這個插件基本react的項目裏都會使用，寫好的組件一個import， 樣式和組件都有了，不過仍需實踐。

這個是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包添加的非必要的代碼，並將其移動到一個更合適的存儲庫。