├── .gitignore ├── 1-hello-world ├── app │ └── components │ │ └── main.jsx ├── package.json ├── public │ └── index.html └── webpack.config.js ├── 2-props ├── app │ └── components │ │ └── main.jsx ├── package.json ├── public │ └── index.html └── webpack.config.js ├── 3-states ├── app │ └── components │ │ └── main.jsx ├── package.json ├── public │ └── index.html └── webpack.config.js ├── 4-lifecycle-methods ├── mounting-componentDidMount │ ├── app │ │ └── components │ │ │ └── main.jsx │ ├── package.json │ ├── public │ │ └── index.html │ └── webpack.config.js ├── mounting-componentWillMount │ ├── app │ │ └── components │ │ │ └── main.jsx │ ├── package.json │ ├── public │ │ └── index.html │ └── webpack.config.js ├── unmounting-componentWillUnmount │ ├── app │ │ └── components │ │ │ └── main.jsx │ ├── package.json │ ├── public │ │ └── index.html │ └── webpack.config.js ├── updating-componentDidUpdate │ ├── app │ │ └── components │ │ │ └── main.jsx │ ├── package.json │ ├── public │ │ └── index.html │ └── webpack.config.js ├── updating-componentWillReceiveProps │ ├── app │ │ └── components │ │ │ └── main.jsx │ ├── package.json │ ├── public │ │ └── index.html │ └── webpack.config.js ├── updating-componentWillUpdate │ ├── app │ │ └── components │ │ │ └── main.jsx │ ├── package.json │ ├── public │ │ └── index.html │ └── webpack.config.js └── updating-shouldComponentUpdate │ ├── app │ └── components │ │ └── main.jsx │ ├── package.json │ ├── public │ └── index.html │ └── webpack.config.js ├── 5-github-followers ├── app │ └── components │ │ └── main.jsx ├── package.json ├── public │ ├── build.js │ └── index.html ├── server.js └── webpack.config.js ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /1-hello-world/node_modules 2 | /1-hello-world/public/build.js 3 | /2-props/node_modules 4 | /2-props/public/build.js 5 | /3-states/node_modules 6 | /3-states/public/build.js 7 | /4-lifecycle-methods/mounting-componentDidMount/node_modules 8 | /4-lifecycle-methods/mounting-componentDidMount/public/build.js 9 | /4-lifecycle-methods/mounting-componentWillMount/node_modules 10 | /4-lifecycle-methods/mounting-componentWillMount/public/build.js 11 | /4-lifecycle-methods/unmounting-componentWillUnmount/node_modules 12 | /4-lifecycle-methods/unmounting-componentWillUnmount/public/build.js 13 | /4-lifecycle-methods/updating-componentDidUpdate/node_modules 14 | /4-lifecycle-methods/updating-componentDidUpdate/public/build.js 15 | /4-lifecycle-methods/updating-componentWillReceiveProps/node_modules 16 | /4-lifecycle-methods/updating-componentWillReceiveProps/public/build.js 17 | /4-lifecycle-methods/updating-componentWillUpdate/node_modules 18 | /4-lifecycle-methods/updating-componentWillUpdate/public/build.js 19 | /4-lifecycle-methods/updating-shouldComponentUpdate/node_modules 20 | /4-lifecycle-methods/updating-shouldComponentUpdate/public/build.js 21 | /5-github-followers/node_modules 22 | /5-github-followers/public/buid.js 23 | -------------------------------------------------------------------------------- /1-hello-world/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class HelloWorld extends React.Component{ 5 | render(){ 6 | return
Hello world!
7 | } 8 | } 9 | 10 | ReactDOM.render( 11 | , 12 | document.getElementById('container') 13 | ); -------------------------------------------------------------------------------- /1-hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-hello-world", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "build": "webpack -w" 8 | }, 9 | "author": "wilsson", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "babel-core": "^6.4.5", 13 | "babel-loader": "^6.2.2", 14 | "babel-preset-es2015": "^6.3.13", 15 | "babel-preset-react": "^6.3.13", 16 | "react": "^0.14.7", 17 | "react-dom": "^0.14.7", 18 | "webpack": "^1.12.13" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /1-hello-world/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /1-hello-world/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /2-props/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component{ 5 | render(){ 6 | return
MyComponent {this.props.name}
7 | } 8 | } 9 | 10 | ReactDOM.render( 11 | , 12 | document.getElementById('container') 13 | ); -------------------------------------------------------------------------------- /2-props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2-props", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "babel-core": "^6.4.5", 8 | "babel-loader": "^6.2.2", 9 | "babel-preset-react": "^6.3.13", 10 | "babel-preset-es2015": "^6.3.13", 11 | "react": "^0.14.7", 12 | "react-dom": "^0.14.7", 13 | "webpack": "^1.12.13" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "build": "webpack -w" 18 | }, 19 | "author": "wilsson", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /2-props/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /2-props/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /3-states/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component{ 5 | constructor(props){ 6 | super(props); 7 | this.state = {name:'Ganimedes'}; 8 | } 9 | render(){ 10 | return
My Component {this.state.name}
; 11 | } 12 | }; 13 | 14 | ReactDOM.render( 15 | , 16 | document.getElementById('container') 17 | ); -------------------------------------------------------------------------------- /3-states/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "3-states", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "build": "webpack -w" 8 | }, 9 | "author": "wilsson", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "babel-core": "^6.4.5", 13 | "babel-loader": "^6.2.2", 14 | "babel-preset-es2015": "^6.3.13", 15 | "babel-preset-react": "^6.3.13", 16 | "react": "^0.14.7", 17 | "react-dom": "^0.14.7", 18 | "webpack": "^1.12.13" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /3-states/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /3-states/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /4-lifecycle-methods/mounting-componentDidMount/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component { 5 | constructor(props){ 6 | super(props); 7 | console.log('El componente aun no está disponible en el DOM'); 8 | } 9 | 10 | componentDidMount(){ 11 | console.log('ya se a montado mi componente'); 12 | } 13 | 14 | render(){ 15 | return
Soy un component
16 | } 17 | } 18 | 19 | ReactDOM.render( 20 | , 21 | document.getElementById('container') 22 | ); -------------------------------------------------------------------------------- /4-lifecycle-methods/mounting-componentDidMount/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mounting-componentDidMount", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "react": "^0.14.7", 8 | "react-dom": "^0.14.7", 9 | "babel-core": "^6.4.5", 10 | "webpack": "^1.12.13", 11 | "babel-loader": "^6.2.2", 12 | "babel-preset-es2015": "^6.3.13", 13 | "babel-preset-react": "^6.3.13" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "author": "wilsson", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /4-lifecycle-methods/mounting-componentDidMount/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /4-lifecycle-methods/mounting-componentDidMount/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /4-lifecycle-methods/mounting-componentWillMount/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component { 5 | constructor(props){ 6 | super(props); 7 | } 8 | componentWillMount(){ 9 | console.log('Before mount...'); 10 | } 11 | render(){ 12 | return
My Component
13 | } 14 | } 15 | 16 | ReactDOM.render( 17 | , 18 | document.getElementById('container') 19 | ); -------------------------------------------------------------------------------- /4-lifecycle-methods/mounting-componentWillMount/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mounting-componentWillMount", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "babel-preset-es2015": "^6.3.13", 8 | "babel-core": "^6.4.5", 9 | "react-dom": "^0.14.7", 10 | "babel-preset-react": "^6.3.13", 11 | "babel-loader": "^6.2.2", 12 | "webpack": "^1.12.13", 13 | "react": "^0.14.7" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "author": "wilsson", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /4-lifecycle-methods/mounting-componentWillMount/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /4-lifecycle-methods/mounting-componentWillMount/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /4-lifecycle-methods/unmounting-componentWillUnmount/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component { 5 | constructor(props){ 6 | super(props); 7 | } 8 | 9 | componentWillMount(){ 10 | console.log('Mount'); 11 | } 12 | componentWillUnmount(){ 13 | console.log('Unmount'); 14 | } 15 | render(){ 16 | console.log('Rendering'); 17 | return
I am component
18 | } 19 | } 20 | 21 | class MyApp extends React.Component{ 22 | constructor(pros){ 23 | super(pros); 24 | } 25 | 26 | mount(){ 27 | ReactDOM.render(,document.getElementById('component')); 28 | } 29 | 30 | unmount(){ 31 | ReactDOM.unmountComponentAtNode(document.getElementById('component')); 32 | } 33 | 34 | render(){ 35 | return( 36 |
37 | 38 | 39 |
40 |
41 | ) 42 | } 43 | } 44 | 45 | ReactDOM.render(, document.getElementById('container')); -------------------------------------------------------------------------------- /4-lifecycle-methods/unmounting-componentWillUnmount/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unmounting-componentWillUnmount", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "babel-core": "^6.5.0", 8 | "babel-preset-es2015": "^6.5.0", 9 | "babel-preset-react": "^6.5.0", 10 | "react-dom": "^0.14.7", 11 | "react": "^0.14.7", 12 | "webpack": "^1.12.13", 13 | "babel-loader": "^6.2.2" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "author": "wilsson", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /4-lifecycle-methods/unmounting-componentWillUnmount/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /4-lifecycle-methods/unmounting-componentWillUnmount/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentDidUpdate/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component{ 5 | componentDidUpdate(prevProps,prevState){ 6 | console.log('prevPros or prevState'); 7 | } 8 | render(){ 9 | return
my Component {this.props.name}
10 | } 11 | } 12 | 13 | ReactDOM.render(,document.getElementById('container')); 14 | ReactDOM.render(,document.getElementById('container')); 15 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentDidUpdate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "updating-componentDidUpdate", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "babel-core": "^6.5.0", 8 | "babel-loader": "^6.2.2", 9 | "babel-preset-es2015": "^6.5.0", 10 | "babel-preset-react": "^6.5.0", 11 | "react-dom": "^0.14.7", 12 | "react": "^0.14.7", 13 | "webpack": "^1.12.13" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "author": "wilsson", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentDidUpdate/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentDidUpdate/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentWillReceiveProps/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component { 5 | componentWillReceiveProps(nextProps) { 6 | console.log('nextProps ',nextProps.name); 7 | console.log('props ',this.props.name); 8 | } 9 | render() { 10 | return
Bar {this.props.name}!
; 11 | } 12 | } 13 | 14 | ReactDOM.render(, document.getElementById('container')); 15 | 16 | ReactDOM.render(, document.getElementById('container')); 17 | 18 | ReactDOM.render(, document.getElementById('container')); -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentWillReceiveProps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "updating-componentWillReceiveProps", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "babel-preset-es2015": "^6.5.0", 8 | "react-dom": "^0.14.7", 9 | "babel-preset-react": "^6.5.0", 10 | "babel-core": "^6.5.0", 11 | "babel-loader": "^6.2.2", 12 | "react": "^0.14.7", 13 | "webpack": "^1.12.13" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "author": "wilsson", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentWillReceiveProps/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentWillReceiveProps/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentWillUpdate/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component{ 5 | componentWillUpdate(){ 6 | console.log('Update MyComponent'); 7 | } 8 | render(){ 9 | return
my Component {this.props.name}
10 | } 11 | } 12 | 13 | ReactDOM.render(,document.getElementById('container')); 14 | ReactDOM.render(,document.getElementById('container')); 15 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentWillUpdate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "updating-componentWillUpdate", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "babel-core": "^6.5.0", 8 | "react": "^0.14.7", 9 | "babel-loader": "^6.2.2", 10 | "babel-preset-es2015": "^6.5.0", 11 | "babel-preset-react": "^6.5.0", 12 | "react-dom": "^0.14.7", 13 | "webpack": "^1.12.13" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "author": "wilsson", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentWillUpdate/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-componentWillUpdate/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-shouldComponentUpdate/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class MyComponent extends React.Component { 5 | constructor(props){ 6 | super(props); 7 | this.update = this.update.bind(this); 8 | } 9 | 10 | shouldComponentUpdate(nextProps,nextState){ 11 | console.log(nextProps); 12 | return nextProps.val % 2 == 0; 13 | } 14 | 15 | componentWillUpdate(){ 16 | console.log('Update MyComponent...'); 17 | } 18 | 19 | update(){ 20 | ReactDOM.render( 21 | , 22 | document.getElementById('container') 23 | ); 24 | } 25 | render(){ 26 | return
27 | My Component contador: 28 | 29 |
30 | } 31 | } 32 | 33 | MyComponent.defaultProps = { 34 | val:0 35 | }; 36 | 37 | ReactDOM.render( 38 | , 39 | document.getElementById('container') 40 | ); -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-shouldComponentUpdate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "updating-shouldComponentUpdate", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "babel-loader": "^6.2.2", 8 | "react": "^0.14.7", 9 | "babel-preset-react": "^6.5.0", 10 | "babel-preset-es2015": "^6.5.0", 11 | "babel-core": "^6.5.0", 12 | "react-dom": "^0.14.7", 13 | "webpack": "^1.12.13" 14 | }, 15 | "devDependencies": {}, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "author": "wilsson", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-shouldComponentUpdate/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /4-lifecycle-methods/updating-shouldComponentUpdate/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /5-github-followers/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class Follower extends React.Component{ 5 | constructor(props){ 6 | super(props); 7 | } 8 | ClickMe(e){ 9 | console.log(e.target,'-',this); 10 | ReactDOM.unmountComponentAtNode(e.target); 11 | } 12 | render(){ 13 | return
  • {this.props.children}
    • 14 | } 15 | } 16 | 17 | class GithubFollowers extends React.Component{ 18 | constructor(props){ 19 | super(props); 20 | this.state = {followers:[]}; 21 | } 22 | componentWillMount() { 23 | fetch('https://api.github.com/users/wilsson/followers') 24 | .then((response) => { 25 | return response.json(); 26 | }) 27 | .then((followers) => { 28 | this.setState({ followers: followers }); 29 | console.log('->> followers',followers); 30 | }) 31 | } 32 | render(){ 33 | if(this.state.followers.length>0){ 34 | return
      {this.state.followers.map(function(follower){ 35 | return

      {follower.html_url}

       36 | })}
    37 | } 38 | else{ 39 | return

    Cargando seguidores!

    40 | } 41 | } 42 | } 43 | 44 | ReactDOM.render( 45 | , 46 | document.getElementById('container') 47 | ); -------------------------------------------------------------------------------- /5-github-followers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "5-github-followers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack -w" 8 | }, 9 | "author": "wilsson", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "babel-core": "^6.9.0", 13 | "babel-loader": "^6.2.4", 14 | "babel-preset-es2015": "^6.9.0", 15 | "babel-preset-react": "^6.5.0", 16 | "express": "^4.13.4", 17 | "react": "^15.0.2", 18 | "react-dom": "^15.0.2", 19 | "webpack": "^1.13.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /5-github-followers/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /5-github-followers/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | app.use(express.static(__dirname+'/public')); 4 | app.get('/',function(req,res){ 5 | res.sendFile(__dirname+'/public/index.html'); 6 | }); 7 | 8 | app.listen(3000,function(){ 9 | console.log('express ready'); 10 | }); 11 | -------------------------------------------------------------------------------- /5-github-followers/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app/components/main.jsx', 3 | output: { 4 | path: './public/', 5 | filename: "build.js", 6 | }, 7 | module: { 8 | loaders: [ 9 | { 10 | exclude: /(node_modules|bower_components)/, 11 | loader: 'babel', 12 | query: { 13 | presets: ['es2015', 'react'] 14 | } 15 | } 16 | ] 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Wilson FT 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | #### POST 3 | [REACT JS EN ESPAÑOL – TUTORIAL BÁSICO Y PRIMEROS PASOS][1]. 4 | 5 | [1]: http://frontendlabs.io/3158--react-js-espanol-tutorial-basico-primeros-pasos-ejemplos 6 | --------------------------------------------------------------------------------