https://blog.wu-boy.com/tags/react/Recent content in React on 小惡魔 - AppleBOYHugoen-usappleboy.tw@gmail.com (Appleboy)appleboy.tw@gmail.com (Appleboy)Thu, 31 Dec 2015 01:26:39 +0000https://blog.wu-boy.com/2015/12/tj-frontend-boilerplate/Thu, 31 Dec 2015 01:26:39 +0000appleboy.tw@gmail.com (Appleboy)https://blog.wu-boy.com/2015/12/tj-frontend-boilerplate/<p><a data-flickr-embed="true" href="https://www.flickr.com/photos/appleboy/13158675193/" title="github-logo"><img src="https://i2.wp.com/farm3.staticflickr.com/2238/13158675193_2892abac95.jpg?resize=500%2C198&#038;ssl=1" alt="github-logo" data-recalc-dims="1" /></a></p> <p>今天突然看到 <a href="https://github.com/tj">TJ</a> 開了一個新 Repo 是 <a href="https://github.com/tj/frontend-boilerplate">frontend boilerplate</a> 嚇到我了，自從 <a href="https://medium.com/@tjholowaychuk/farewell-node-js-4ba9e7f3e52b">TJ 去年發表要轉向 Go</a> 之後，就把他自己很多的 Node.js Project 轉給其他人維護，也漸漸沒在 <a href="https://github.com/">Github</a> 上面活動，但是今天又看到她整理了一份 frontend boilerplate，內容含了現代流行的前端開發工具，大家可以參考看看，是個不錯的 Template:</p> <ul> <li><a href="https://webpack.github.io">Webpack</a></li> <li><a href="https://facebook.github.io/react/">React</a></li> <li><a href="https://github.com/rackt/redux">Redux</a></li> <li><a href="https://babeljs.io/">Babel</a></li> <li><a href="https://github.com/postcss/autoprefixer">Autoprefixer</a></li> <li><a href="https://github.com/postcss/postcss">PostCSS</a></li> <li><a href="https://github.com/outpunk/postcss-modules">CSS modules</a></li> <li><a href="http://simplaio.github.io/rucksack/docs">Rucksack</a></li> <li>Hot reloading</li> <li>Redux router</li> <li>Redux effects</li> <li>TodoMVC example</li> </ul> <p>期待 TJ 能有其他新作品啊。</p>https://blog.wu-boy.com/2015/08/facebook-react-jest-with-webpack/Tue, 11 Aug 2015 03:31:58 +0000appleboy.tw@gmail.com (Appleboy)https://blog.wu-boy.com/2015/08/facebook-react-jest-with-webpack/<div style="margin:0 auto; text-align:center"> <a data-flickr-embed="true" href="https://www.flickr.com/photos/appleboy/19850322514/in/dateposted-public/" title="logo_og"><img src="https://i2.wp.com/farm1.staticflickr.com/462/19850322514_1f88fd5d6c_n.jpg?resize=320%2C320&#038;ssl=1" alt="logo_og" data-recalc-dims="1" /></a> </div> <p>寫 <a href="http://facebook.github.io/react/">Facebook React</a> 就是要搭配 <a href="https://webpack.github.io/">Webpack</a>，Webpack 已經是前端開發的必備工具，要測試 React Component 就是要用 Facebook 開發的 <a href="http://facebook.github.io/jest/">Jest 框架</a>，使用 Webpack 也許會搭配 <a href="http://lesscss.org/">Less</a> or <a href="http://sass-lang.com/">Sass</a> Loader 讓每個 component 都可以獨立有 CSS 檔案。要在 JS 內直接引入 CSS 檔案寫法如下</p> <div> <pre class="brush: jscript; title: ; notranslate" title="">import '!style!css!less!./Schedule.less'; import React, { Component } from 'react';</pre> </div>