react目錄結構
㈠ 怎麼搭建react+webpack的目錄結構
. 為什麼用 webpack? 他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼. 他在很多地方能替代 Grunt 跟 Gulp
㈡ 為什麼ReactJS在中國一點沒有起色
1.安裝node，因為ts的編譯器是js/ts寫的；安裝node後同時獲得npm命令，這是nodejs世界裡的包管理器（也可以看作node的app商店）；2.安裝vs2015或者vscode，當然這不是必須的，但是這里強烈推薦寫ts的工具，vs第一，vsc第二；3.vs自帶了TypeScript（vs2012+，vs2015update1自帶了ts1.7）,最新版本的typescriptforvs去官網下載即可,或者如果不依賴vs（比如mac環境）,可以用命令行裝ts編譯器npmi-gtypescript@next4.安裝了ts後,就會有2個命令可用：tsc和tsd,tsc用來編譯TypeScript代碼,tsd用來下載第三方js類庫的ts定義文件(或者叫頭文件)，熟練使用tsd，工作效率提升，因為減少了80%查文檔的時間，所以寫ts可以說是jser打通了任督二脈，上手任何新的開發環境都很快；5.命令行下載react的ts頭文件,tsdinstallreact-global--save注意上面之所以寫react-global而不是react，因為我們接下來使用比較原始的寫法，直接把React當作全局對象使用，而不作為es6模塊（必須用import引入），不需要Babel編譯也不需要webpack打包；上面執行的tsd命令下載了ReactJS類庫的頭文件,下面用tsc命令創建一個ts項目配置文件tsc--init命令創建了tsconfig.json配置文件,打開該文件增加"jsx":"react",就是自動把tsx變成最終的js,而不是jsx把"outDir":"built",這行去掉,這樣編譯的文件就會在當前目錄輸出"target":"es5",這里es3改成es5,"watch":true是否監聽文件修改如果你用的是vs,這行不重要6.下載reactjs文件，如果沒有安裝bower命令，可以手動去官網下載react類庫bowerinstall--savereact7.以上環境配置好了,開始寫代碼:創建一個demo.tsx文件(注意這里是tsx,不是ts也不是jsx)創建一個demo.html,添加文件的引用8.demo.tsx寫代碼classMyClassextendsReact.Component{render(){returnhello{this.props.name};}}document.addEventListener('DOMContentLoaded',function(){ReactDOM.render(,document.body);});9.如果保存了demo.tsx後,沒有在目錄下發現自動編譯了demo.js,那麼可能是vs沒配置好,如果你沒有裝vs或者vsc,沒關系,在當前文件夾下命令行運行tsctsc命令會自動根據tsconfig.json裡面配置的情況,自動幫你把代碼編譯成js,這是編譯後的js文件10.打開demo.html可以看到效果了;11.至於題主說怎麼學習,其實跟JS完全沒兩樣,上面demo.tsx的代碼,跟react官網的es6寫法一模一樣多了這兩個prop和states類型約束,僅此而已;11.至於題主說怎麼學習,其實跟JS完全沒兩樣,上面demo.tsx的代碼,跟react官網的es6寫法一模一樣多了這兩個prop和states類型約束,僅此而已;12.下班,有空再寫;－－－－－－時間分割－－－－－－13、繼續寫，對1-12進行潤色，轉入傳教模式；以上的代碼，工廠方法在創建子類的同時，做了一些初始化的動作，這與單純的原型繼承不同，所以在使用class方式進行子類繼承，這樣的寫法是無效的；classMyViewextendsReact.Component{render(){returnhello{this.state.name};//會拋異常,因為state是null}//不起作用的getInitialState:(){return{name:'',age:20};}}需要改成如下方式，下面是官網給出的方案（這里TypeScript和ES6情況是一樣的）classMyViewextendsReact.Component{constructor(props,context){super(props,context);this.state={name:'',};}render(){returnhello{this.state.name};}}16、當組件化遇到強類型：從前寫JS組件，一般復用性比較差，基本寫完就仍，原因如下：1）暴露了太多的Dom結構以及別的實現細節；2）命名挫，缺乏可記憶性，本身編程中變數和方法的命名對於碼農來說就是天坑；3）JS天生缺乏私有和公共成員的約束，不加註釋根本不知道怎麼使用該類庫/組件；React解決了把dom標簽暴露出去的問題，TS則解決了語言層面的問題，並提供了強大的重構能力，你根本不需要記住組件的API，因為工具會列出來；
㈢ 如何用reactjs構建一個完整的前端頁面
用reactjs構建一個完整的前端頁面的步驟：
准備：React 的安裝包，建議去官網下載安裝
1、使用 React 的網頁源碼，結構大致如下：
<!DOCTYPE html><html><head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script></head><body> <div id="example"></div> <script type="text/babel"> // **用戶代碼 ** </script></body></html>
上面代碼有兩個地方需要注意。
首先，最後一個<script>標簽的type屬性為text/babel。這是因為 React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上type="text/babel"。
其次，上面代碼一共用了三個庫：react.js、react-dom.js和Browser.js，它們必須首先載入。其中，react.js是 React 的核心庫，react-dom.js是提供與 DOM 相關的功能，Browser.js的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到伺服器完成。
2、將src子目錄的js文件進行語法轉換，轉碼後的文件全部放在build子目錄。
$ babel src --out-dir build
3、渲染轉換成html節點，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
這里以插入hello world為例來說明
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example'));
4、運行結果如下：
㈣ 如何評價 React 實現的前端 UI 庫 material-ui
非常厲害，做一些功能為主，不需要過多品牌調性的 WebApp
只需要前端+交互就可以快速構建做出非常不錯的產品
（icon還是有點點難度，有設計比較專業的人員跟著做產品的質量會更加「產品級」一些）
框架用了很多 MD 的視覺元素，但是還是只是「看著像」，交互，動畫世界觀之類的實現距離最理想的 MD 還是有差距，不過基本感覺可以忽略不計。
非要挑刺的話，就是 Menu 部分的動畫設計感覺有點粗糙，做得不夠好（MD 的世界觀，所有東西的誕生都是「擴散」出來，而不是「縮放」出來的，還有就是先「慢_快」的緩動做得還是差一點點）
㈤ 如何使用 ES6 編寫一個 React 模塊，並且編譯後發布到 NPM
前言
如果你在使用 React， 那麼肯定已經擼了好多自己的組件， 並嘗試著共享出來。在 OneAPM 前端開發過程中， 我們也曾遇到了一些組件共享的問題：
例如:
是通過 git 直接發布還是通過 NPM 發布 ？
發布的是 ES5 的代碼還是 ES6 的代碼 ？
如何解決 Babel5 和 Babel6 的沖突 ？
這篇文章會通過編寫一個叫做 MyComponet 的例子來演示發布一個模塊需要注意的地方, 並不涉及單元測試和代碼規范等。
前端開發果真是發展迅猛，剛享受到由模塊化，組件化和單元測試帶來的種種好處，又得迅速擁抱 Grunt, Gulp, Browserify， Webpack 這類自動化工具的變革。除了工具和生態圈，JavaScript 本身也在飛速發展著。ES2015(ES6) ，ES2016(ES7) ... 照這樣的節奏，幾乎是一年一個標准。標准多了，為解決兼容性的問題，竟也派生出了 源代碼 和 編譯 的概念。前端開發者通過語法糖、轉化器、Polyfill 等，可以享受到標准乃至尚未定稿草案里的規范的便利，大幅提升開發效率。
至於這個模塊本身,它的功能特別簡單, 就是顯示模塊自身的的屬性。
源代碼
我們來編寫組件 MyComponent.jsx ，放到項目的 src 目錄下。
import React from 'react';
const MyComponent = props=> {
return <div>
props:
<pre>{JSON.stringify(props, null, 2)}</pre>
</div>
}
export default MyComponent;
關於各種文件放在哪裡, 這里是我推薦的一些約定:
src 下用於存放源代碼
lib 是編譯後的代碼，這個目錄只讀
所有包含 ES6 語法的文件名統一後綴為 .es6
所有包含 JSX 語法的文件後統一綴名為 .jsx
假設源代碼里還有另外兩個文件 foo.es6 和 bar.js，簡化起見都丟到 src 的根目錄下。
編譯
為了把 ES6 代碼編譯成 ES5，需要安裝 Babel，這個工具可以說野心極大，一次編譯可以讓 JavaScript 運行在所有地方。（聽起來是不是有點 Java 的作風）
目前最常用的是 Babel5 版本，但是 Babel6 版本的設計更為精巧，已經非常推薦更新。也正是由於 Babel 有兩個版本，所以開發過程中很有可能遇到這樣的情況，
模塊 A 的開發依賴於 Babel5 版本，而模塊 B 依賴於 Babel6 版本。
解決這個問題最好的做法就是把 A 和 B 拆開，獨立開發和發布。並且在發布到 NPM 的時候發布是的編譯後的，也就是 ES5 版本的代碼。
所以如果你的機器上的 babel 是全局安裝的，是時候卸載它了，因為它的版本不是 5 就是 6 ，會導致一些不可預見的問題。
npm uninstall babel-cli --global
正確的安裝方式是把 babel-cli 作為 develeopment 的依賴
npm install babel-cli --save-dev
使用的時候並不是直接調用全局的 Babel 而是調用依賴里的 Babel 可執行文件
./node_moles/.bin/babel
如果按照前文的約定來組織代碼，src 目錄結構看起來是這樣的
src
├── bar.js
├── foo.es6
└── MyComponent.jsx
模塊所有的代碼都在一個目錄下，這樣編譯過程就簡單多了，兩條命令就可以完成
./node_moles/.bin/rimraf lib
./node_moles/.bin/babel src ---files --source-maps --extensions .es6,.es,.jsx --out-dir lib
輸出目錄的結構
lib
├── bar.js
├── foo.js
├── foo.js.map
├── MyComponent.js
└── MyComponent.js.map
具體解釋一下各個命令的作用：
第一條命令 ./node_moles/.bin/rimraf lib
作用 編譯前清空之前的 lib 目錄，這是一個好習慣，可以杜絕對 lib 下的文件的任何手動更改。
第二條命令
./node_moles/.bin/babel src --out-dir lib --source-maps --extensions .es6,.es,.jsx ---files
作用 遍歷 src 目錄下的文件，如果後綴名是 .es/.es6/.jsx 中的一種，就編譯成 ES5，否則就直接拷貝到輸出目錄 lib 下
參數詳解:
--out-dir lib 指定輸出目錄為 lib
--extensions .es6,.es,.jsx 指定需要編譯的文件類型
---files 對於不需要編譯的文件直接拷貝
--source-maps 生成 souce-map 文件
編譯過程中還隱含了一個步驟就是載入 .babelrc 文件里的配置，該文件內容如下
{
"presets": [
"es2015",
"stage-0",
"react"
]
}
這是因為 Babel6 採用了插件化的設計，做到了靈活配置：如果要轉換 JSX 語法文件，就加上 react 的 preset，同時項目依賴里要添加
babel-preset-react
npm install babel-preset-react --save-dev
樣例代碼
開發和調試 React 模塊目前最好用的打包工具還是 Webpack，在項目跟目錄下，新建一個 example 目錄：
example/index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body></body>
<script src="bundle.js"></script>
</html>
example/src/index.jsx
import React from 'react';
import MyComponent,{foo,bar} from '../../';
import {render} from 'react-dom';
var element = document.createElement("div");
document.body.appendChild(element);
render(<MyComponent name="myComponent"/>, element);
webpack.config.js
var path = require('path');
mole.exports = {
entry: path.join(__dirname, 'example', 'src', 'index.jsx'),
output: {
filename: 'bundle.js'
},
mole: {
loaders: [{
test: /\.jsx$/,
loader: 'babel',
include: [
path.join(__dirname, 'example')
]
}]
},
devServer: {
contentBase: path.join(__dirname, 'example')
}
}
運行樣例代碼
./node_moles/.bin/webpack-dev-server
發布
發布前，還有一件事就是為你的模塊添加一個入口文件 index.js
mole.exports = require('./lib/MyComponent');
exports.default = require('./lib/MyComponent');
exports.bar = require('./lib/bar');
exports.foo = require('./lib/foo');
接下來就是發布到 NPM 了。
npm publish
使用
別的開發者在使用你新發布的模塊的時候可以這樣導入
import MyComponent,{foo,bat} from 'react-component-example'
導入的直接是 ES5 代碼，跳過編譯從而避免了出現 Babel 版本不一致的問題，並且速度更快，是不是很棒！
不過假設你的模塊包含很多組件，開發者可能只想用其中的一個或某幾個，這時可以這樣導入：
import MyComponent from 'react-component-example/src/MyComponent.jsx'
導入的是 ES6 代碼，並且會被加入父級項目的編譯過程。
㈥ vs code編寫React，什麼插件能做到輸入標簽名，然後按tab鍵就能自動展開
jQuery Tag標簽輸入插件 tagEditor是一款非常強大的tag標簽編輯插件，能方便的創建出一個tab輸入框，支持回車鍵輸入tag，支持刪除鍵刪除tag，點擊tag可再次編輯，結合jQuery UI autocomplete插件可實現下拉聯想輸入效果。
㈦ 如何合理布置React/Rex的目錄結構
通常的情況是：寫游戲的人非常容易接受React的模式，寫伺服器端的非常容易接受Angular的模式 但是兩者相比React會更容易上手； 為啥ionic的項目用React就很難下手了？ 因為之前ionic的各種組件都寫好了呀，各種拼裝就是了，而用React重構各種組。
㈧ react可以在eclipse操作么
react完全可以和jQuery，bootstrap等庫整合使用，因為react本身就是js，js跟html和其他js當然能一起使用，react特殊的地方在於render()渲染方式的改變，生成一個虛擬dom，所以就有了5大類的生命周期，render裡面的代碼仍舊是純html標簽，跟最簡單的那種寫法是一樣的，有id和class屬性等。去找個簡單的helloworld例子看一下代碼結構就理解了
㈨ 如何合理布置React/Rex的目錄結構
這種結構諧在讓程序更容易擴展
├── src # 程序源文件
│ ├── main.js # 程序啟動和渲染
│ ├── components # 全局可復用的表現組件(Presentational Components)
│ ├── containers # 全局可復用的容器組件
│ ├── layouts # 主頁結構
│ ├── store # Rex指定塊
│ │ ├── createStore.js # 創建和使用rex store
│ │ └── recers.js # Recer注冊和注入
│ └── routes # 主路由和非同步分割點
│ ├── index.js # 用store啟動主程序路由
│ ├── Root.js # 為上下文providers包住組件
│ └── Home # 不規則路由
│ ├── index.js # 路由定義和代碼非同步分割
│ ├── assets # 組件引入的靜態資源
│ ├── components # 直觀React組件
│ ├── container # 連接actions和store
│ ├── moles # recers/constants/actions的集合
│ └── routes ** # 不規則子路由(** 可選擇的)
routes 作為主入口。
export const createRoutes = (store) => ({
path: '/',
component: CoreLayout,
indexRoute: Home,
childRoutes: [
CounterRoute(store),
ZenRoute(store),
ElapseRoute(store),
RouteRoute(store),
PageNotFound(),
Redirect
]
})
一個Counter 模塊包含了自身的assets，components，containers
Counter/
components/ # 頁面的組件
containers/ # view 和 moles 數據對接
moles/ # 包含對應的 recer, action
index.js # 頁面入口，定義path
index.js 自動的注入recer 到store，這樣在頂層的store就無需要手動去整合每個模塊自身的recer。代碼如下：
// 導入對應的redicer
const recer = require('./moles/counter').default
/* Add the recer to the store on key 'counter' */
injectRecer(store, { key: 'counter', recer })