React實踐筆記 Quick Start

基本的react的頁面形式如下所示：

src="../build/react.js">
script>
src="../build/jsxtransformer.js">
script>
head>
id="example">
div>
type="text/jsx">
// ** our code goes here! **
script>
body>
html>

var hellomessage = react.createclass(div>;

}});
react.render(
name="john" />,
document.getelementbyid('container')
);

class examplecomponent extends react.component 

// ...
}

參考資料

webpack是乙個非常強大依賴管理與打包工具，其基本的配置方式可以如下：

var path = require('path');

var node_modules = path.resolve(__dirname, 'node_modules');
var pathtoreact = path.resolve(node_modules, 'react/dist/react.min.js');
config = 
},output: ,
module: ],
noparse: [pathtoreact]
} 
};module.exports = config;

config/  

webpack.js (js config over json -> flexible)
src/ 
components/
__tests__ (jest test folder)
cart.jsx
item.jsx
styles/
scripts/
client.js
index.html
server/
index.js
server.js
.gitignore
.jshintrc
package.json 
readme.md

refactoring-react-components-to-es6-classes

es6是一門非常讓人興奮的語言，而react自身的譬如jsx這樣的語法也是別具特色，筆者一貫堅持從現在開始就廣泛使用es6。而在react的實踐程式設計中，如果需要完全使用es6語法進行開發，需要注意以下幾點。

var examplecomponent = react.createclass(>hello, world.div>;

}, _handleclick: function
() });

class examplecomponent extends react.component 

render() >hello, world.div>;
} _handleclick() 
}

如果使用createclass方法建立乙個component元件，可以自動呼叫它的getinitialstate方法來獲取初始化的state物件，但是在es6的class中並不會如此自動呼叫，因此，要稍作修改。

class examplecomponent extends react.component 

constructor() 
// ...
}

class examplecomponent extends react.component 

// ...
}

mixin是react中非常好用的乙個功能，但是es6提倡的物件導向，即使用類繼承等方式來進行傳遞。如果需要在es6中繼續使用mixin，特別是大量現存的react library中的mixin功能，可以有以下幾種方式：

React 實踐專案 （四）

react在github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習react也有一段時間了，現在就開始用 react redux 進行實戰！上回說到使用redux saga 管理 redux 應用非同步操作,應用還是只有乙個首頁.現在開始構建乙個新的投稿頁面並使用 r...

React 實踐專案 （四）

react在github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習react也有一段時間了，現在就開始用 react redux 進行實戰！上回說到使用redux saga 管理 redux 應用非同步操作,應用還是只有乙個首頁.現在開始構建乙個新的投稿頁面並使用 r...

react 微前端實踐

最近花時間實踐了一下阿里 qiankun 微前端框架 主應用和子應用都使用react 實現，主應用伺服器使用golang語言 go chi框架實現，子應用實現簡單的對接，主應用配置好路由就可以訪問 專案還在持續完善中,專案實現目標 主應用只負責選單，使用者，路由，許可權管理等 子應用各司其責，熱插拔...