diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..ea288b7 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + presets: ['es2015', 'react', 'stage-0'] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..07e6e47 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/node_modules diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..036496a --- /dev/null +++ b/example/index.html @@ -0,0 +1,12 @@ + + + React Reading Time Example + + + +
+
+
+ + + diff --git a/example/react-reading-time.jsx b/example/react-reading-time.jsx new file mode 100644 index 0000000..edde9c6 --- /dev/null +++ b/example/react-reading-time.jsx @@ -0,0 +1,35 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import ReadingTime from '../src/reading-time' + +class ReactReadingTime extends React.Component { + constructor(props) { + super(props) + + this.state = { + text: 'Foo is baz and bar' + } + } + + updateText(ev) { + this.setState({ text: ev.target.value }) + } + + render() { + return ( +
+
+ +
+ +
+ ); + } +} + +ReactDOM.render(, document.getElementById('react')); diff --git a/example/webpack.config.js b/example/webpack.config.js new file mode 100644 index 0000000..640c4f8 --- /dev/null +++ b/example/webpack.config.js @@ -0,0 +1,32 @@ +var webpack = require('webpack'); + +module.exports = { + entry: { + 'react-reading-time': [ + 'webpack-dev-server/client?http://localhost:8881/', + 'webpack/hot/only-dev-server', + './example/react-reading-time.jsx' + ] + }, + output: { + path: __dirname, + filename: "[name].js", + publicPath: 'http://localhost:8881/', + chunkFilename: '[id].chunk.js', + sourceMapFilename: '[name].map' + }, + resolve: { + extensions: ['', '.js', '.jsx', '.es6'], + modulesDirectories: ['node_modules'] + }, + module: { + loaders: [ + { test: /\.jsx$|\.es6$|\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ }, + { test: /\.scss$|\.css$/, loader: 'style-loader!style!css!sass' } + ] + }, + plugins: [ + new webpack.NoErrorsPlugin() + ], + devtool: "eval-source-map" +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..6332014 --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "ReactJS-the-ES6-Way", + "version": "1.0.0", + "description": "Congratulations! You've finished the ReactJS the ES6 way course!", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --config ./example/webpack.config.js --hot --port 8881" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/learnable-content/ReactJS-the-ES6-Way.git" + }, + "keywords": [], + "author": "Darin Haener (https://github.com/dphaener)", + "license": "ISC", + "bugs": { + "url": "https://github.com/learnable-content/ReactJS-the-ES6-Way/issues" + }, + "homepage": "https://github.com/learnable-content/ReactJS-the-ES6-Way#readme", + "devDependencies": { + "babel": "^6.3.26", + "babel-core": "^6.4.5", + "babel-loader": "^6.2.1", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-hot-loader": "^1.3.0", + "webpack": "^1.12.12", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/readme.md b/readme.md index 1f558a3..0668075 100644 --- a/readme.md +++ b/readme.md @@ -1 +1 @@ -#ReactJS-the-ES6-Way \ No newline at end of file +# ReactJS the ES6 way diff --git a/src/reading-time.jsx b/src/reading-time.jsx new file mode 100644 index 0000000..6897985 --- /dev/null +++ b/src/reading-time.jsx @@ -0,0 +1,49 @@ +import React from 'react' + +export default class ReadingTime extends React.Component { + static propTypes = { + wordsPerMinute: React.PropTypes.number + }; + + static defaultProps = { + wordsPerMinute: 270 + }; + + constructor(props) { + super(props) + + this.state = { + readTime: 0 + } + } + + componentWillMount() { + this.updateReadingTime(this.props); + } + + componentWillReceiveProps(nextProps) { + this.updateReadingTime(nextProps); + } + + updateReadingTime(props) { + const words = this.countWords(props.text); + const readTime = Math.round(words / props.wordsPerMinute); + + this.setState({ readTime }); + } + + countWords(text) { + return text.split(/\s+/).length + } + + render() { + return ( +
+

+ Estimated read time:

+ {this.state.readTime} +

+
+ ) + } +}