├── README.md ├── React 練習案例 └── README.md ├── ReactNative 第二篇 練習狂想曲 └── README.md ├── ReactNative 練習案例 └── README.md ├── ReactWeb 練習案例 ├── day1 │ ├── .babelrc │ ├── .editorconfig │ ├── .eslintrc │ ├── .gitignore │ ├── .yo-rc.json │ ├── README.md │ ├── cfg │ │ ├── base.js │ │ ├── defaults.js │ │ ├── dev.js │ │ ├── dist.js │ │ └── test.js │ ├── dist │ │ └── README.md │ ├── karma.conf.js │ ├── package.json │ ├── server.js │ ├── src │ │ ├── actions │ │ │ └── README.md │ │ ├── components │ │ │ └── Main.js │ │ ├── config │ │ │ ├── README.md │ │ │ ├── base.js │ │ │ ├── dev.js │ │ │ ├── dist.js │ │ │ └── test.js │ │ ├── favicon.ico │ │ ├── images │ │ │ └── yeoman.png │ │ ├── index.html │ │ ├── index.js │ │ ├── sources │ │ │ └── README.md │ │ ├── stores │ │ │ └── README.md │ │ └── styles │ │ │ └── App.css │ ├── test │ │ ├── actions │ │ │ └── .keep │ │ ├── components │ │ │ └── MainTest.js │ │ ├── config │ │ │ └── ConfigTest.js │ │ ├── helpers │ │ │ └── shallowRenderHelper.js │ │ ├── loadtests.js │ │ ├── sources │ │ │ └── .keep │ │ └── stores │ │ │ └── .keep │ └── webpack.config.js └── day2 │ └── mytest │ ├── .gitignore │ ├── gulpfile.js │ ├── package.json │ └── src │ ├── app.jsx │ ├── helpers.js │ ├── index.html │ ├── pages │ └── HomePage │ │ ├── __tests__ │ │ └── index.js │ │ ├── index.js │ │ └── style.less │ └── style │ ├── README.md │ └── main.less ├── Reactjs 第一篇 攻略篇 └── README.md ├── 其他線上讀書會 └── README.md ├── 讀書會注意事項 └── README.md └── 讀書會過往影片及討論區 └── README.md /README.md: -------------------------------------------------------------------------------- 1 | # 歡迎大家加入線上reactjs讀書會 2 | 3 | ## [讀書會注意事項](https://github.com/onlinereadbook/bookreactjs/tree/master/%E8%AE%80%E6%9B%B8%E6%9C%83%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85) 4 | 5 | ## [讀書會過往影片及討論區](https://github.com/onlinereadbook/bookreactjs/tree/master/%E8%AE%80%E6%9B%B8%E6%9C%83%E9%81%8E%E5%BE%80%E5%BD%B1%E7%89%87%E5%8F%8A%E8%A8%8E%E8%AB%96%E5%8D%80) 6 | 7 | ## [其他線上讀書會](https://github.com/onlinereadbook/bookreactjs/tree/master/其他線上讀書會) 8 | 9 | ## [主線攻略JsonGithubTodoList](http://goo.gl/VxQ0ab) 10 | 11 | --- 12 | 13 | ## 常用工具 14 | 15 | - [HackMD - jacky大教學](https://www.youtube.com/watch?v=8maKJ6CJ9no) 16 | 17 | ## 會友幫幫忙活動 18 | 19 | ``` 20 | 遇到問題社團上無法解開時, 可聯絡版主招開幫幫忙活動 21 | 22 | 苦主要先講解目前製作寫程式的過程, 讓大家進入狀況後一起攻略問題 23 | 24 | 一方面讓會友知道業界的開發流程levelup, 另一方面也可以攻略問題 25 | ``` 26 | ## Redux 相關 27 | 28 | ### Redux Saga 資源 : 29 | 30 | 1. [官方英文文檔](https://goo.gl/842OA0) 31 | 32 | 2. [官方中文文檔](https://goo.gl/C8lJRy) 33 | 34 | 3. [Saga Pattern 在前端的應用](https://goo.gl/SeSJDc) 35 | 36 | 4. [Handling async in Redux with Sagas](https://goo.gl/RFN4vH) 37 | 38 | 5. [Build an Image Gallery Using React, Redux and redux-saga](https://goo.gl/40e2e1) 39 | 40 | 6. [Using redux-saga To Simplify Your Codebase](https://goo.gl/Kkf3fy) 41 | 42 | 7. [Using redux-saga To Simplify Your Codebase 中文版](https://goo.gl/T9JdqY) 43 | 44 | 8. [redux-sagaで非同期処理と戦う (日文)](https://goo.gl/NPyYsE) 45 | 46 | ### 補充 : 47 | 48 | 1. [Generator 函数](https://goo.gl/jkJ1TF) 49 | 50 | ## 願望清單 51 | 52 | - * 有想聽的主題一樣開Issues 會幫忙試試看去邀約 53 | -------------------------------------------------------------------------------- /React 練習案例/README.md: -------------------------------------------------------------------------------- 1 | # React 練習案例 2 | 3 | | 練習 | 解答 | 4 | | ----- | ----- | 5 | | [Level 24. 讓 React 應用連結 Redux 系統](https://goo.gl/P58rVn) | [傳送門](https://goo.gl/jLq5CP) | 6 | -------------------------------------------------------------------------------- /ReactNative 第二篇 練習狂想曲/README.md: -------------------------------------------------------------------------------- 1 | # 神秘ＣＣ ReactNative 練習狂想曲 2 | 3 | B組是攻略 4 | -------------------------------------------------------------------------------- /ReactNative 練習案例/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlinereadbook/bookreactjs/40b3b073dc8b9d8c645a08481e4d3d6600c0016c/ReactNative 練習案例/README.md -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": [ 4 | "react" 5 | ], 6 | "parserOptions": { 7 | "ecmaVersion": 6, 8 | "sourceType": "module", 9 | "ecmaFeatures": { 10 | "jsx": true 11 | } 12 | }, 13 | "env": { 14 | "browser": true, 15 | "amd": true, 16 | "es6": true, 17 | "node": true, 18 | "mocha": true 19 | }, 20 | "rules": { 21 | "comma-dangle": 1, 22 | "quotes": [ 1, "single" ], 23 | "no-undef": 1, 24 | "global-strict": 0, 25 | "no-extra-semi": 1, 26 | "no-underscore-dangle": 0, 27 | "no-console": 1, 28 | "no-unused-vars": 1, 29 | "no-trailing-spaces": [1, { "skipBlankLines": true }], 30 | "no-unreachable": 1, 31 | "no-alert": 0, 32 | "react/jsx-uses-react": 1, 33 | "react/jsx-uses-vars": 1 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | # Bower 30 | bower_components/ 31 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-react-webpack": {} 3 | } -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/README.md: -------------------------------------------------------------------------------- 1 | 2 | 新增兩個全域指令 3 | npm install -g yo 4 | npm install -g generator-react-webpack 5 | 在進入專案目錄 6 | mkdir my-new-project && cd my-new-project 7 | 使用yo react-webpack 8 | yo react-webpack -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/cfg/base.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let path = require('path'); 3 | let defaultSettings = require('./defaults'); 4 | 5 | // Additional npm or bower modules to include in builds 6 | // Add all foreign plugins you may need into this array 7 | // @example: 8 | // let npmBase = path.join(__dirname, '../node_modules'); 9 | // let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ]; 10 | let additionalPaths = []; 11 | 12 | module.exports = { 13 | additionalPaths: additionalPaths, 14 | port: defaultSettings.port, 15 | debug: true, 16 | devtool: 'eval', 17 | output: { 18 | path: path.join(__dirname, '/../dist/assets'), 19 | filename: 'app.js', 20 | publicPath: defaultSettings.publicPath 21 | }, 22 | devServer: { 23 | contentBase: './src/', 24 | historyApiFallback: true, 25 | hot: true, 26 | port: defaultSettings.port, 27 | publicPath: defaultSettings.publicPath, 28 | noInfo: false 29 | }, 30 | resolve: { 31 | extensions: ['', '.js', '.jsx'], 32 | alias: { 33 | actions: `${defaultSettings.srcPath}/actions/`, 34 | components: `${defaultSettings.srcPath}/components/`, 35 | sources: `${defaultSettings.srcPath}/sources/`, 36 | stores: `${defaultSettings.srcPath}/stores/`, 37 | styles: `${defaultSettings.srcPath}/styles/`, 38 | config: `${defaultSettings.srcPath}/config/` + process.env.REACT_WEBPACK_ENV 39 | } 40 | }, 41 | module: {} 42 | }; 43 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/cfg/defaults.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Function that returns default values. 3 | * Used because Object.assign does a shallow instead of a deep copy. 4 | * Using [].push will add to the base array, so a require will alter 5 | * the base array output. 6 | */ 7 | 'use strict'; 8 | 9 | const path = require('path'); 10 | const srcPath = path.join(__dirname, '/../src'); 11 | const dfltPort = 8000; 12 | 13 | /** 14 | * Get the default modules object for webpack 15 | * @return {Object} 16 | */ 17 | function getDefaultModules() { 18 | return { 19 | preLoaders: [ 20 | { 21 | test: /\.(js|jsx)$/, 22 | include: srcPath, 23 | loader: 'eslint-loader' 24 | } 25 | ], 26 | loaders: [ 27 | { 28 | test: /\.css$/, 29 | loader: 'style-loader!css-loader' 30 | }, 31 | { 32 | test: /\.sass/, 33 | loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax' 34 | }, 35 | { 36 | test: /\.scss/, 37 | loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded' 38 | }, 39 | { 40 | test: /\.less/, 41 | loader: 'style-loader!css-loader!less-loader' 42 | }, 43 | { 44 | test: /\.styl/, 45 | loader: 'style-loader!css-loader!stylus-loader' 46 | }, 47 | { 48 | test: /\.(png|jpg|gif|woff|woff2)$/, 49 | loader: 'url-loader?limit=8192' 50 | }, 51 | { 52 | test: /\.(mp4|ogg|svg)$/, 53 | loader: 'file-loader' 54 | } 55 | ] 56 | }; 57 | } 58 | 59 | module.exports = { 60 | srcPath: srcPath, 61 | publicPath: '/assets/', 62 | port: dfltPort, 63 | getDefaultModules: getDefaultModules 64 | }; 65 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/cfg/dev.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let path = require('path'); 4 | let webpack = require('webpack'); 5 | let baseConfig = require('./base'); 6 | let defaultSettings = require('./defaults'); 7 | 8 | // Add needed plugins here 9 | let BowerWebpackPlugin = require('bower-webpack-plugin'); 10 | 11 | let config = Object.assign({}, baseConfig, { 12 | entry: [ 13 | 'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port, 14 | 'webpack/hot/only-dev-server', 15 | './src/index' 16 | ], 17 | cache: true, 18 | devtool: 'eval-source-map', 19 | plugins: [ 20 | new webpack.HotModuleReplacementPlugin(), 21 | new webpack.NoErrorsPlugin(), 22 | new BowerWebpackPlugin({ 23 | searchResolveModulesDirectories: false 24 | }) 25 | ], 26 | module: defaultSettings.getDefaultModules() 27 | }); 28 | 29 | // Add needed loaders to the defaults here 30 | config.module.loaders.push({ 31 | test: /\.(js|jsx)$/, 32 | loader: 'react-hot!babel-loader', 33 | include: [].concat( 34 | config.additionalPaths, 35 | [ path.join(__dirname, '/../src') ] 36 | ) 37 | }); 38 | 39 | module.exports = config; 40 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/cfg/dist.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let path = require('path'); 4 | let webpack = require('webpack'); 5 | 6 | let baseConfig = require('./base'); 7 | let defaultSettings = require('./defaults'); 8 | 9 | // Add needed plugins here 10 | let BowerWebpackPlugin = require('bower-webpack-plugin'); 11 | 12 | let config = Object.assign({}, baseConfig, { 13 | entry: path.join(__dirname, '../src/index'), 14 | cache: false, 15 | devtool: 'sourcemap', 16 | plugins: [ 17 | new webpack.optimize.DedupePlugin(), 18 | new webpack.DefinePlugin({ 19 | 'process.env.NODE_ENV': '"production"' 20 | }), 21 | new BowerWebpackPlugin({ 22 | searchResolveModulesDirectories: false 23 | }), 24 | new webpack.optimize.UglifyJsPlugin(), 25 | new webpack.optimize.OccurenceOrderPlugin(), 26 | new webpack.optimize.AggressiveMergingPlugin(), 27 | new webpack.NoErrorsPlugin() 28 | ], 29 | module: defaultSettings.getDefaultModules() 30 | }); 31 | 32 | // Add needed loaders to the defaults here 33 | config.module.loaders.push({ 34 | test: /\.(js|jsx)$/, 35 | loader: 'babel', 36 | include: [].concat( 37 | config.additionalPaths, 38 | [ path.join(__dirname, '/../src') ] 39 | ) 40 | }); 41 | 42 | module.exports = config; 43 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/cfg/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let path = require('path'); 4 | let srcPath = path.join(__dirname, '/../src/'); 5 | 6 | let baseConfig = require('./base'); 7 | 8 | // Add needed plugins here 9 | let BowerWebpackPlugin = require('bower-webpack-plugin'); 10 | 11 | module.exports = { 12 | devtool: 'eval', 13 | module: { 14 | preLoaders: [ 15 | { 16 | test: /\.(js|jsx)$/, 17 | loader: 'isparta-instrumenter-loader', 18 | include: [ 19 | path.join(__dirname, '/../src') 20 | ] 21 | } 22 | ], 23 | loaders: [ 24 | { 25 | test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/, 26 | loader: 'null-loader' 27 | }, 28 | { 29 | test: /\.(js|jsx)$/, 30 | loader: 'babel-loader', 31 | include: [].concat( 32 | baseConfig.additionalPaths, 33 | [ 34 | path.join(__dirname, '/../src'), 35 | path.join(__dirname, '/../test') 36 | ] 37 | ) 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | extensions: [ '', '.js', '.jsx' ], 43 | alias: { 44 | actions: srcPath + 'actions/', 45 | helpers: path.join(__dirname, '/../test/helpers'), 46 | components: srcPath + 'components/', 47 | sources: srcPath + 'sources/', 48 | stores: srcPath + 'stores/', 49 | styles: srcPath + 'styles/', 50 | config: srcPath + 'config/' + process.env.REACT_WEBPACK_ENV 51 | } 52 | }, 53 | plugins: [ 54 | new BowerWebpackPlugin({ 55 | searchResolveModulesDirectories: false 56 | }) 57 | ] 58 | }; 59 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/dist/README.md: -------------------------------------------------------------------------------- 1 | # About the dist folder 2 | After building the dist version of your project, the generated files are stored in this folder. You should keep it under version control. 3 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/karma.conf.js: -------------------------------------------------------------------------------- 1 | var webpackCfg = require('./webpack.config'); 2 | 3 | // Set node environment to testing 4 | process.env.NODE_ENV = 'test'; 5 | 6 | module.exports = function(config) { 7 | config.set({ 8 | basePath: '', 9 | browsers: [ 'PhantomJS' ], 10 | files: [ 11 | 'test/loadtests.js' 12 | ], 13 | port: 8000, 14 | captureTimeout: 60000, 15 | frameworks: [ 'mocha', 'chai' ], 16 | client: { 17 | mocha: {} 18 | }, 19 | singleRun: true, 20 | reporters: [ 'mocha', 'coverage' ], 21 | preprocessors: { 22 | 'test/loadtests.js': [ 'webpack', 'sourcemap' ] 23 | }, 24 | webpack: webpackCfg, 25 | webpackServer: { 26 | noInfo: true 27 | }, 28 | coverageReporter: { 29 | dir: 'coverage/', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text' } 33 | ] 34 | } 35 | }); 36 | }; 37 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "version": "0.0.1", 4 | "description": "YOUR DESCRIPTION - Generated by generator-react-webpack", 5 | "main": "", 6 | "scripts": { 7 | "clean": "rimraf dist/*", 8 | "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist", 9 | "dist": "npm run copy & webpack --env=dist", 10 | "lint": "eslint ./src", 11 | "posttest": "npm run lint", 12 | "release:major": "npm version major && npm publish && git push --follow-tags", 13 | "release:minor": "npm version minor && npm publish && git push --follow-tags", 14 | "release:patch": "npm version patch && npm publish && git push --follow-tags", 15 | "serve": "node server.js --env=dev", 16 | "serve:dist": "node server.js --env=dist", 17 | "start": "node server.js --env=dev", 18 | "test": "karma start", 19 | "test:watch": "karma start --autoWatch=true --singleRun=false" 20 | }, 21 | "repository": "", 22 | "keywords": [], 23 | "author": "Your name here", 24 | "devDependencies": { 25 | "babel-core": "^6.0.0", 26 | "babel-eslint": "^6.0.0", 27 | "babel-loader": "^6.0.0", 28 | "babel-polyfill": "^6.3.14", 29 | "babel-preset-es2015": "^6.0.15", 30 | "babel-preset-react": "^6.0.15", 31 | "babel-preset-stage-0": "^6.5.0", 32 | "bower-webpack-plugin": "^0.1.9", 33 | "chai": "^3.2.0", 34 | "copyfiles": "^1.0.0", 35 | "css-loader": "^0.23.0", 36 | "eslint": "^3.0.0", 37 | "eslint-loader": "^1.0.0", 38 | "eslint-plugin-react": "^6.0.0", 39 | "file-loader": "^0.9.0", 40 | "glob": "^7.0.0", 41 | "isparta-instrumenter-loader": "^1.0.0", 42 | "karma": "^1.0.0", 43 | "karma-chai": "^0.1.0", 44 | "karma-coverage": "^1.0.0", 45 | "karma-mocha": "^1.0.0", 46 | "karma-mocha-reporter": "^2.0.0", 47 | "karma-phantomjs-launcher": "^1.0.0", 48 | "karma-sourcemap-loader": "^0.3.5", 49 | "karma-webpack": "^1.7.0", 50 | "minimist": "^1.2.0", 51 | "mocha": "^3.0.0", 52 | "null-loader": "^0.1.1", 53 | "open": "0.0.5", 54 | "phantomjs-prebuilt": "^2.0.0", 55 | "react-addons-test-utils": "^15.0.0", 56 | "react-hot-loader": "^1.2.9", 57 | "rimraf": "^2.4.3", 58 | "style-loader": "^0.13.0", 59 | "url-loader": "^0.5.6", 60 | "webpack": "^1.12.0", 61 | "webpack-dev-server": "^1.12.0" 62 | }, 63 | "dependencies": { 64 | "core-js": "^2.0.0", 65 | "normalize.css": "^4.0.0", 66 | "react": "^15.0.0", 67 | "react-dom": "^15.0.0" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/server.js: -------------------------------------------------------------------------------- 1 | /*eslint no-console:0 */ 2 | 'use strict'; 3 | require('core-js/fn/object/assign'); 4 | const webpack = require('webpack'); 5 | const WebpackDevServer = require('webpack-dev-server'); 6 | const config = require('./webpack.config'); 7 | const open = require('open'); 8 | 9 | new WebpackDevServer(webpack(config), config.devServer) 10 | .listen(config.port, 'localhost', (err) => { 11 | if (err) { 12 | console.log(err); 13 | } 14 | console.log('Listening at localhost:' + config.port); 15 | console.log('Opening your system browser...'); 16 | open('http://localhost:' + config.port + '/webpack-dev-server/'); 17 | }); 18 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/actions/README.md: -------------------------------------------------------------------------------- 1 | # About this folder 2 | This folder will hold all of your **flux** actions if you are using flux. 3 | You can include actions into your components or stores like this: 4 | 5 | ```javascript 6 | let react = require('react/addons'); 7 | let MyAction = require('actions/MyAction'); 8 | class MyComponent extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | MyAction.exampleMethod(); 12 | } 13 | } 14 | ``` 15 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/components/Main.js: -------------------------------------------------------------------------------- 1 | require('normalize.css/normalize.css'); 2 | require('styles/App.css'); 3 | 4 | import React from 'react'; 5 | 6 | let yeomanImage = require('../images/yeoman.png'); 7 | 8 | class AppComponent extends React.Component { 9 | render() { 10 | return ( 11 |
12 | Yeoman Generator 13 |
Please edit src/components/Main.js to get started!
14 |
15 | ); 16 | } 17 | } 18 | 19 | AppComponent.defaultProps = { 20 | }; 21 | 22 | export default AppComponent; 23 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/config/README.md: -------------------------------------------------------------------------------- 1 | # About this folder 2 | This folder holds configuration files for different environments. 3 | You can use it to provide your app with different settings based on the 4 | current environment, e.g. to configure different API base urls depending on 5 | whether your setup runs in dev mode or is built for distribution. 6 | You can include the configuration into your code like this: 7 | 8 | ```javascript 9 | let react = require('react/addons'); 10 | let config = require('config'); 11 | class MyComponent extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | let currentAppEnv = config.appEnv; 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/config/base.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Settings configured here will be merged into the final config object. 4 | export default { 5 | } 6 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/config/dev.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import baseConfig from './base'; 4 | 5 | let config = { 6 | appEnv: 'dev' // feel free to remove the appEnv property here 7 | }; 8 | 9 | export default Object.freeze(Object.assign({}, baseConfig, config)); 10 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/config/dist.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import baseConfig from './base'; 4 | 5 | let config = { 6 | appEnv: 'dist' // feel free to remove the appEnv property here 7 | }; 8 | 9 | export default Object.freeze(Object.assign({}, baseConfig, config)); 10 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/config/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import baseConfig from './base'; 4 | 5 | let config = { 6 | appEnv: 'test' // don't remove the appEnv property here 7 | }; 8 | 9 | export default Object.freeze(Object.assign(baseConfig, config)); 10 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlinereadbook/bookreactjs/40b3b073dc8b9d8c645a08481e4d3d6600c0016c/ReactWeb 練習案例/day1/src/favicon.ico -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/images/yeoman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlinereadbook/bookreactjs/40b3b073dc8b9d8c645a08481e4d3d6600c0016c/ReactWeb 練習案例/day1/src/images/yeoman.png -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Webpack Template Title 6 | 7 | 8 | 9 | 10 | 11 |
APPLICATION CONTENT
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/index.js: -------------------------------------------------------------------------------- 1 | import 'core-js/fn/object/assign'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import App from './components/Main'; 5 | 6 | // Render the main component into the dom 7 | ReactDOM.render(, document.getElementById('app')); 8 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/sources/README.md: -------------------------------------------------------------------------------- 1 | # About this folder 2 | This folder will hold all of your **flux** datasources. 3 | You can include them into your components or stores like this: 4 | 5 | ```javascript 6 | let react = require('react/addons'); 7 | let MySource = require('sources/MyAction'); 8 | class MyComponent extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | MySource.getRemoteData(); 12 | } 13 | } 14 | ``` 15 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/stores/README.md: -------------------------------------------------------------------------------- 1 | # About this folder 2 | This folder will hold all of your **flux** stores. 3 | You can include them into your components like this: 4 | 5 | ```javascript 6 | let react = require('react/addons'); 7 | let MyStore = require('stores/MyStore'); 8 | class MyComponent extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | MyStore.doSomething(); 12 | } 13 | } 14 | ``` 15 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/src/styles/App.css: -------------------------------------------------------------------------------- 1 | /* Base Application Styles */ 2 | body { 3 | color: #fff; 4 | background: #222; 5 | } 6 | 7 | .index img { 8 | margin: 40px auto; 9 | border-radius: 4px; 10 | background: #fff; 11 | display: block; 12 | } 13 | 14 | .index .notice { 15 | margin: 20px auto; 16 | padding: 15px 0; 17 | text-align: center; 18 | border: 1px solid #000; 19 | border-width: 1px 0; 20 | background: #666; 21 | } 22 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/test/actions/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlinereadbook/bookreactjs/40b3b073dc8b9d8c645a08481e4d3d6600c0016c/ReactWeb 練習案例/day1/test/actions/.keep -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/test/components/MainTest.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node, mocha */ 2 | /*global expect */ 3 | /*eslint no-console: 0*/ 4 | 'use strict'; 5 | 6 | // Uncomment the following lines to use the react test utilities 7 | // import React from 'react/addons'; 8 | // const TestUtils = React.addons.TestUtils; 9 | import createComponent from 'helpers/shallowRenderHelper'; 10 | 11 | import Main from 'components/Main'; 12 | 13 | describe('MainComponent', () => { 14 | let MainComponent; 15 | 16 | beforeEach(() => { 17 | MainComponent = createComponent(Main); 18 | }); 19 | 20 | it('should have its component name as default className', () => { 21 | expect(MainComponent.props.className).to.equal('index'); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/test/config/ConfigTest.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node, mocha */ 2 | /*global expect */ 3 | /*eslint no-console: 0*/ 4 | 'use strict'; 5 | 6 | import config from 'config'; 7 | 8 | describe('appEnvConfigTests', () => { 9 | it('should load app config file depending on current --env', () => { 10 | expect(config.appEnv).to.equal('test'); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/test/helpers/shallowRenderHelper.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Function to get the shallow output for a given component 3 | * As we are using phantom.js, we also need to include the fn.proto.bind shim! 4 | * 5 | * @see http://simonsmith.io/unit-testing-react-components-without-a-dom/ 6 | * @author somonsmith 7 | */ 8 | import React from 'react'; 9 | import TestUtils from 'react-addons-test-utils'; 10 | 11 | /** 12 | * Get the shallow rendered component 13 | * 14 | * @param {Object} component The component to return the output for 15 | * @param {Object} props [optional] The components properties 16 | * @param {Mixed} ...children [optional] List of children 17 | * @return {Object} Shallow rendered output 18 | */ 19 | export default function createComponent(component, props = {}, ...children) { 20 | const shallowRenderer = TestUtils.createRenderer(); 21 | shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0])); 22 | return shallowRenderer.getRenderOutput(); 23 | } 24 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/test/loadtests.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | require('babel-polyfill'); 4 | require('core-js/fn/object/assign'); 5 | 6 | // Add support for all files in the test directory 7 | const testsContext = require.context('.', true, /(Test\.js$)|(Helper\.js$)/); 8 | testsContext.keys().forEach(testsContext); 9 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/test/sources/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlinereadbook/bookreactjs/40b3b073dc8b9d8c645a08481e4d3d6600c0016c/ReactWeb 練習案例/day1/test/sources/.keep -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/test/stores/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlinereadbook/bookreactjs/40b3b073dc8b9d8c645a08481e4d3d6600c0016c/ReactWeb 練習案例/day1/test/stores/.keep -------------------------------------------------------------------------------- /ReactWeb 練習案例/day1/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const args = require('minimist')(process.argv.slice(2)); 5 | 6 | // List of allowed environments 7 | const allowedEnvs = ['dev', 'dist', 'test']; 8 | 9 | // Set the correct environment 10 | let env; 11 | if (args._.length > 0 && args._.indexOf('start') !== -1) { 12 | env = 'test'; 13 | } else if (args.env) { 14 | env = args.env; 15 | } else { 16 | env = 'dev'; 17 | } 18 | process.env.REACT_WEBPACK_ENV = env; 19 | 20 | /** 21 | * Build the webpack configuration 22 | * @param {String} wantedEnv The wanted environment 23 | * @return {Object} Webpack config 24 | */ 25 | function buildConfig(wantedEnv) { 26 | let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1; 27 | let validEnv = isValid ? wantedEnv : 'dev'; 28 | let config = require(path.join(__dirname, 'cfg/' + validEnv)); 29 | return config; 30 | } 31 | 32 | module.exports = buildConfig(env); 33 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/.gitignore: -------------------------------------------------------------------------------- 1 | # Build directory 2 | build 3 | 4 | # Copied styles for Material UI 5 | src/style/material-ui 6 | 7 | # OS X-specific file 8 | .DS_Store 9 | 10 | # Logs 11 | logs 12 | *.log 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | 19 | # Dependency directory 20 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 21 | node_modules -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var del = require('del'); 4 | var reactify = require('reactify'); 5 | var source = require('vinyl-source-stream'); 6 | var webserver = require('gulp-webserver'); 7 | var less = require('gulp-less'); 8 | var path = require('path'); 9 | var rename = require('gulp-rename'); 10 | var inject = require('gulp-inject'); 11 | var runsequence = require('gulp-run-sequence'); 12 | var ncp = require('ncp').ncp; 13 | var gutil = require('gulp-util'); 14 | 15 | // Just some directories that we will be providing to `gulp.src` method calls. 16 | var paths = { 17 | less: ['src/**/*.less', 'src/**/**/*.less', '!src/{style,style/**}'], 18 | css: ['build/**/*.css', '!build/{style,style/**}'], 19 | globalcss: ['build/style/*.css'], 20 | style: ['src/style/*.less'], 21 | appjs: ['./src/app.jsx'], 22 | js: ['src/**/*.js'], 23 | indexhtml: ['./src/index.html'] 24 | }; 25 | 26 | // Here is where we will be sending all our files to. 27 | var destPath = './build' 28 | 29 | /* 30 | * Handles an error event. 31 | */ 32 | function swallowError(error) { 33 | gutil.log(error.message); 34 | this.emit('end'); 35 | } 36 | 37 | /* 38 | * Deletes the `build` folder. 39 | */ 40 | gulp.task('clear-build', function (done) { 41 | del(['build'], done); 42 | }); 43 | 44 | /* 45 | * Clears out all the stuff that have been generated during development. 46 | */ 47 | gulp.task('clean', function(done) { 48 | return runsequence('clear-material', 'clear-build', done); 49 | }); 50 | 51 | /* 52 | * Compiles all LESS style sheets that are "local" to specific modules. 53 | */ 54 | gulp.task('less', function () { 55 | return gulp.src(paths.less) 56 | .pipe(less({ 57 | paths: [ path.join(__dirname, 'src') ] 58 | })) 59 | .on('error', swallowError) 60 | .pipe(gulp.dest(destPath)); 61 | }); 62 | 63 | /* 64 | * Compiles the global styles (all written in LESS). 65 | */ 66 | gulp.task('style', function () { 67 | return gulp.src(paths.style) 68 | .pipe(less({ 69 | paths: [ path.join(__dirname, 'src', 'style') ] 70 | })) 71 | .on('error', swallowError) 72 | .pipe(gulp.dest(path.join(destPath, 'style'))); 73 | }); 74 | 75 | /* 76 | * Bundles the scripts, using Browserify. 77 | */ 78 | gulp.task('js', function() { 79 | return browserify(paths.appjs) 80 | .transform(reactify) 81 | .bundle() 82 | .on('error', function (err) { 83 | gutil.log(err.message); 84 | this.emit('end'); 85 | }) 86 | .pipe(source('bundle.js')) 87 | .on('error', swallowError) 88 | .pipe(gulp.dest(destPath)); 89 | }); 90 | 91 | /* 92 | * Copies the index.html from the source directory to the build directory. 93 | */ 94 | gulp.task('copy-index', function () { 95 | return gulp 96 | .src(paths.indexhtml) 97 | .pipe(gulp.dest(destPath)); 98 | }); 99 | 100 | /* 101 | * Injects the "global" styles. 102 | */ 103 | gulp.task('inject-index', function () { 104 | return gulp 105 | .src([ path.join(destPath, 'index.html') ]) 106 | .pipe( 107 | inject( 108 | gulp.src(paths.globalcss, {read: false}), 109 | {name: 'global', relative: true} 110 | ) 111 | ) 112 | .pipe( 113 | inject(gulp.src(paths.css, {read: false}), {relative: true}) 114 | ) 115 | .pipe(gulp.dest(destPath)); 116 | }); 117 | 118 | /* 119 | * Copies the index.html from the source directory to the build directory, and 120 | * injects link tags into the HTML. 121 | */ 122 | gulp.task('index', function (done) { 123 | return runsequence('copy-index', 'inject-index', done); 124 | }); 125 | 126 | /* 127 | * Compiles the global styles, local styles, and the JavaSript/JSX code, and 128 | * puts the compiled code into the `build` folder. Injects the necessary 129 | * dpeendencies into the HTML. 130 | */ 131 | gulp.task('build', function (done) { 132 | return runsequence( 133 | 'clean', 134 | 'copy-material', 135 | ['style', 'less', 'js'], 136 | 'index', 137 | done 138 | ); 139 | }); 140 | 141 | /* 142 | * Compiles the local LESS styles and updates the index. 143 | */ 144 | gulp.task('less-and-index', function (done) { 145 | return runsequence('less', 'index', done); 146 | }); 147 | 148 | /* 149 | * Compiles the global LESS styles and updates the index. 150 | */ 151 | gulp.task('style-and-index', function (done) { 152 | return runsequence('style', 'index', done); 153 | }); 154 | 155 | /* 156 | * Watch for changes in files. 157 | */ 158 | gulp.task('watch', function() { 159 | gulp.watch(paths.style, ['style-and-index']); 160 | gulp.watch(paths.less, ['less-and-index']); 161 | gulp.watch(paths.js.concat(paths.appjs), ['js']); 162 | gulp.watch(paths.indexhtml, ['index']); 163 | }); 164 | 165 | /* 166 | * Run the server. 167 | */ 168 | gulp.task('server', function () { 169 | return gulp.src(destPath) 170 | .pipe(webserver({ 171 | livereload: true, 172 | open: true 173 | })); 174 | }); 175 | 176 | /* 177 | * Deletes the `src/style/material-ui` folder. 178 | */ 179 | gulp.task('clear-material', function (done) { 180 | del(['src/style/material-ui'], done); 181 | }); 182 | 183 | /* 184 | * Copies the `material-ui` CSS (LESS) framework from the `node_modules` folder 185 | * without checking (and then deleting) for an exsting folder in the 186 | * destination. 187 | */ 188 | gulp.task('copy-material-no-clear', function (done) { 189 | var source = 190 | path.join(__dirname, 'node_modules', 'material-ui', 'src', 'less'); 191 | var dest = path.join(__dirname, 'src', 'style', 'material-ui'); 192 | ncp(source, dest, done); 193 | }); 194 | 195 | /* 196 | * Copies the `material-ui` CSS (LESS) framework from the `node_modules` folder, 197 | * assuming that it's been properly installed. 198 | */ 199 | gulp.task('copy-material', function (done) { 200 | return runsequence('clear-material', 'copy-material-no-clear', done); 201 | }); 202 | 203 | /* 204 | * The default is meant for development. Watches for changes, runs the builds, 205 | * and fires up a web server. Also opens a new browser tab to the application. 206 | */ 207 | gulp.task('develop', function () { 208 | return runsequence('build', ['watch', 'server']); 209 | }); 210 | 211 | /* 212 | * An alias to the `build` task. 213 | */ 214 | gulp.task('default', ['build']); 215 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "server": "gulp develop", 4 | "test": "jest" 5 | }, 6 | "devDependencies": { 7 | "browserify": "^6.3.3", 8 | "del": "^0.1.3", 9 | "gulp": "^3.8.10", 10 | "gulp-inject": "^1.0.2", 11 | "gulp-less": "^1.3.6", 12 | "gulp-rename": "^1.2.0", 13 | "gulp-run-sequence": "^0.3.2", 14 | "gulp-util": "^3.0.1", 15 | "gulp-webserver": "^0.8.7", 16 | "jest-cli": "^0.2.1", 17 | "ncp": "^1.0.1", 18 | "reactify": "^0.17.1", 19 | "vinyl-source-stream": "^1.0.0" 20 | }, 21 | "dependencies": { 22 | "fluxxor": "^1.5.1", 23 | "material-ui": "^0.3.1", 24 | "react": "^0.12.1", 25 | "react-router": "^0.11.6", 26 | "react-tap-event-plugin": "^0.1.3" 27 | }, 28 | "jest": { 29 | "unmockedModulePathPatterns": [ 30 | "node_modules/fluxxor" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/src/app.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Router = require('react-router'); 3 | var mui = require('material-ui'); 4 | var injectTapEventPlugin = require("react-tap-event-plugin"); 5 | 6 | // A lot of the code is auto-generated. However, fiddling around with it 7 | // shouldn't be a catastrophic failure. Just that you'd need to know your way 8 | // around a little. However, **BE CAREFUL WHILE DELETING SOME OF THE COMMENTS IN 9 | // THIS FILE; THE AUTO-GENERATORS RELY ON SOME OF THEM**. 10 | 11 | // inject:pagerequire 12 | var HomePage = require('./pages/HomePage'); 13 | // endinject 14 | 15 | var menuItems = [ 16 | // inject:menuitems 17 | { payload: 'home', text: 'myapp' }, 18 | // endinject 19 | ]; 20 | 21 | var titles = { 22 | // inject:titles 23 | '/home': 'myapp', 24 | // endinject 25 | }; 26 | 27 | var Route = Router.Route; 28 | var DefaultRoute = Router.DefaultRoute; 29 | var RouteHandler = Router.RouteHandler; 30 | 31 | var AppCanvas = mui.AppCanvas; 32 | var AppBar = mui.AppBar; 33 | var LeftNav = mui.LeftNav; 34 | 35 | injectTapEventPlugin(); 36 | 37 | var LeftNavComponent = React.createClass({ 38 | mixins: [Router.Navigation], 39 | 40 | render: function () { 41 | // Optionally, you may add a header to the left navigation bar, by setting 42 | // the `LeftNav`'s `header` property to a React component, like os: 43 | // 44 | // header={
Header Title.
} 45 | return ( 46 | 53 | ); 54 | }, 55 | 56 | toggle:function () { 57 | this.refs.leftNav.toggle(); 58 | }, 59 | 60 | close: function () { 61 | this.refs.leftNav.close() 62 | }, 63 | 64 | _onLeftNavChange: function(e, selectedIndex, menuItem) { 65 | this.transitionTo(menuItem.payload); 66 | this.refs.leftNav.close(); 67 | } 68 | }); 69 | 70 | var Master = React.createClass({ 71 | mixins: [Router.State], 72 | 73 | _onMenuIconButtonTouchTap: function () { 74 | this.refs.leftNav.toggle(); 75 | }, 76 | render: function () { 77 | return ( 78 | 79 | 80 | 85 | 86 | 87 | 88 | 89 |
90 | 91 |
92 | 93 | 94 | ); 95 | } 96 | }); 97 | 98 | var routes = ( 99 | 100 | {/* inject:route */} 101 | 102 | {/* endinject */} 103 | 104 | 105 | ); 106 | 107 | Router.run(routes, function (Handler) { 108 | React.render(, document.body); 109 | }); 110 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/src/helpers.js: -------------------------------------------------------------------------------- 1 | var Fluxxor = require('Fluxxor'); 2 | var React = require('react'); 3 | 4 | // Just a place to dump a few helpers. 5 | 6 | module.exports.FluxMixin = Fluxxor.FluxMixin(React); -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/src/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | myapp 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/src/pages/HomePage/__tests__/index.js: -------------------------------------------------------------------------------- 1 | .<%= className %>-page { 2 | // Feel free to add all your styles here. 3 | // 4 | // Since the styling language is not CSS, but LESS, you can nest all your 5 | // styles here. For more info on LESS, please refer to 6 | // http://lesscss.org/features/ 7 | } -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/src/pages/HomePage/index.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | // If you are going to be using stores, be sure to first load in the `Fluxxor` 4 | // module. 5 | // 6 | // var Fluxxor = require('Fluxxor'); 7 | // 8 | // If you want to leverage the use of stores, a suggestion would be to 9 | // initialize an object, and set it to a `stores` variable, and adding a new 10 | // instance of the store as a property to the object, like so: 11 | // 12 | // var stores = { 13 | // SomeStore: new SomeStore() 14 | // }; 15 | // 16 | // And also, because we are using the Flux architecture, you may also initialize 17 | // an object full of methods that represent "actions" that will be called upon 18 | // by a "dispatcher", like so: 19 | // 20 | // var actions = { 21 | // doSomething: function (info) { 22 | // this.dispatch('DO_SOMETHING', {info: info}); 23 | // } 24 | // }; 25 | // 26 | // And finally, you would pass the stores and actions to our dispatcher, like 27 | // so: 28 | // 29 | // var flux = new Fluxxor.Flux(stores, actions); 30 | // 31 | // And, then, you would pass in the reference of your dispatcher to the view 32 | // relies on the dispatcher (that view is returned by the `render` method), like 33 | // so: 34 | // 35 | // 36 | 37 | module.exports = React.createClass({ 38 | render: function () { 39 | return ( 40 |
41 | myapp 42 |
43 | ); 44 | } 45 | 46 | }); 47 | -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/src/pages/HomePage/style.less: -------------------------------------------------------------------------------- 1 | .home-page { 2 | // Feel free to add all your styles here. 3 | // 4 | // Since the styling language is not CSS, but LESS, you can nest all your 5 | // styles here. For more info on LESS, please refer to 6 | // http://lesscss.org/features/ 7 | } -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/src/style/README.md: -------------------------------------------------------------------------------- 1 | # Herein Lies The Global Styles 2 | 3 | All global styles (written using the [LESS](http://lesscss.org/) style language) shall be stored in this folder. 4 | 5 | Optionally, instead of creating new `.less` files, you may modify `main.less` directly. Just be sure to *only* add your LESS code where indicated. 6 | 7 | \* **Do not** change the contents of the `material-ui` folder. It's been automatically generated, and any changes to it will be undone! -------------------------------------------------------------------------------- /ReactWeb 練習案例/day2/mytest/src/style/main.less: -------------------------------------------------------------------------------- 1 | @import "material-ui/scaffolding.less"; 2 | 3 | // This is where you would optionally add your styles. 4 | 5 | // Feel free to leverage the styles below in order to implement the header in 6 | // the sidebar. 7 | 8 | // .logo { 9 | // cursor: pointer; 10 | // .mui-font-style-headline; 11 | // .mui-text-full-white; 12 | // line-height: @app-bar-height; 13 | // .mui-font-weight-light; 14 | // background-color: @primary-1-color; 15 | // padding-left: @desktop-gutter; 16 | // padding-top: 0; 17 | // margin-bottom: @desktop-gutter-mini; 18 | // } 19 | 20 | @import "material-ui/components.less"; -------------------------------------------------------------------------------- /Reactjs 第一篇 攻略篇/README.md: -------------------------------------------------------------------------------- 1 | #Reactjs 成長營故事篇 [每個連結都是歷史攻略影片歐] 2 | 3 | 4 | [因為有次看到了這篇](https://www.youtube.com/watch?v=sHsmh3eRP04)因緣際會讀書會就在於3月31日開跑,那時候剛好遇到[maoyang來邀請加入soft&share讀書會成員](https://github.com/orgs/softnshare/dashboard),也謝謝maoyang很熱心幫忙在各大社團幫忙招募會友 5 | 6 | [第一強棒 jacky很熱心分享了他的個人經驗,超強的這是我第一次認識到reactjs 感動到 ](http://www.slideshare.net/hungjie19/hello-reactjs-01-bulid-my-first-web-app) 7 | 8 | [之後在大家討論之餘jacky又跳出來講了如何用hackmd.io做簡報大家的眼睛就亮了起來,於是乎這段影片就變成了永恆的傳說,也讓之後大部分的主講都用這套來做silder](https://www.youtube.com/watch?v=8maKJ6CJ9no) 9 | 10 | [之後調查了許多讀書會要進行的方式,用書本用官網當教材,但大家意見不都不一致,這時候jason大大神人出現,給了我們一本武功秘笈,並快帶我跑了一次說真的那時候還看不懂>_<](https://github.com/shiningjason1989/react-quick-tutorial 11 | ) 12 | 13 | 後來因為大家都是小菜菜,遇到了沒有人主講的囧境,這時候larry大大跳出幫忙連續基礎導讀後來還有allen大大也加入了導讀,口條好台風穩,經驗豐富有問必答神人啊,[後來這時候james提出了要先學會es6,大家也都很贊成所以就開了es6讀書會由james主持,一直並行到現在故事還在進行中](https://github.com/softnshare/es6),[larry把課程講完了但因為都是剛接觸有些不是很清楚,所以決定在來重新reload 在發射子彈一次 14 | ](https://www.facebook.com/groups/gruntjsTW/?fref=ts) 15 | 16 | 17 | [第二彈分ＡＢ兩組 Ａ組進行基本入門B組直接由patten與redux相關進行 ,Allen大大很熱心的幫我們導讀Ａ組 1-4 章 ](https://www.youtube.com/watch?v=EkjdBs1Fzeo&list=PLjCvPv97gItIvMkDEot1vYH6NmE6EwO56&index=1) [再加碼 第五章](https://www.youtube.com/watch?v=oJ6WZjFrUHc&list=PLjCvPv97gItIvMkDEot1vYH6NmE6EwO56&index=2) [與 Ｂ組的第一棒 直接帶入主題](https://www.youtube.com/watch?v=2cfMA0uDOYE&list=PLjCvPv97gItIvMkDEot1vYH6NmE6EwO56&index=3) 18 | 19 | 聽第二次的感覺就不太一樣這次有通透了一些但是es6部分還不是很了解 20 | 後來就去james主持的es6讀書會 聽了大神的主講 21 | 了解了基本的es6概念 22 | 23 | [後來默司也加入了6-7章導讀,默司是複製人嗎為什麼每個讀書會都有默司.詢問了一下原來默司表示有前端默司跟後端默司但共用一個身體 XD 挖哩勒,總之前端默司跟後端默司都很強拉 24 | ](https://www.facebook.com/mosluce/videos/10210633331609210/) 25 | 26 | [讀書會進行到這邊認識越來越多夥伴很高興可以走得這麼遠,這時候小當家說要煮菜給我們吃,很高興志芳幫忙導讀A組8-9章] 27 | (https://www.youtube.com/watch?v=6LbyW6xC8gM&feature=youtu.be) 28 | 29 | [B 組部分 13-16 章部分 james 重複講了兩次flux概念私下也有在實作一些技巧給朋友看 30 | ](https://youtu.be/RgB_2R8j3L8) 31 | 32 | [B 組 景泰也幫忙導讀了第18章] 33 | (https://www.youtube.com/watch?v=cv57Pbry_Ec 34 | ) 35 | [並且補充了一些工具] 36 | (https://www.youtube.com/watch?v=qdUlfiDbCcI&feature=youtu.be) 37 | 38 | 之後因為有james 大大 有demo reactjs native 大家看了都流口水了,所以有趣邀請到 chunghe fang 大大 來講兩篇react-native 39 | [一篇是 實戰 - 鉅亨網 app](https://youtu.be/NEmQAC9IMLk) 40 | [簡報](https://docs.google.com/presentation/d/1F27AKUZMgoaenTz0xqRCaDp2rbWgjRRzMtAU8Ubm9t8/edit#slide=id.p) 41 | 42 | [另外一篇是react-native-svg/d3 分享] 43 | (https://youtu.be/qeB0pEIajbU) 44 | [簡報](https://github.com/chunghe/React-Native-Stock-Chart) 45 | 46 | 47 | [後來還有邀請到林楊興大大來講一篇Universal Rendering with React/Redux 用簡單的話語不多程式碼揭開神秘的面紗也更了解到Isomorphic是什麼了](https://youtu.be/xoMGdasN6cw) 48 | 49 | 50 | [A組由紀相安(就是我拉)幫大家攻略最終章終於攻略完畢複習了箭頭函數跟bind還有react元件週期method,恭喜大家都升為B或C組嚕](https://www.youtube.com/watch?v=1z7o9mHLrK0&feature=youtu.be) 51 | 52 | [緊接著由bruce幫大家講B組的flux 第17章節container的用法非常實用](https://www.youtube.com/watch?v=hxtU9-3ZaSU&feature=youtu.be) 53 | 54 | [B組allen攻略到redux第一章用他自己看過很多影片的最後歸納的心得來做分享,用自己的語言講解果然是讓大家最容易懂的,很讚的一篇](https://youtu.be/upq6WEAAE3Y) 55 | 56 | [番外篇 meteor 今天終於見識到meteor強大的火力,max 很精彩的主講閃到了大家的眼睛,講解了運作的方式也用live code 來帶大家走一遍, 難怪star這麼高 ,有機會的話一定要再邀請max 來第二彈 ,真是太精采拉](https://www.youtube.com/watch?v=HNEZ677A7eM) 57 | [武功祕笈silder在此](http://www.slideshare.net/MaxLi23/introduction-to-meteor-react) 58 | 59 | # react成長營故事歡迎大家一起來互通有無 60 | -------------------------------------------------------------------------------- /其他線上讀書會/README.md: -------------------------------------------------------------------------------- 1 | # 其他線上讀書會 2 | 3 | ## 線上讀書會 4 | 5 | | | 讀書會 | 時間 | 6 | | ----- | ----- | :-----: | 7 | | 週一 | [線上reactjs 讀書會](https://www.facebook.com/groups/906048196159262/) | A組 - 20:00
B組 - 21:00 | 8 | | 週二 | [線上nodejs 讀書會 ](https://www.facebook.com/groups/207139586323090/) | 19:30 | 9 | | 週三 | [線上docker 讀書會 ](https://www.facebook.com/groups/750311598438135/) | 19:30 | 10 | | 週四 | [線上swift 讀書會](https://www.facebook.com/groups/238948643131478/) | 20:00 | 11 | | 週五 | [線上laravel 讀書會](https://www.facebook.com/groups/956973084383781/)
[線上 unity 讀書會](https://www.facebook.com/groups/1606498833013546/) | 19:30
19:30 | 12 | 13 | ## 友站讀書會 14 | 15 | - [早上讀書會 史丹佛 swift cs 193](https://www.facebook.com/groups/1623975731247820/) 16 | - [james的社團 ES6讀書會](https://www.facebook.com/groups/gruntjsTW/) 17 | - [台中前端社群](http://goo.gl/Re0s5a) 18 | - [新北創立坊](https://github.com/amazing-tutor/web-tutor-on-thursday) 19 | - [softnshare](softnshare.wordpress.com) 20 | 21 | ## 未來讀書會(招募中) 22 | 23 | - [線上 angularjs 讀書會 預計2017年2月份開跑](https://www.facebook.com/groups/1345890212093830/) 24 | - [線上 iot 讀書會 預計2017年4月份開跑](https://www.facebook.com/groups/842415582524882/?fref=ts) 25 | - [線上 go 讀書會 預計2017年2月份開跑](https://www.facebook.com/groups/1288435607857868/) 26 | - [strongloop讀書會](https://www.facebook.com/groups/568032146690485/) 27 | -------------------------------------------------------------------------------- /讀書會注意事項/README.md: -------------------------------------------------------------------------------- 1 | # 讀書會注意事項 2 | 3 | ## 聽眾 4 | 5 | 1. 會議加入時，記得關麥克風，避免影響到講者 6 | 2. 遇到有爭議的問題無法馬上ＱＡ，可於會後討論，以不影響講者為主 7 | 3. 會議建議可發表一篇讀書心得以加深印象 8 | 4. 請大家填寫ZoomID暱稱，方便會後討論與FB名稱對照 9 | 5. 大家專業領域不同，聞到有先後，麻煩各位先進多多指導新人 10 | 6. 準備麥克風，有時候用文字描述問題比較慢 11 | 7. 幫忙提醒講者要錄影，會後記得鼓掌感謝講者 12 | 8. 盡量互動，有不懂一定要問，一起LevelUp 13 | 14 | ## 講者 15 | 16 | 1. 記得錄影，會後上傳影片至社團 17 | 2. 可提前10分鐘測試麥克風 18 | -------------------------------------------------------------------------------- /讀書會過往影片及討論區/README.md: -------------------------------------------------------------------------------- 1 | # 讀書會過往影片及討論 2 | 3 | ## ReactJS 4 | 5 | | 主講者 | 章節 | 連結 | 討論區 | 6 | | ------ | ------ | :------: | :------: | 7 | | Allen | 1 ~ 4 | [[影片](https://www.youtube.com/watch?v=EkjdBs1Fzeo&index=1&list=PLjCvPv97gItIvMkDEot1vYH6NmE6EwO56)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/4)] | 8 | | Allen | 5 | [[影片](https://www.youtube.com/watch?v=oJ6WZjFrUHc&index=2&list=PLjCvPv97gItIvMkDEot1vYH6NmE6EwO56)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/5)] | 9 | | 默司 | 6 ~ 7 | [[影片](https://www.facebook.com/mosluce/videos/10210633331609210/)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/6)] | 10 | | Les | 8 ~ 9 | [[影片](https://www.youtube.com/watch?v=6LbyW6xC8gM&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/7)] | 11 | | Polo | 10 ~ 11 | [[影片](https://www.youtube.com/watch?v=1z7o9mHLrK0&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/8)] | 12 | 13 | ## Flux 14 | 15 | | 主講者 | 章節 | 連結 | 討論區 | 16 | | ------ | ------ | :------: | :-----: | 17 | | Allen | 12 | [[影片](https://www.youtube.com/watch?v=2cfMA0uDOYE&index=3&list=PLjCvPv97gItIvMkDEot1vYH6NmE6EwO56)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/9)] | 18 | | James | 13 ~ 16 | [[影片](https://youtu.be/RgB_2R8j3L8)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/10)] | 19 | | Bruce | 17 | [[影片](https://youtu.be/hxtU9-3ZaSU)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/11)] | 20 | | Fergus (阿泰) | 18 | [[影片1](https://www.youtube.com/watch?v=cv57Pbry_Ec)] [[影片2](https://www.youtube.com/watch?v=qdUlfiDbCcI&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/12)] | 21 | 22 | ## Redux 23 | 24 | | 主講者 | 章節 | 連結 | 討論區 | 25 | | ------ | ------ | :------: | :-----: | 26 | | Allen | 19 | [[影片](https://youtu.be/upq6WEAAE3Y)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/13)] | 27 | | Jim | 20 ~ 21 | [[影片](https://www.facebook.com/jim20515/videos/10210631281448748/)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/14)] | 28 | | Jeff（王建傑) | 22 | 暫無 | 暫無 | 29 | | Allen | 23 | [[影片](https://www.youtube.com/watch?v=CHGis9H7SDA&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/29)] | 30 | | Max | 24 ~ 25 | 暫無 | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/27)] | 31 | 32 | ## React Native 33 | 34 | | 主講者 | 章節 | 連結 | 討論區 | 35 | | ------ | ------ | :------: | :-----: | 36 | | Larry | 1 of 30days | [[簡報](https://hackmd.io/p/ByV3Mjn2#/)] [[影片](https://www.youtube.com/watch?v=b5CmTo5JufU&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/15)] | 37 | | Larry | 2 of 30days | [[github](https://github.com/larry0220/MysteryC)] [[web demo](https://preview.c9users.io/larry0220/mystery-c/mystery-c-web/index.html)] [[影片](https://www.youtube.com/watch?v=k9d40rMdtJA&t=1878s)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/32)] | 38 | 39 | ## 番外篇 40 | 41 | ### React 42 | 43 | | 主講者 | 主題 | 連結 | 討論區 | 44 | | ------ | ------ | ------ | ----- | 45 | | Max | Meteor+React | [[影片](https://www.youtube.com/watch?v=HNEZ677A7eM)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/18)] | 46 | | 張國昭 | Redux + ReactJS | [[簡報](http://www.slideshare.net/ssusercab70d/reduxreact-js)] [[影片](https://www.youtube.com/watch?v=FAdOex9v6Yw)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/1)] | 47 | | 涼麵 | react 開發優化經驗分享 | [[影片](https://www.facebook.com/readbook999/videos/1822831534625935/)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/34)] | 48 | 49 | ### React Native 50 | 51 | | 主講者 | 主題 | 連結 | 討論區 | 52 | | ------ | ------ | ------ | ----- | 53 | | Chunghe Fang | react-native 實戰 - 鉅亨網 app | [[簡報](https://docs.google.com/presentation/d/1F27AKUZMgoaenTz0xqRCaDp2rbWgjRRzMtAU8Ubm9t8/edit#slide=id.p)] [[影片](https://youtu.be/NEmQAC9IMLk)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/3)] | 54 | | Chunghe Fang | react-native-svg/d3 分享 | [[簡報](https://github.com/chunghe/React-Native-Stock-Chart)] [[影片](https://youtu.be/qeB0pEIajbU)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/16)] | 55 | | Ch Rick | ReactNative起手式 + Redux | [[影片](https://www.youtube.com/watch?v=RLUqAgbSrPA)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/39)] | 56 | 57 | ### Middleware 58 | 59 | | 主講者 | 主題 | 連結 | 討論區 | 60 | | ------ | ------ | ------ | ----- | 61 | | Polo | graphQL | [[影片](https://www.youtube.com/watch?v=oi2hfP5WmV8&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/19)] | 62 | | Polo | graphQL 心得分享 Query Variables | [[影片](https://www.youtube.com/watch?v=Dt__SbPj5tw&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/21)] | 63 | | Polo | graphQL 心得分享 Defining Queries | [[影片](https://www.youtube.com/watch?v=PcO10aBvnA0&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/22)] | 64 | | Polo | graphQL Defining Mutations | [[影片](https://www.youtube.com/watch?v=ss1vTRAoj-g&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/23)] | 65 | | carl su | redux-saga | [[blog](https://quip.com/dKmFAdA4a2x0)] [[影片](https://www.youtube.com/watch?v=7z2_clNBUy0)] | [傳送門](https://github.com/onlinereadbook/bookreactjs/issues/31) | 66 | | 承澤 | React graphQL + Relay 入門 | [[簡報](http://www.slideshare.net/ChenTsuLin/graphgl-relay-introduction)] [[影片](https://youtu.be/K0WEazN9Nf4)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/41)] | 67 | 68 | ### Universal 69 | 70 | | 主講者 | 主題 | 連結 | 討論區 | 71 | | ------ | ------ | ------ | ----- | 72 | | 林楊興 | Universal Rendering with React/Redux | [[簡報](http://bit.ly/2bwm6Jd)] [[影片](https://youtu.be/xoMGdasN6cw)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/17)] | 73 | | Polo | react-start-kit 與 action reduce 實戰攻略 | [[影片](https://www.youtube.com/watch?v=y6hOTP9_Mog&feature=youtu.be)] | [傳送門](https://github.com/onlinereadbook/bookreactjs/issues/28) | 74 | 75 | ### Isomorphic 76 | 77 | | 主講者 | 主題 | 連結 | 討論區 | 78 | | ------ | ------ | ------ | ----- | 79 | | Tomas | server-render | [[影片](https://www.youtube.com/watch?v=BbVWl1LStIY)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/38)] | 80 | 81 | 82 | ### 開發環境 83 | 84 | | 主講者 | 主題 | 連結 | 討論區 | 85 | | ------ | ------ | ------ | ----- | 86 | | Howard Chang | Webpack簡介 | [[Blog](https://rhadow.github.io/2015/04/02/webpack-workflow/)] [[影片](https://www.youtube.com/watch?v=JRIPGi7QUmk)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/24)] | 87 | | 周昱安 | Webpack | [[影片](https://www.youtube.com/watch?v=KEtmaPM_CJI)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/25)] | 88 | | 默司 | Visual Studio Code 新手村 (1/2) | [[設定檔](https://github.com/mosluce/vscode-quick-start/tree/master/settings)] [[影片](https://www.youtube.com/watch?v=rsaqfyDLzQM)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/33)] | 89 | | 默司 | Visual Studio Code 新手村 (2/2) | [[影片](https://www.youtube.com/watch?v=zGqICko2_uo)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/33)] | 90 | | 林一村 | NextJS | [[影片](https://goo.gl/EUqvIT)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/36)] | 91 | 92 | ### 測試 93 | 94 | | 主講者 | 主題 | 連結 | 討論區 | 95 | | ------ | ------ | ------ | ----- | 96 | | Andy | NightwachJS + ReactJS todoMVC | [[簡報](https://hackmd.io/p/S1XNx8TT)] [[Github](https://github.com/bbandydd/nightwatch_example)] [[影片](https://www.youtube.com/watch?v=xZ9k_9kvI_Q)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/26)] | 97 | | Hyman | Nightwatch 進階 | [[簡報](https://hackmd.io/p/BJk6LeVQl)] [[Github](https://github.com/chnbohwr/nightwatch_example)] [[影片](https://www.youtube.com/watch?v=kuHpi_GsfDc)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/45)] | 98 | 99 | ### UI 100 | 101 | | 主講者 | 主題 | 連結 | 討論區 | 102 | | ------ | ------ | ------ | ----- | 103 | | 罡北 | Pure CSS Drawings | [[影片](https://www.youtube.com/watch?v=PlsvW-w0VaE&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/30)] | 104 | | 孟偉 | material-ui | [[影片](https://www.facebook.com/readbook999/videos/1822832427959179/?hc_ref=NEWSFEED)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/35)] | 105 | 106 | ### git 107 | 108 | | 主講者 | 主題 | 連結 | 討論區 | 109 | | ------ | ------ | ------ | ----- | 110 | | 黃彥銘 | git入門到團隊合作 | [[簡報](https://www.slideshare.net/secret/retavuvmp0Vbun)] [[影片](https://www.youtube.com/watch?v=DqYJwg6dvJo&feature=youtu.be)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/20)] | 111 | 112 | 113 | ### typescript webpack react redux 114 | 115 | | 主講者 | 主題 | 連結 | 討論區 | 116 | | ------ | ------ | ------ | ----- | 117 | | 默司 | redux with typescript |[[影片](https://www.youtube.com/watch?v=WzrLmp-1dYg)] [[GITHUB](https://github.com/mosluce/react-typescript)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/37)] | 118 | 119 | 120 | ### API Document 121 | 122 | | 主講者 | 主題 | 連結 | 討論區 | 123 | | ------ | ------ | ------ | ----- | 124 | | 默司 | RAML文件產生器 |[[影片](https://www.youtube.com/watch?v=fqoAG2GTIww)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/40)] | 125 | 126 | 127 | ### 新手場 128 | 129 | | 主講者 | 主題 | 連結 | 討論區 | 130 | | ------ | ------ | ------ | ----- | 131 | | Hyman | css3入門 | [[簡報](https://hackmd.io/p/r1hurIObg#/)] [[影片](https://youtu.be/xfbDj7Je21E)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/42)] | 132 | | Andy Tsai | javascript入門 | [[簡報](https://hackmd.io/p/r1Igzkvgl#/)] [[影片](https://www.youtube.com/watch?v=SjVbDOP4-zM)] [[土炮Template](https://github.com/bbandydd/ManualTemplate)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/43)] | 133 | | Andy Tsai | ReactJS Workshop 一日入魂 | [[簡報](https://hackmd.io/p/r1MHEMW4l)] [[影片](https://www.youtube.com/watch?v=7E370OkcBas)] | | 134 | | Andy Tsai | javascript入門 火力加強版 | [[簡報](https://hackmd.io/p/r1Igzkvgl#/)] [[影片](https://www.youtube.com/watch?v=pr7JFQaAYjg)] | | 135 | 136 | ### RxJS 137 | 138 | | 主講者 | 主題 | 連結 | 討論區 | 139 | | ------ | ------ | ------ | ----- | 140 | | 名辰 | Rx.js入門 | [[影片](https://youtu.be/dTgVYF5qHyM)] | [[傳送門](https://github.com/onlinereadbook/bookreactjs/issues/44)] | 141 | 142 | 143 | ### Meteor 144 | 145 | | 主講者 | 主題 | 連結 | 討論區 | 146 | | ------ | ------ | ------ | ----- | 147 | | Polo | 日常攻略 step by step 1~8 | [[影片](https://www.youtube.com/watch?v=P0ZbvRKa7VQ)] | | 148 | | Polo | 日常攻略 step by step 9 | [[影片](https://www.youtube.com/watch?v=x1Qj4E7LvJ0)] | | 149 | | Polo | 日常攻略 step by step 10~12 | [[影片](https://www.youtube.com/watch?v=gVkJO0ivPmA)] | | --------------------------------------------------------------------------------