├── README.md ├── react-es6 ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ └── hello │ │ ├── Hello.css │ │ └── Hello.jsx │ ├── containers │ └── app │ │ ├── App.css │ │ └── App.jsx │ ├── index.css │ ├── index.js │ └── logo.svg ├── react-firebase-samples ├── 01_react-firebase │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── hello │ │ │ ├── Hello.css │ │ │ └── Hello.jsx │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── 02_react-firebase │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── hello │ │ │ ├── Hello.css │ │ │ └── Hello.jsx │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── 03_react-firebase │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── hello │ │ │ ├── Hello.css │ │ │ └── Hello.jsx │ │ ├── config │ │ └── index.js │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── 04_react-reactfire │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── hello │ │ │ ├── Hello.css │ │ │ └── Hello.jsx │ │ ├── config │ │ └── index.js │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg └── 05_react-reactfire │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── components │ └── hello │ │ ├── Hello.css │ │ └── Hello.jsx │ ├── config │ └── index.js │ ├── containers │ └── app │ │ ├── App.css │ │ └── App.jsx │ ├── index.css │ ├── index.js │ └── logo.svg ├── react-menu-sample ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ ├── hello │ │ ├── Hello.css │ │ └── Hello.jsx │ ├── link │ │ ├── Link.css │ │ └── Link.jsx │ └── menu │ │ ├── Menu.css │ │ └── Menu.jsx │ ├── containers │ └── app │ │ ├── App.css │ │ └── App.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── menu.json ├── react-movielist ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ ├── Movie │ │ ├── Movie.css │ │ └── Movie.jsx │ └── Movies │ │ ├── Movies.css │ │ └── Movies.jsx │ ├── containers │ └── app │ │ ├── App.css │ │ └── App.jsx │ ├── index.css │ ├── index.js │ ├── moviesdata.json │ └── posts.json ├── react-redux-movielist ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ ├── Movie │ │ ├── Movie.css │ │ └── Movie.jsx │ ├── Movies │ │ ├── Movies.css │ │ └── Movies.jsx │ └── index.js │ ├── containers │ ├── App │ │ ├── App.css │ │ └── App.jsx │ └── index.js │ ├── index.css │ ├── index.js │ ├── moviesdata.json │ ├── routes.jsx │ └── store │ ├── actions │ └── movie.js │ ├── index.js │ └── reducers │ └── movie.js ├── react-redux-sample ├── README.md ├── react-redux-counter_1 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ └── index.js ├── react-redux-counter_10 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── actions │ │ └── counter.js │ │ ├── index.js │ │ └── reducers │ │ ├── decrementCounter.js │ │ └── incrementCounter.js ├── react-redux-counter_11 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── counter │ │ │ ├── Counter.css │ │ │ └── Counter.jsx │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── actions │ │ └── counter.js │ │ ├── index.js │ │ └── reducers │ │ ├── decrementCounter.js │ │ └── incrementCounter.js ├── react-redux-counter_12 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── counter │ │ │ ├── Counter.css │ │ │ └── Counter.jsx │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── actions │ │ └── counter.js │ │ ├── index.js │ │ └── reducers │ │ ├── decrementCounter.js │ │ └── incrementCounter.js ├── react-redux-counter_13 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── counter │ │ │ ├── Counter.css │ │ │ └── Counter.jsx │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── actions │ │ └── counter.js │ │ ├── index.js │ │ ├── middlewares │ │ └── counterMiddleware.js │ │ └── reducers │ │ ├── decrementCounter.js │ │ └── incrementCounter.js ├── react-redux-counter_14 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── counter │ │ │ ├── Counter.css │ │ │ └── Counter.jsx │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── actions │ │ └── counter.js │ │ ├── epics │ │ └── counterEpic.js │ │ ├── index.js │ │ └── reducers │ │ ├── decrementCounter.js │ │ └── incrementCounter.js ├── react-redux-counter_15 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── components │ │ └── counter │ │ │ ├── Counter.css │ │ │ └── Counter.jsx │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── actions │ │ └── counter.js │ │ ├── epics │ │ └── counterEpic.js │ │ ├── index.js │ │ └── reducers │ │ ├── decrementCounter.js │ │ └── incrementCounter.js ├── react-redux-counter_2 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ └── index.js ├── react-redux-counter_3 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ └── index.js ├── react-redux-counter_4 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ └── index.js ├── react-redux-counter_5 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── index.js │ │ └── reducers │ │ └── counter.js ├── react-redux-counter_6 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── index.js │ │ └── reducers │ │ └── counter.js ├── react-redux-counter_7 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── index.js │ │ └── reducers │ │ └── counter.js ├── react-redux-counter_8 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── actions │ │ └── counter.js │ │ ├── index.js │ │ └── reducers │ │ └── counter.js ├── react-redux-counter_9 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── containers │ │ └── app │ │ │ ├── App.css │ │ │ └── App.jsx │ │ ├── index.css │ │ ├── index.js │ │ └── store │ │ ├── actions │ │ └── counter.js │ │ ├── index.js │ │ └── reducers │ │ ├── decrementCounter.js │ │ └── incrementCounter.js └── react-redux_16-epic-fetch-ajax-data │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── components │ └── user │ │ ├── User.css │ │ └── User.jsx │ ├── containers │ └── app │ │ ├── App.css │ │ └── App.jsx │ ├── index.css │ ├── index.js │ └── store │ ├── actions │ └── user.js │ ├── epics │ └── userEpic.js │ ├── index.js │ └── reducers │ └── userReducer.js ├── react-redux-todolist ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ ├── addTodo │ │ ├── AddTodo.css │ │ └── AddTodo.jsx │ ├── index.js │ ├── todoItem │ │ ├── TodoItem.css │ │ └── TodoItem.jsx │ └── todoList │ │ ├── TodoList.css │ │ └── TodoList.jsx │ ├── containers │ ├── app │ │ ├── App.css │ │ └── App.jsx │ └── main │ │ ├── Main.css │ │ └── Main.jsx │ ├── index.css │ ├── index.js │ └── store │ ├── actions │ └── todoList.js │ ├── index.js │ └── reducers │ └── todoReducer.js ├── react-router-sample ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ ├── About │ │ ├── About.css │ │ └── About.jsx │ ├── Contact │ │ ├── Contact.css │ │ └── Contact.jsx │ ├── Post │ │ ├── Post.css │ │ └── Post.jsx │ ├── Posts │ │ ├── Posts.css │ │ └── Posts.jsx │ └── hello │ │ ├── Hello.css │ │ └── Hello.jsx │ ├── containers │ ├── Content │ │ ├── Content.css │ │ └── Content.jsx │ ├── Login │ │ ├── Login.css │ │ └── Login.jsx │ └── app │ │ ├── App.css │ │ └── App.jsx │ ├── index.css │ ├── index.js │ └── menu.json └── react-router-sample_2 ├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── components ├── About │ ├── About.css │ └── About.jsx ├── Contact │ ├── Contact.css │ └── Contact.jsx ├── Post │ ├── Post.css │ └── Post.jsx ├── Posts │ ├── Posts.css │ └── Posts.jsx └── hello │ ├── Hello.css │ └── Hello.jsx ├── containers ├── Content │ ├── Content.css │ └── Content.jsx ├── Login │ ├── Login.css │ └── Login.jsx └── app │ ├── App.css │ └── App.jsx ├── index.css ├── index.js └── posts.json /README.md: -------------------------------------------------------------------------------- 1 | # learn-react-with-samples 2 | Learn ReactJS with Samples 3 | -------------------------------------------------------------------------------- /react-es6/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-es6/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | This sample will test 8 | 1) Properties 9 | 2) States 10 | 3) JSX 11 | 4) Lifecycle Events 12 | 13 | https://facebook.github.io/react/docs/react-without-es6.html 14 | http://egorsmirnov.me/2015/06/14/react-and-es6-part2.html 15 | http://blog.revathskumar.com/2016/02/reactjs-writing-in-es6.html 16 | 17 | -------------------------------------------------------------------------------- /react-es6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /react-es6/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-es6/public/favicon.ico -------------------------------------------------------------------------------- /react-es6/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-es6/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-es6/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-es6/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-es6/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from '../../logo.svg'; 3 | import './App.css'; 4 | import Hello from '../../components/hello/Hello' 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 |
10 |
11 | logo 12 |

Welcome to React

13 |
14 |

15 | To get started, edit src/App.js and save to reload. 16 | working 17 |

18 |

19 | Another Info 20 | Still working 21 |

22 | 23 |
24 | ); 25 | } 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /react-es6/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-es6/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | React with core firebase sdk 8 | 9 | Updating value on firebase 10 | 11 | Update below code with your firebase configuraiton in index.js 12 | 13 | `var firebaseConfig = { 14 | 15 | apiKey: "", 16 | 17 | authDomain: ".firebaseapp.com", 18 | 19 | databaseURL: "https://.firebaseio.com" 20 | 21 | };` 22 | 23 | 24 | 25 | Checkout following vidoes 26 | https://www.youtube.com/watch?v=mwNATxfUsgI 27 | 28 | https://www.youtube.com/watch?v=p4XTMvagQ2Q&t=79s 29 | 30 | https://firebase.googleblog.com/2014/05/using-firebase-with-reactjs.html 31 | 32 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "firebase": "^3.6.10", 10 | "react": "^15.4.2", 11 | "react-dom": "^15.4.2" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/01_react-firebase/public/favicon.ico -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/01_react-firebase/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/src/components/hello/Hello.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Hello.css'; 3 | 4 | class Hello extends Component { 5 | 6 | constructor(props){ 7 | super(props); 8 | this.state = { 9 | name: props.name 10 | } 11 | this.handelClick = this.handelClick.bind(this); 12 | } 13 | 14 | handelClick(){ 15 | alert("Hello World = "+this.props.name); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |
Hello World: {this.props.name}
22 |
Your age: {this.props.age}
23 |
Your email: {this.props.email}
24 | 25 |
26 | ); 27 | } 28 | } 29 | 30 | Hello.propTypes = { 31 | name: React.PropTypes.string.isRequired, 32 | age: React.PropTypes.number.isRequired 33 | }; 34 | Hello.defaultProps = { 35 | email: 'abc@gmail.com' 36 | }; 37 | export default Hello; 38 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Hello from '../../components/hello/Hello' 4 | import * as firebase from 'firebase'; 5 | 6 | class App extends Component { 7 | 8 | componentDidMount(){ 9 | const rootRef = firebase.database().ref().child("message"); 10 | 11 | // Updating Values in firebase 12 | rootRef.set("Hello World").then(function (data){ 13 | console.log("save success on firebase ",data); 14 | }).catch(function (error){ 15 | console.log("error updating firebase ",error); 16 | });; 17 | } 18 | 19 | render() { 20 | return ( 21 |
22 | 23 |
24 | ); 25 | } 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-firebase-samples/01_react-firebase/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import * as firebase from 'firebase' 6 | 7 | // adding firebase configuration 8 | // Replace with your firebase configuration 9 | var firebaseConfig = { 10 | apiKey: "", 11 | authDomain: ".firebaseapp.com", 12 | databaseURL: "https://.firebaseio.com", 13 | }; 14 | firebase.initializeApp(firebaseConfig); 15 | 16 | 17 | ReactDOM.render( 18 | , 19 | document.getElementById('root') 20 | ); 21 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | React with core firebase sdk 8 | 9 | Listing to value from firebase 10 | 11 | 12 | Update below code with your firebase configuraiton in index.js 13 | 14 | `var firebaseConfig = { 15 | 16 | apiKey: "", 17 | 18 | authDomain: ".firebaseapp.com", 19 | 20 | databaseURL: "https://.firebaseio.com" 21 | 22 | };` 23 | 24 | 25 | Checkout following vidoes 26 | https://www.youtube.com/watch?v=mwNATxfUsgI 27 | 28 | https://www.youtube.com/watch?v=p4XTMvagQ2Q&t=79s 29 | 30 | https://firebase.googleblog.com/2014/05/using-firebase-with-reactjs.html 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "firebase": "^3.6.10", 10 | "react": "^15.4.2", 11 | "react-dom": "^15.4.2" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/02_react-firebase/public/favicon.ico -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/02_react-firebase/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/src/components/hello/Hello.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Hello.css'; 3 | 4 | class Hello extends Component { 5 | 6 | constructor(props){ 7 | super(props); 8 | this.state = { 9 | name: props.name 10 | } 11 | this.handelClick = this.handelClick.bind(this); 12 | } 13 | 14 | handelClick(){ 15 | alert("Hello World = "+this.props.name); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |
Hello World: {this.props.name}
22 |
Your age: {this.props.age}
23 |
Your email: {this.props.email}
24 | 25 |
26 | ); 27 | } 28 | } 29 | 30 | Hello.propTypes = { 31 | name: React.PropTypes.string.isRequired, 32 | age: React.PropTypes.number.isRequired 33 | }; 34 | Hello.defaultProps = { 35 | email: 'abc@gmail.com' 36 | }; 37 | export default Hello; 38 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Hello from '../../components/hello/Hello' 4 | import * as firebase from 'firebase'; 5 | 6 | class App extends Component { 7 | 8 | constructor(){ 9 | super(); 10 | this.state = { 11 | message : "Hello World" 12 | } 13 | } 14 | 15 | componentDidMount(){ 16 | const rootRef = firebase.database().ref().child("message"); 17 | 18 | // Updating Values in firebase 19 | rootRef.set("Hello World").then(function (data){ 20 | console.log("save success on firebase ",data); 21 | }).catch(function (error){ 22 | console.log("error updating firebase ",error); 23 | });; 24 | 25 | //Listing to value from firebase 26 | rootRef.on('value',snapshot=>{ 27 | this.setState({message:snapshot.val()}); 28 | }) 29 | } 30 | 31 | render() { 32 | return ( 33 |
34 | {this.state.message}
35 | 36 |
37 | ); 38 | } 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-firebase-samples/02_react-firebase/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import * as firebase from 'firebase' 6 | 7 | // adding firebase configuration 8 | // Replace with your firebase configuration 9 | var firebaseConfig = { 10 | apiKey: "", 11 | authDomain: ".firebaseapp.com", 12 | databaseURL: "https://.firebaseio.com", 13 | }; 14 | firebase.initializeApp(firebaseConfig); 15 | 16 | 17 | ReactDOM.render( 18 | , 19 | document.getElementById('root') 20 | ); 21 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | React with core firebase sdk 8 | 9 | Moving firebase configuration in firebase separate config file 10 | 11 | 12 | Update below code with your firebase configuraiton in config/index.js 13 | 14 | `var firebaseConfig = { 15 | 16 | apiKey: "", 17 | 18 | authDomain: ".firebaseapp.com", 19 | 20 | databaseURL: "https://.firebaseio.com" 21 | 22 | };` 23 | 24 | 25 | Checkout following vidoes 26 | https://www.youtube.com/watch?v=mwNATxfUsgI 27 | 28 | https://www.youtube.com/watch?v=p4XTMvagQ2Q&t=79s 29 | 30 | https://firebase.googleblog.com/2014/05/using-firebase-with-reactjs.html 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "firebase": "^3.6.10", 10 | "react": "^15.4.2", 11 | "react-dom": "^15.4.2" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/03_react-firebase/public/favicon.ico -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/03_react-firebase/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/src/components/hello/Hello.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Hello.css'; 3 | 4 | class Hello extends Component { 5 | 6 | constructor(props){ 7 | super(props); 8 | this.state = { 9 | name: props.name 10 | } 11 | this.handelClick = this.handelClick.bind(this); 12 | } 13 | 14 | handelClick(){ 15 | alert("Hello World = "+this.props.name); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |
Hello World: {this.props.name}
22 |
Your age: {this.props.age}
23 |
Your email: {this.props.email}
24 | 25 |
26 | ); 27 | } 28 | } 29 | 30 | Hello.propTypes = { 31 | name: React.PropTypes.string.isRequired, 32 | age: React.PropTypes.number.isRequired 33 | }; 34 | Hello.defaultProps = { 35 | email: 'abc@gmail.com' 36 | }; 37 | export default Hello; 38 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/src/config/index.js: -------------------------------------------------------------------------------- 1 | // This separate configuration file 2 | import * as firebase from 'firebase' 3 | 4 | // adding firebase configuration 5 | var firebaseConfig = { 6 | apiKey: "", 7 | authDomain: ".firebaseapp.com", 8 | databaseURL: "https://.firebaseio.com" 9 | } 10 | 11 | firebase.initializeApp(firebaseConfig); 12 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import * as firebase from 'firebase'; 4 | 5 | class App extends Component { 6 | 7 | constructor(){ 8 | super(); 9 | this.state = { 10 | message : "Hello World" 11 | } 12 | } 13 | 14 | componentDidMount(){ 15 | const rootRef = firebase.database().ref().child("message"); 16 | 17 | // Updating Values in firebase 18 | rootRef.set("Hello World").then(function (data){ 19 | console.log("save success on firebase ",data); 20 | }).catch(function (error){ 21 | console.log("error updating firebase ",error); 22 | });; 23 | 24 | //Listing to value from firebase 25 | rootRef.on('value',snapshot=>{ 26 | this.setState({message:snapshot.val()}); 27 | }) 28 | } 29 | 30 | render() { 31 | return ( 32 |
33 | {this.state.message}
34 | 35 |
36 | ); 37 | } 38 | } 39 | 40 | export default App; 41 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-firebase-samples/03_react-firebase/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | //Simply importing config file of firebase 7 | import './config' 8 | 9 | ReactDOM.render( 10 | , 11 | document.getElementById('root') 12 | ); 13 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | React with core reactfire 8 | 9 | Reading Object from firebase 10 | 11 | https://github.com/firebase/reactfire 12 | 13 | Reactfire use mixin which is not support in ES6, therefore we have separate module to suport mixin in ES6 14 | https://github.com/brigand/react-mixin 15 | 16 | 17 | To run this example, data strcuture required in firebase is below 18 | 19 | { 20 | users : { 21 | "first" : { 22 | name:"first name", 23 | age: 45 24 | }, 25 | "second": { 26 | name:"second user name", 27 | age: 20 28 | } 29 | } 30 | } 31 | 32 | 33 | 34 | 35 | Update below code with your firebase configuraiton in config/index.js 36 | 37 | `var firebaseConfig = { 38 | 39 | apiKey: "", 40 | 41 | authDomain: ".firebaseapp.com", 42 | 43 | databaseURL: "https://.firebaseio.com" 44 | 45 | };` 46 | 47 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "firebase": "^3.6.10", 10 | "react": "^15.4.2", 11 | "react-dom": "^15.4.2", 12 | "react-mixin": "^2.0.2", 13 | "reactfire": "^1.0.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/04_react-reactfire/public/favicon.ico -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/04_react-reactfire/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/src/components/hello/Hello.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Hello.css'; 3 | 4 | class Hello extends Component { 5 | 6 | constructor(props){ 7 | super(props); 8 | this.state = { 9 | name: props.name 10 | } 11 | this.handelClick = this.handelClick.bind(this); 12 | } 13 | 14 | handelClick(){ 15 | alert("Hello World = "+this.props.name); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |
Hello World: {this.props.name}
22 |
Your age: {this.props.age}
23 |
Your email: {this.props.email}
24 | 25 |
26 | ); 27 | } 28 | } 29 | 30 | Hello.propTypes = { 31 | name: React.PropTypes.string.isRequired, 32 | age: React.PropTypes.number.isRequired 33 | }; 34 | Hello.defaultProps = { 35 | email: 'abc@gmail.com' 36 | }; 37 | export default Hello; 38 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/src/config/index.js: -------------------------------------------------------------------------------- 1 | // This separate configuration file 2 | import * as firebase from 'firebase' 3 | 4 | // adding firebase configuration 5 | var firebaseConfig = { 6 | apiKey: "", 7 | authDomain: ".firebaseapp.com", 8 | databaseURL: "https://.firebaseio.com" 9 | } 10 | 11 | firebase.initializeApp(firebaseConfig); 12 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import * as firebase from 'firebase'; 4 | import * as reactfire from 'reactfire'; 5 | import reactMixin from 'react-mixin'; 6 | 7 | class App extends Component { 8 | 9 | constructor(){ 10 | super(); 11 | this.state = { 12 | user : { 13 | name:"", 14 | age:0 15 | } 16 | } 17 | } 18 | 19 | componentDidMount(){ 20 | const rootRef = firebase.database().ref().child("users/first"); 21 | this.bindAsObject(rootRef,"user"); 22 | } 23 | 24 | render() { 25 | return ( 26 |
27 | {this.state.user.name}
28 |
29 | ); 30 | } 31 | } 32 | reactMixin(App.prototype, reactfire); 33 | export default App; 34 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-firebase-samples/04_react-reactfire/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | //Simply importing config file of firebase 7 | import './config' 8 | 9 | ReactDOM.render( 10 | , 11 | document.getElementById('root') 12 | ); 13 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | React with core reactfire 8 | 9 | Reading List from firebase 10 | 11 | https://github.com/firebase/reactfire 12 | 13 | Reactfire use mixin which is not support in ES6, therefore we have separate module to suport mixin in ES6 14 | https://github.com/brigand/react-mixin 15 | 16 | To run this example, data strcuture required in firebase is below 17 | 18 | { 19 | users : { 20 | "first" : { 21 | name:"first name", 22 | age: 45 23 | }, 24 | "second": { 25 | name:"second user name", 26 | age: 20 27 | } 28 | } 29 | } 30 | 31 | 32 | Update below code with your firebase configuraiton in config/index.js 33 | 34 | `var firebaseConfig = { 35 | 36 | apiKey: "", 37 | 38 | authDomain: ".firebaseapp.com", 39 | 40 | databaseURL: "https://.firebaseio.com" 41 | 42 | };` 43 | 44 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "firebase": "^3.6.10", 10 | "react": "^15.4.2", 11 | "react-dom": "^15.4.2", 12 | "react-mixin": "^2.0.2", 13 | "reactfire": "^1.0.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/05_react-reactfire/public/favicon.ico -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-firebase-samples/05_react-reactfire/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/src/components/hello/Hello.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Hello.css'; 3 | 4 | class Hello extends Component { 5 | 6 | constructor(props){ 7 | super(props); 8 | this.state = { 9 | name: props.name 10 | } 11 | this.handelClick = this.handelClick.bind(this); 12 | } 13 | 14 | handelClick(){ 15 | alert("Hello World = "+this.props.name); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |
Hello World: {this.props.name}
22 |
Your age: {this.props.age}
23 |
Your email: {this.props.email}
24 | 25 |
26 | ); 27 | } 28 | } 29 | 30 | Hello.propTypes = { 31 | name: React.PropTypes.string.isRequired, 32 | age: React.PropTypes.number.isRequired 33 | }; 34 | Hello.defaultProps = { 35 | email: 'abc@gmail.com' 36 | }; 37 | export default Hello; 38 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/src/config/index.js: -------------------------------------------------------------------------------- 1 | // This separate configuration file 2 | import * as firebase from 'firebase' 3 | 4 | // adding firebase configuration 5 | var firebaseConfig = { 6 | apiKey: "AIzaSyDq4YtXDQtQbY7EgySPTjBmq3QHMN8Fs8k", 7 | authDomain: "demotest-8c044.firebaseapp.com", 8 | databaseURL: "https://demotest-8c044.firebaseio.com" 9 | } 10 | 11 | firebase.initializeApp(firebaseConfig); 12 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import * as firebase from 'firebase'; 4 | import * as reactfire from 'reactfire'; 5 | import reactMixin from 'react-mixin'; 6 | 7 | class App extends Component { 8 | 9 | constructor(){ 10 | super(); 11 | this.state = { 12 | users : [] 13 | } 14 | } 15 | 16 | componentDidMount(){ 17 | const rootRef = firebase.database().ref().child("users"); 18 | this.bindAsArray(rootRef,"users"); 19 | } 20 | 21 | render() { 22 | return ( 23 |
24 | { 25 | this.state.users.map((user,index)=>{ 26 | return
{user.name}
27 | }) 28 | } 29 |
30 |
31 | ); 32 | } 33 | } 34 | reactMixin(App.prototype, reactfire); 35 | export default App; 36 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-firebase-samples/05_react-reactfire/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | //Simply importing config file of firebase 7 | import './config' 8 | 9 | ReactDOM.render( 10 | , 11 | document.getElementById('root') 12 | ); 13 | -------------------------------------------------------------------------------- /react-menu-sample/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-menu-sample/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | This sample will test 8 | 1) Properties 9 | 2) States 10 | 3) JSX 11 | 4) Lifecycle Events 12 | 13 | -------------------------------------------------------------------------------- /react-menu-sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /react-menu-sample/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-menu-sample/public/favicon.ico -------------------------------------------------------------------------------- /react-menu-sample/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-menu-sample/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-menu-sample/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-menu-sample/src/components/link/Link.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-menu-sample/src/components/link/Link.css -------------------------------------------------------------------------------- /react-menu-sample/src/components/link/Link.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Link.css'; 3 | 4 | class Link extends Component { 5 | 6 | render() { 7 | const url='/'+ this.props.label.toLowerCase().trim().replace(' ', '-'); 8 | return ( 9 |
10 | {this.props.label} 11 |
12 |
13 | ); 14 | } 15 | } 16 | 17 | export default Link; 18 | -------------------------------------------------------------------------------- /react-menu-sample/src/components/menu/Menu.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-menu-sample/src/components/menu/Menu.css -------------------------------------------------------------------------------- /react-menu-sample/src/components/menu/Menu.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Link from '../link/Link' 3 | import './Menu.css'; 4 | //const menu = require('../../menu.json'); 5 | import menu from '../../menu.json'; 6 | 7 | class Menu extends Component { 8 | 9 | render() { 10 | /*let menu = [ 11 | "Home", 12 | "About", 13 | "Services", 14 | "Portfolio", 15 | "Contact us" 16 | ];*/ 17 | return ( 18 |
19 | { 20 | menu.map((v,i)=>{ 21 | return
22 | }) 23 | } 24 |
25 | ); 26 | } 27 | } 28 | 29 | export default Menu; 30 | -------------------------------------------------------------------------------- /react-menu-sample/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-menu-sample/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Menu from '../../components/menu/Menu' 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /react-menu-sample/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-menu-sample/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /react-menu-sample/src/menu.json: -------------------------------------------------------------------------------- 1 | [ 2 | "Home", 3 | "About", 4 | "Services", 5 | "Portfolio", 6 | "Contact us" 7 | ] -------------------------------------------------------------------------------- /react-movielist/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-movielist/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | This sample will test 8 | 1) Properties 9 | 2) States 10 | 3) JSX 11 | 4) Lifecycle Events 12 | 13 | -------------------------------------------------------------------------------- /react-movielist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-router": "^3.0.2" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /react-movielist/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-movielist/public/favicon.ico -------------------------------------------------------------------------------- /react-movielist/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-movielist/src/components/Movie/Movie.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Link} from 'react-router'; 3 | import './Movie.css'; 4 | import movies from '../../moviesdata.json'; 5 | 6 | class Movie extends Component { 7 | 8 | render() { 9 | let movie = movies[this.props.params.id]; 10 | return ( 11 |
14 |
17 |
18 |
{movie.title}
19 |
{movie.year}
20 |
21 | {movie.starring.map((actor = {}, index) => ( 22 |
25 | {actor.name} 26 |
27 | ))} 28 |
29 |
30 | 33 | ← 34 | 35 |
36 | ); 37 | } 38 | } 39 | 40 | export default Movie; 41 | -------------------------------------------------------------------------------- /react-movielist/src/components/Movies/Movies.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Link} from 'react-router'; 3 | import './Movies.css'; 4 | 5 | import movies from '../../moviesdata.json'; 6 | 7 | class Movies extends Component { 8 | 9 | render() { 10 | //console.log(styles) 11 | return ( 12 |
13 |
14 | {movies.map((movie, index) => ( 15 | 16 |
18 | 19 |
20 | 21 | ))} 22 |
23 | {this.props.children} 24 |
25 | ); 26 | } 27 | } 28 | 29 | export default Movies; 30 | -------------------------------------------------------------------------------- /react-movielist/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | border: none; 6 | font-family: 'Helvetica Neue', sans-serif; 7 | font-size: 16px; 8 | } 9 | 10 | .app { 11 | height: 100vh; 12 | width: 100vw; 13 | } -------------------------------------------------------------------------------- /react-movielist/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 | {this.props.children} 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-movielist/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-movielist/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {Router, Route,IndexRoute, browserHistory} from 'react-router'; 4 | 5 | import App from './containers/app/App'; 6 | 7 | import Movies from './components/Movies/Movies'; 8 | import Movie from './components/Movie/Movie'; 9 | import './index.css'; 10 | 11 | ReactDOM.render(( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ), 21 | document.getElementById('root') 22 | ); 23 | -------------------------------------------------------------------------------- /react-movielist/src/posts.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "slug": "http2", 3 | "title": "Implementing HTTP/2 with Node.js and Express", 4 | "link": "http://webapplog.com/http2-node/", 5 | "text": "The modern Internet with its TCP/IP protocol started around 1975 which is astonishing 41 years ago. For the most part of its existence, we used HTTP and it’s successor HTTP/1.1 (version 1.1) to communicate between clients and servers." 6 | }, { 7 | "slug": "es6", 8 | "title": "Top 10 ES6 Features Every Busy JavaScript Developer Must Know", 9 | "link": "http://webapplog.com/es6/", 10 | "text": "This essay will give you a quick introduction to ES6. If you don’t know what is ES6, it’s a new JavaScript implementation..." 11 | }, { 12 | "slug": "you-dont-know-node", 13 | "title": "You Don't Know Node: Quick Intro to Core Features", 14 | "link": "http://webapplog.com/you-dont-know-node/", 15 | "text": "This is a kitchen sink of subjectively the most interesting core features. The key takeaways of this essay are:..." 16 | } 17 | ] -------------------------------------------------------------------------------- /react-redux-movielist/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-movielist/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | This samples cover Chapter 14 of React Quick "Working with Data Using Redux" 8 | but with few additional features like 9 | 10 | 1) Proper project structure 11 | 12 | 2) Separate Routes file 13 | 14 | 3) Separate Redux store folder 15 | 16 | 4) Single import for Component and Containers 17 | -------------------------------------------------------------------------------- /react-redux-movielist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.2", 12 | "react-router": "^3.0.2", 13 | "redux": "^3.6.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /react-redux-movielist/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-movielist/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-movielist/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-movielist/src/components/index.js: -------------------------------------------------------------------------------- 1 | import Movies from './Movies/Movies' 2 | import Movie from './Movie/Movie' 3 | 4 | export { 5 | Movies, 6 | Movie 7 | } -------------------------------------------------------------------------------- /react-redux-movielist/src/containers/App/App.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | border: none; 6 | font-family: 'Helvetica Neue', sans-serif; 7 | font-size: 16px; 8 | } 9 | 10 | .app { 11 | height: 100vh; 12 | width: 100vw; 13 | } -------------------------------------------------------------------------------- /react-redux-movielist/src/containers/App/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 | {this.props.children} 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-redux-movielist/src/containers/index.js: -------------------------------------------------------------------------------- 1 | import App from './App/App' 2 | 3 | export { 4 | App 5 | } -------------------------------------------------------------------------------- /react-redux-movielist/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-movielist/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Provider } from 'react-redux' 4 | import { store } from './store' 5 | import routes from './routes' 6 | import './index.css'; 7 | 8 | ReactDOM.render(( 9 | 10 | {routes} 11 | 12 | ), 13 | document.getElementById('root') 14 | ); 15 | -------------------------------------------------------------------------------- /react-redux-movielist/src/routes.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Router, 4 | Route, 5 | IndexRoute, 6 | browserHistory 7 | } from 'react-router' 8 | 9 | import { App } from './containers' 10 | import {Movies, Movie} from './components' 11 | 12 | export default ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ) -------------------------------------------------------------------------------- /react-redux-movielist/src/store/actions/movie.js: -------------------------------------------------------------------------------- 1 | export default class MovieActions { 2 | 3 | static FETCH_MOVIES = 'movies/FETCH_MOVIES'; 4 | static FETCH_MOVIE = 'movies/FETCH_MOVIE'; 5 | 6 | 7 | static fetchedMovies(movies) { 8 | return { 9 | type: MovieActions.FETCH_MOVIES, 10 | movies 11 | } 12 | } 13 | 14 | static fetchMovie(index) { 15 | return { 16 | type: MovieActions.FETCH_MOVIE, 17 | index 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /react-redux-movielist/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | //import { reducer as movies } from './movies'; 3 | import { createStore } from 'redux' 4 | import MovieReducer from './reducers/movie'; 5 | 6 | 7 | export const rootReducer = combineReducers({ 8 | MovieReducer 9 | // more reducers go here 10 | }) 11 | 12 | export let store = createStore( 13 | rootReducer, 14 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 15 | ); -------------------------------------------------------------------------------- /react-redux-movielist/src/store/reducers/movie.js: -------------------------------------------------------------------------------- 1 | import MovieActions from "./../actions/movie"; 2 | 3 | const INITIAL_STATE = { 4 | movies: [], 5 | movie: {starring:[]}, 6 | shan:{} 7 | } 8 | 9 | function MovieReducer(state = INITIAL_STATE, action) { 10 | switch(action.type) { 11 | case MovieActions.FETCH_MOVIES: 12 | let obj1 = Object.assign({}, state, { movies: action.movies }); 13 | console.log("obj movies",obj1.movies); 14 | return obj1; 15 | /* 16 | return { 17 | ...state, 18 | all: action.movies 19 | }*/ 20 | case MovieActions.FETCH_MOVIE: 21 | console.log("movie data reducer = ",state.movies[action.index] ); 22 | let obj = Object.assign({}, state, { movie: state.movies[action.index] }); 23 | console.log("obj",obj.movie); 24 | return obj; 25 | /* 26 | return { 27 | ...state, 28 | current: action.movie 29 | } 30 | */ 31 | default: 32 | return state; 33 | } 34 | } 35 | 36 | export default MovieReducer; -------------------------------------------------------------------------------- /react-redux-sample/README.md: -------------------------------------------------------------------------------- 1 | # Step by Step React Redux Sample 2 | 3 | Follow the steps one by one and it help you develop understanding of Redux with React 4 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Very basic Example of Redux from [ReduxJS](http://redux.js.org/) Website 7 | 8 | It will show counter in console log and will give you initial idea of redux 9 | 10 | Redux is broken into following 11 | 12 | 1) Store 13 | 14 | 2) Action 15 | 16 | 3) Reducer 17 | 18 | 4) Middleware 19 | 20 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_1/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 | App 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | import { createStore } from 'redux' 7 | 8 | function counter(state = 0, action) { 9 | switch (action.type) { 10 | case 'INCREMENT': 11 | return state + 1 12 | case 'DECREMENT': 13 | return state - 1 14 | default: 15 | return state 16 | } 17 | } 18 | 19 | let store = createStore(counter) 20 | 21 | store.subscribe(() => 22 | console.log(store.getState()) 23 | ) 24 | 25 | // The only way to mutate the internal state is to dispatch an action. 26 | // The actions can be serialized, logged or stored and later replayed. 27 | store.dispatch({ type: 'INCREMENT' }) 28 | // 1 29 | store.dispatch({ type: 'INCREMENT' }) 30 | // 2 31 | store.dispatch({ type: 'DECREMENT' }) 32 | // 1 33 | 34 | ReactDOM.render( 35 | 36 | , 37 | document.getElementById('root') 38 | ); 39 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 10: 9 | Using object for state management of Redux. We will return object from reducer and maintain state as Objects for each reducer. 10 | 11 | See Reducer's code 12 | 13 | We will use Object.assign in reducer to copy all data from old state object to new object and then return new object. 14 | We should never update existing object in reducer, it should be treated as immutable 15 | 16 | Now in mapStateToProps function we will have state.reducer.object 17 | 18 | In our case it willbe state.incrementCounter.incrementState or state.decrementCounter.decrementState -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_10/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | 7 | import store from './store' 8 | import { Provider } from 'react-redux' 9 | 10 | //Update in counter 8 -- import counter action -- 11 | // in normal case we will not import actions here in main indexjs but we will use it in each container or component 12 | import CounterAction from './store/actions/counter' 13 | 14 | // update in counter 6 -- sending value in action 15 | function handleIncrement(){ 16 | //store.dispatch({ type: 'INCREMENT_WITH_VALUE', val:2 }) 17 | // Update in Counter 8 18 | store.dispatch(CounterAction.incrementWithValue(2)) 19 | } 20 | 21 | ReactDOM.render( 22 | 23 | //Wraping up in Provider 24 | 25 | 26 |
27 | 28 |
29 |
30 | Events from Index.jxs
31 |
32 |
33 |
34 |
35 |
36 | 37 | , 38 | document.getElementById('root') 39 | ); 40 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/src/store/actions/counter.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 8 -- Separate action file as class 2 | export default class CounterAction { 3 | 4 | // static properties to be used in reducer for switch cases 5 | static INCREMENT = "INCREMENT"; 6 | static DECREMENT = "DECREMENT"; 7 | static INCREMENT_WITH_VALUE = "INCREMENT_WITH_VALUE"; 8 | static DECREMENT_WITH_VALUE = "DECREMENT_WITH_VALUE"; 9 | 10 | // static functions to be mapped with dispatch in component 11 | static increment(){ 12 | return { 13 | type: 'INCREMENT' 14 | } 15 | } 16 | 17 | static decrement(){ 18 | return { 19 | type: 'DECREMENT' 20 | } 21 | } 22 | 23 | static incrementWithValue(value){ 24 | return { 25 | type: 'INCREMENT_WITH_VALUE', 26 | val: value 27 | } 28 | } 29 | 30 | static decrementWithValue(value){ 31 | return { 32 | type: 'DECREMENT_WITH_VALUE', 33 | val: value 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_10/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | //Update in counter 9 -- import combineReducers to combine all reducers 3 | import { combineReducers } from 'redux'; 4 | 5 | import incrementCounter from './reducers/incrementCounter'; 6 | import decrementCounter from './reducers/decrementCounter'; 7 | 8 | //Update in counter 9 -- this will combine all reducers in one 9 | export const rootReducer = combineReducers({ 10 | incrementCounter, 11 | decrementCounter 12 | // more reducers go here 13 | }) 14 | 15 | //Update in counter 9 -- passing root reducer 16 | let store = createStore(rootReducer) 17 | 18 | store.subscribe(() => 19 | console.log(store.getState()) 20 | ); 21 | 22 | export default store; 23 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 11: 9 | Create dump component that will not talk to redux and parent container component will update it -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_11/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/src/components/counter/Counter.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_11/src/components/counter/Counter.css -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/src/components/counter/Counter.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Counter.css'; 3 | 4 | class Counter extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 |
10 | In Counter jsx 11 |
12 |
13 | Counter {this.props.counter} 14 |
15 |
16 | ); 17 | } 18 | } 19 | 20 | export default Counter; 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import store from './store' 6 | import { Provider } from 'react-redux' 7 | 8 | ReactDOM.render( 9 | //Wraping up in Provider 10 | 11 |
12 | 13 |
14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/src/store/actions/counter.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 8 -- Separate action file as class 2 | export default class CounterAction { 3 | 4 | // static properties to be used in reducer for switch cases 5 | static INCREMENT = "INCREMENT"; 6 | static DECREMENT = "DECREMENT"; 7 | static INCREMENT_WITH_VALUE = "INCREMENT_WITH_VALUE"; 8 | static DECREMENT_WITH_VALUE = "DECREMENT_WITH_VALUE"; 9 | 10 | // static functions to be mapped with dispatch in component 11 | static increment(){ 12 | return { 13 | type: 'INCREMENT' 14 | } 15 | } 16 | 17 | static decrement(){ 18 | return { 19 | type: 'DECREMENT' 20 | } 21 | } 22 | 23 | static incrementWithValue(value){ 24 | return { 25 | type: 'INCREMENT_WITH_VALUE', 26 | val: value 27 | } 28 | } 29 | 30 | static decrementWithValue(value){ 31 | return { 32 | type: 'DECREMENT_WITH_VALUE', 33 | val: value 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_11/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | //Update in counter 9 -- import combineReducers to combine all reducers 3 | import { combineReducers } from 'redux'; 4 | 5 | import incrementCounter from './reducers/incrementCounter'; 6 | import decrementCounter from './reducers/decrementCounter'; 7 | 8 | //Update in counter 9 -- this will combine all reducers in one 9 | export const rootReducer = combineReducers({ 10 | incrementCounter, 11 | decrementCounter 12 | // more reducers go here 13 | }) 14 | 15 | //Update in counter 9 -- passing root reducer 16 | let store = createStore(rootReducer) 17 | 18 | store.subscribe(() => 19 | console.log(store.getState()) 20 | ); 21 | 22 | export default store; 23 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 12: 9 | Create dump component that will not talk to redux and parent container component will update it 10 | 11 | ##IMPORTANT: 12 | In this example Counter component will not talk to redux directly. 13 | App component will provide function to Counter component and Counter component 14 | will call that function to pass value to App component then Redux store will be 15 | update by App component -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_12/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/src/components/counter/Counter.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_12/src/components/counter/Counter.css -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import store from './store' 6 | import { Provider } from 'react-redux' 7 | 8 | ReactDOM.render( 9 | //Wraping up in Provider 10 | 11 |
12 | 13 |
14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/src/store/actions/counter.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 8 -- Separate action file as class 2 | export default class CounterAction { 3 | 4 | // static properties to be used in reducer for switch cases 5 | static INCREMENT = "INCREMENT"; 6 | static DECREMENT = "DECREMENT"; 7 | static INCREMENT_WITH_VALUE = "INCREMENT_WITH_VALUE"; 8 | static DECREMENT_WITH_VALUE = "DECREMENT_WITH_VALUE"; 9 | 10 | // static functions to be mapped with dispatch in component 11 | static increment(){ 12 | return { 13 | type: 'INCREMENT' 14 | } 15 | } 16 | 17 | static decrement(){ 18 | return { 19 | type: 'DECREMENT' 20 | } 21 | } 22 | 23 | static incrementWithValue(value){ 24 | return { 25 | type: 'INCREMENT_WITH_VALUE', 26 | val: value 27 | } 28 | } 29 | 30 | static decrementWithValue(value){ 31 | return { 32 | type: 'DECREMENT_WITH_VALUE', 33 | val: value 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_12/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | //Update in counter 9 -- import combineReducers to combine all reducers 3 | import { combineReducers } from 'redux'; 4 | 5 | import incrementCounter from './reducers/incrementCounter'; 6 | import decrementCounter from './reducers/decrementCounter'; 7 | 8 | //Update in counter 9 -- this will combine all reducers in one 9 | export const rootReducer = combineReducers({ 10 | incrementCounter, 11 | decrementCounter 12 | // more reducers go here 13 | }) 14 | 15 | //Update in counter 9 -- passing root reducer 16 | let store = createStore(rootReducer) 17 | 18 | store.subscribe(() => 19 | console.log(store.getState()) 20 | ); 21 | 22 | export default store; 23 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 13: 9 | Adding middleware and Redux thunk -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0", 13 | "redux-thunk": "^2.2.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_13/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/src/components/counter/Counter.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_13/src/components/counter/Counter.css -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import store from './store' 6 | import { Provider } from 'react-redux' 7 | 8 | ReactDOM.render( 9 | //Wraping up in Provider 10 | 11 |
12 | 13 |
14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/src/store/actions/counter.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 8 -- Separate action file as class 2 | export default class CounterAction { 3 | 4 | // static properties to be used in reducer for switch cases 5 | static INCREMENT = "INCREMENT"; 6 | static DECREMENT = "DECREMENT"; 7 | static INCREMENT_WITH_VALUE = "INCREMENT_WITH_VALUE"; 8 | static DECREMENT_WITH_VALUE = "DECREMENT_WITH_VALUE"; 9 | 10 | // static functions to be mapped with dispatch in component 11 | static increment(){ 12 | return { 13 | type: 'INCREMENT' 14 | } 15 | } 16 | 17 | static decrement(){ 18 | return { 19 | type: 'DECREMENT' 20 | } 21 | } 22 | 23 | static incrementWithValue(value){ 24 | return { 25 | type: 'INCREMENT_WITH_VALUE', 26 | val: value 27 | } 28 | } 29 | 30 | static decrementWithValue(value){ 31 | return { 32 | type: 'DECREMENT_WITH_VALUE', 33 | val: value 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | //Update in counter 9 -- import combineReducers to combine all reducers 3 | import { combineReducers, applyMiddleware } from 'redux'; 4 | import thunk from 'redux-thunk'; 5 | 6 | import incrementCounter from './reducers/incrementCounter'; 7 | import decrementCounter from './reducers/decrementCounter'; 8 | 9 | //Update in counter 13 -- call applyMiddleware 10 | const middleware = applyMiddleware(thunk); 11 | 12 | 13 | //Update in counter 9 -- this will combine all reducers in one 14 | export const rootReducer = combineReducers({ 15 | incrementCounter, 16 | decrementCounter 17 | // more reducers go here 18 | }) 19 | 20 | //Update in counter 9 -- passing root reducer 21 | //Update in counter 13 -- pass middleware in createStore 22 | let store = createStore( 23 | rootReducer, 24 | middleware 25 | ) 26 | 27 | store.subscribe(() => 28 | console.log(store.getState()) 29 | ); 30 | 31 | export default store; 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_13/src/store/middlewares/counterMiddleware.js: -------------------------------------------------------------------------------- 1 | import CounterAction from "./../actions/counter"; 2 | 3 | //Update in counter 13 -- create Middleware 4 | export default class CounterMiddleware { 5 | 6 | //Update in counter 13 -- This function will be called 7 | static asyncIncrement(data) { 8 | console.log("test ",data); 9 | return (dispatch) => { 10 | // My Business logic Here 11 | data = data * 2; 12 | dispatch(CounterAction.incrementWithValue(data)) 13 | } 14 | } 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | } 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 14: 9 | Adding redux-observable and Epics -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0", 13 | "redux-observable": "^0.14.1", 14 | "rxjs": "^5.3.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_14/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/src/components/counter/Counter.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_14/src/components/counter/Counter.css -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import store from './store' 6 | import { Provider } from 'react-redux' 7 | 8 | ReactDOM.render( 9 | //Wraping up in Provider 10 | 11 |
12 | 13 |
14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/src/store/actions/counter.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 8 -- Separate action file as class 2 | export default class CounterAction { 3 | 4 | // static properties to be used in reducer for switch cases 5 | static INCREMENT = "INCREMENT"; 6 | static DECREMENT = "DECREMENT"; 7 | static INCREMENT_WITH_VALUE = "INCREMENT_WITH_VALUE"; 8 | static DECREMENT_WITH_VALUE = "DECREMENT_WITH_VALUE"; 9 | static INCREMENT_WITH_VALUE_SUCCESSFUL = "INCREMENT_WITH_VALUE_SUCCESSFUL"; 10 | 11 | // static functions to be mapped with dispatch in component 12 | static increment(){ 13 | return { 14 | type: 'INCREMENT' 15 | } 16 | } 17 | 18 | static decrement(){ 19 | return { 20 | type: 'DECREMENT' 21 | } 22 | } 23 | 24 | static incrementWithValue(value){ 25 | return { 26 | type: 'INCREMENT_WITH_VALUE', 27 | val: value 28 | } 29 | } 30 | 31 | static incrementWithValueSuccessful(value){ 32 | return { 33 | type: 'INCREMENT_WITH_VALUE_SUCCESSFUL', 34 | val: value 35 | } 36 | } 37 | 38 | 39 | 40 | static decrementWithValue(value){ 41 | return { 42 | type: 'DECREMENT_WITH_VALUE', 43 | val: value 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_14/src/store/epics/counterEpic.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 14 -- Creating Epic 2 | import { Observable } from 'rxjs'; 3 | import CounterAction from '../actions/counter' 4 | export default class CounterEpic { 5 | 6 | static incrementWithValue(action$){ 7 | console.log(action$); 8 | 9 | return action$.ofType(CounterAction.INCREMENT_WITH_VALUE) 10 | .mergeMap(()=>{ 11 | // Server call, firebase call or any other business logic 12 | // Using hard coded values 13 | return Observable.of(CounterAction.incrementWithValueSuccessful(5)); 14 | }) 15 | } 16 | 17 | /* 18 | static incrementWithValue(action$){ 19 | action$.ofType(CounterAction.INCREMENT_WITH_VALUE) 20 | .mergeMap(()=>{ 21 | Observable.of({ 22 | type: 'INCREMENT_WITH_VALUE', 23 | val: value 24 | }) 25 | }) 26 | } 27 | */ 28 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 15: 9 | Adding redux-observable and Epics 10 | Receiving value in epic function when passed in action -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0", 13 | "redux-observable": "^0.14.1", 14 | "rxjs": "^5.3.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_15/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/src/components/counter/Counter.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_15/src/components/counter/Counter.css -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import store from './store' 6 | import { Provider } from 'react-redux' 7 | 8 | ReactDOM.render( 9 | //Wraping up in Provider 10 | 11 |
12 | 13 |
14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/src/store/actions/counter.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 8 -- Separate action file as class 2 | export default class CounterAction { 3 | 4 | // static properties to be used in reducer for switch cases 5 | static INCREMENT = "INCREMENT"; 6 | static DECREMENT = "DECREMENT"; 7 | static INCREMENT_WITH_VALUE = "INCREMENT_WITH_VALUE"; 8 | static DECREMENT_WITH_VALUE = "DECREMENT_WITH_VALUE"; 9 | static INCREMENT_WITH_VALUE_SUCCESSFUL = "INCREMENT_WITH_VALUE_SUCCESSFUL"; 10 | 11 | // static functions to be mapped with dispatch in component 12 | static increment(){ 13 | return { 14 | type: 'INCREMENT' 15 | } 16 | } 17 | 18 | static decrement(){ 19 | return { 20 | type: 'DECREMENT' 21 | } 22 | } 23 | 24 | static incrementWithValue(value){ 25 | return { 26 | type: 'INCREMENT_WITH_VALUE', 27 | val: value 28 | } 29 | } 30 | 31 | static incrementWithValueSuccessful(value){ 32 | return { 33 | type: 'INCREMENT_WITH_VALUE_SUCCESSFUL', 34 | val: value 35 | } 36 | } 37 | 38 | 39 | 40 | static decrementWithValue(value){ 41 | return { 42 | type: 'DECREMENT_WITH_VALUE', 43 | val: value 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_15/src/store/epics/counterEpic.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 14 -- Creating Epic 2 | import { Observable } from 'rxjs'; 3 | import CounterAction from '../actions/counter' 4 | export default class CounterEpic { 5 | 6 | static incrementWithValue(action$){ 7 | console.log(action$); 8 | 9 | return action$.ofType(CounterAction.INCREMENT_WITH_VALUE) 10 | // Update in counter 15: receiving value from user when passed in action 11 | .mergeMap(({val})=>{ 12 | // Server call, firebase call or any other business logic 13 | return Observable.of(CounterAction.incrementWithValueSuccessful(val)); 14 | }) 15 | } 16 | 17 | /* 18 | static incrementWithValue(action$){ 19 | action$.ofType(CounterAction.INCREMENT_WITH_VALUE) 20 | .mergeMap(()=>{ 21 | Observable.of({ 22 | type: 'INCREMENT_WITH_VALUE', 23 | val: value 24 | }) 25 | }) 26 | } 27 | */ 28 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_2/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_2/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux and introduced following in this example 7 | 8 | 1) Provider 9 | 10 | 2) mapStateToProps function 11 | 12 | 3) connect function -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_2/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_2/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_2/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import './App.css'; 4 | 5 | // Mapping the component's property to Redux's state 6 | function mapStateToProps(state) { 7 | return { 8 | // counter - this will be component's property counter and can be accessed 9 | // as this.props.counter 10 | // state - this will be the state of redux, whatever value we return from 11 | // reducer function will be in state, for now we are sending simple numaric 12 | // value therefore it will be simple integer 13 | counter: state, 14 | }; 15 | } 16 | 17 | class App extends Component { 18 | render() { 19 | return ( 20 |
21 | App {this.props.counter} 22 |
23 | ); 24 | } 25 | } 26 | 27 | // connect function will wrap component and attached properties 28 | // from mapStateToProps into App component 29 | export default connect(mapStateToProps)(App); 30 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_2/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_3/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_3/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux and introduced following in this example 7 | 8 | 1) Provider 9 | 10 | 2) mapStateToProps function 11 | 12 | 3) connect function 13 | 14 | 15 | Update in Counter 3 is button and click event in index.jsx -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_3/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_3/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_3/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import './App.css'; 4 | 5 | // Mapping the component's property to Redux's state 6 | function mapStateToProps(state) { 7 | return { 8 | // counter - this will be component's property counter and can be accessed 9 | // as this.props.counter 10 | // state - this will be the state of redux, whatever value we return from 11 | // reducer function will be in state, for now we are sending simple numaric 12 | // value therefore it will be simple integer 13 | counter: state, 14 | }; 15 | } 16 | 17 | class App extends Component { 18 | render() { 19 | return ( 20 |
21 | App {this.props.counter} 22 |
23 | ); 24 | } 25 | } 26 | 27 | // connect function will wrap component and attached properties 28 | // from mapStateToProps into App component 29 | export default connect(mapStateToProps)(App); 30 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_3/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_4/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_4/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 4: 9 | 1) mapDispatchToProps fucntion in App component 10 | 11 | 2) passing it to connect function for App component 12 | 13 | 3) creating buttons inside app component and calling functions onClick with this.props.increment and this.props.decrement 14 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_4/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_4/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_4/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_4/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_4/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 5: 9 | Only difference is moving redux store logic in separate folder and create separate reducer file -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_5/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | // updated in counter 5 -- importing store form store folder's index.js 7 | import store from './store' 8 | import { Provider } from 'react-redux' 9 | 10 | function handleIncrement(){ 11 | store.dispatch({ type: 'INCREMENT' }) 12 | } 13 | 14 | ReactDOM.render( 15 | 16 | //Wraping up in Provider 17 | 18 | 19 |
20 | 21 |
22 |
23 | Events from Index.jxs
24 |
25 |
26 |
27 |
28 |
29 | 30 | , 31 | document.getElementById('root') 32 | ); 33 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | 3 | // update in counter 5 -- importing counter reducer from separate reducer folder 4 | import counter from './reducers/counter'; 5 | 6 | let store = createStore(counter) 7 | 8 | store.subscribe(() => 9 | console.log(store.getState()) 10 | ); 11 | 12 | export default store; 13 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_5/src/store/reducers/counter.js: -------------------------------------------------------------------------------- 1 | // update in counter 5 -- keeping reducer function in separate file 2 | 3 | //value is state, but we need to use state property in component 4 | // that's why i have changed variable name here 5 | function counter(value = 0, action) { 6 | switch (action.type) { 7 | case 'INCREMENT': 8 | // IMPORTANT: returning simple value therefore it will be avaiable as 9 | // simple value and not as object 10 | return value + 1 11 | case 'DECREMENT': 12 | return value - 1 13 | default: 14 | return value 15 | } 16 | } 17 | 18 | export default counter; -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 6: 9 | Sending values in action to update state based on different values sent by user -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_6/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | 7 | import store from './store' 8 | import { Provider } from 'react-redux' 9 | 10 | // update in counter 6 -- sending value in action 11 | function handleIncrement(){ 12 | store.dispatch({ type: 'INCREMENT_WITH_VALUE', val:2 }) 13 | } 14 | 15 | ReactDOM.render( 16 | 17 | //Wraping up in Provider 18 | 19 | 20 |
21 | 22 |
23 |
24 | Events from Index.jxs
25 |
26 |
27 |
28 |
29 |
30 | 31 | , 32 | document.getElementById('root') 33 | ); 34 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | 3 | import counter from './reducers/counter'; 4 | 5 | let store = createStore(counter) 6 | 7 | store.subscribe(() => 8 | console.log(store.getState()) 9 | ); 10 | 11 | export default store; 12 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_6/src/store/reducers/counter.js: -------------------------------------------------------------------------------- 1 | // update in counter 5 -- keeping reducer function in separate file 2 | 3 | //value is state, but we need to use state property in component 4 | // that's why i have changed variable name here 5 | function counter(value = 0, action) { 6 | switch (action.type) { 7 | case 'INCREMENT': 8 | // IMPORTANT: returning simple value therefore it will be avaiable as 9 | // simple value and not as object 10 | return value + 1 11 | case 'DECREMENT': 12 | return value - 1 13 | // Update in counter 6 -- more type of actions 14 | case 'INCREMENT_WITH_VALUE': 15 | return value + action.val; 16 | case 'DECREMENT_WITH_VALUE': 17 | return value - action.val; 18 | default: 19 | return value 20 | } 21 | } 22 | 23 | export default counter; -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 7: 9 | Sending values in action based on user input, getting value from input box updating component state and then send value to action to update redux store -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_7/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | 7 | import store from './store' 8 | import { Provider } from 'react-redux' 9 | 10 | // update in counter 6 -- sending value in action 11 | function handleIncrement(){ 12 | store.dispatch({ type: 'INCREMENT_WITH_VALUE', val:2 }) 13 | } 14 | 15 | ReactDOM.render( 16 | 17 | //Wraping up in Provider 18 | 19 | 20 |
21 | 22 |
23 |
24 | Events from Index.jxs
25 |
26 |
27 |
28 |
29 |
30 | 31 | , 32 | document.getElementById('root') 33 | ); 34 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | 3 | import counter from './reducers/counter'; 4 | 5 | let store = createStore(counter) 6 | 7 | store.subscribe(() => 8 | console.log(store.getState()) 9 | ); 10 | 11 | export default store; 12 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_7/src/store/reducers/counter.js: -------------------------------------------------------------------------------- 1 | // update in counter 5 -- keeping reducer function in separate file 2 | 3 | //value is state, but we need to use state property in component 4 | // that's why i have changed variable name here 5 | function counter(value = 0, action) { 6 | switch (action.type) { 7 | case 'INCREMENT': 8 | // IMPORTANT: returning simple value therefore it will be avaiable as 9 | // simple value and not as object 10 | return value + 1 11 | case 'DECREMENT': 12 | return value - 1 13 | // Update in counter 6 -- more type of actions 14 | case 'INCREMENT_WITH_VALUE': 15 | return value + action.val; 16 | case 'DECREMENT_WITH_VALUE': 17 | return value - action.val; 18 | default: 19 | return value 20 | } 21 | } 22 | 23 | export default counter; -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 8: 9 | Created Separate action file and use Action class with static properties and static functions. 10 | Whenever we want to dispatch an action we will call these functions. 11 | Also in reducer we will use static properties of action in switch case -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_8/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | 7 | import store from './store' 8 | import { Provider } from 'react-redux' 9 | 10 | //Update in counter 8 -- import counter action -- 11 | // in normal case we will not import actions here in main indexjs but we will use it in each container or component 12 | import CounterAction from './store/actions/counter' 13 | 14 | // update in counter 6 -- sending value in action 15 | function handleIncrement(){ 16 | //store.dispatch({ type: 'INCREMENT_WITH_VALUE', val:2 }) 17 | // Update in Counter 8 18 | store.dispatch(CounterAction.incrementWithValue(2)) 19 | } 20 | 21 | ReactDOM.render( 22 | 23 | //Wraping up in Provider 24 | 25 | 26 |
27 | 28 |
29 |
30 | Events from Index.jxs
31 |
32 |
33 |
34 |
35 |
36 | 37 | , 38 | document.getElementById('root') 39 | ); 40 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/src/store/actions/counter.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 8 -- Separate action file as class 2 | export default class CounterAction { 3 | 4 | // static properties to be used in reducer for switch cases 5 | static INCREMENT = "INCREMENT"; 6 | static DECREMENT = "DECREMENT"; 7 | static INCREMENT_WITH_VALUE = "INCREMENT_WITH_VALUE"; 8 | static DECREMENT_WITH_VALUE = "DECREMENT_WITH_VALUE"; 9 | 10 | // static functions to be mapped with dispatch in component 11 | static increment(){ 12 | return { 13 | type: 'INCREMENT' 14 | } 15 | } 16 | 17 | static decrement(){ 18 | return { 19 | type: 'DECREMENT' 20 | } 21 | } 22 | 23 | static incrementWithValue(value){ 24 | return { 25 | type: 'INCREMENT_WITH_VALUE', 26 | val: value 27 | } 28 | } 29 | 30 | static decrementWithValue(value){ 31 | return { 32 | type: 'DECREMENT_WITH_VALUE', 33 | val: value 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | 3 | import counter from './reducers/counter'; 4 | 5 | let store = createStore(counter) 6 | 7 | store.subscribe(() => 8 | console.log(store.getState()) 9 | ); 10 | 11 | export default store; 12 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_8/src/store/reducers/counter.js: -------------------------------------------------------------------------------- 1 | // Update in counter 8 import action 2 | import CounterAction from '../actions/counter' 3 | 4 | 5 | // update in counter 5 -- keeping reducer function in separate file. 6 | //value is state, but we need to use state property in component 7 | // that's why i have changed variable name here 8 | function counter(value = 0, action) { 9 | switch (action.type) { 10 | // Update in counter 8 -- using counter static properties in switch case 11 | // so that it can be controlled from single place 12 | case CounterAction.INCREMENT: 13 | // IMPORTANT: returning simple value therefore it will be avaiable as 14 | // simple value and not as object 15 | return value + 1 16 | case CounterAction.DECREMENT: 17 | return value - 1 18 | // Update in counter 6 -- more type of actions 19 | case CounterAction.INCREMENT_WITH_VALUE: 20 | return value + action.val; 21 | case CounterAction.DECREMENT_WITH_VALUE: 22 | return value - action.val; 23 | default: 24 | return value 25 | } 26 | } 27 | 28 | export default counter; -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 9: 9 | Creating multiple Reducers -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux-counter_9/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | 6 | 7 | import store from './store' 8 | import { Provider } from 'react-redux' 9 | 10 | //Update in counter 8 -- import counter action -- 11 | // in normal case we will not import actions here in main indexjs but we will use it in each container or component 12 | import CounterAction from './store/actions/counter' 13 | 14 | // update in counter 6 -- sending value in action 15 | function handleIncrement(){ 16 | //store.dispatch({ type: 'INCREMENT_WITH_VALUE', val:2 }) 17 | // Update in Counter 8 18 | store.dispatch(CounterAction.incrementWithValue(2)) 19 | } 20 | 21 | ReactDOM.render( 22 | 23 | //Wraping up in Provider 24 | 25 | 26 |
27 | 28 |
29 |
30 | Events from Index.jxs
31 |
32 |
33 |
34 |
35 |
36 | 37 | , 38 | document.getElementById('root') 39 | ); 40 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/src/store/actions/counter.js: -------------------------------------------------------------------------------- 1 | // Update in Counter 8 -- Separate action file as class 2 | export default class CounterAction { 3 | 4 | // static properties to be used in reducer for switch cases 5 | static INCREMENT = "INCREMENT"; 6 | static DECREMENT = "DECREMENT"; 7 | static INCREMENT_WITH_VALUE = "INCREMENT_WITH_VALUE"; 8 | static DECREMENT_WITH_VALUE = "DECREMENT_WITH_VALUE"; 9 | 10 | // static functions to be mapped with dispatch in component 11 | static increment(){ 12 | return { 13 | type: 'INCREMENT' 14 | } 15 | } 16 | 17 | static decrement(){ 18 | return { 19 | type: 'DECREMENT' 20 | } 21 | } 22 | 23 | static incrementWithValue(value){ 24 | return { 25 | type: 'INCREMENT_WITH_VALUE', 26 | val: value 27 | } 28 | } 29 | 30 | static decrementWithValue(value){ 31 | return { 32 | type: 'DECREMENT_WITH_VALUE', 33 | val: value 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | //Update in counter 9 -- import combineReducers to combine all reducers 3 | import { combineReducers } from 'redux'; 4 | 5 | import incrementCounter from './reducers/incrementCounter'; 6 | import decrementCounter from './reducers/decrementCounter'; 7 | 8 | //Update in counter 9 -- this will combine all reducers in one 9 | export const rootReducer = combineReducers({ 10 | incrementCounter, 11 | decrementCounter 12 | // more reducers go here 13 | }) 14 | 15 | //Update in counter 9 -- passing root reducer 16 | let store = createStore(rootReducer) 17 | 18 | store.subscribe(() => 19 | console.log(store.getState()) 20 | ); 21 | 22 | export default store; 23 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/src/store/reducers/decrementCounter.js: -------------------------------------------------------------------------------- 1 | //Update in counter 9 multiple reducer 2 | 3 | // Update in counter 8 import action 4 | import CounterAction from '../actions/counter' 5 | 6 | 7 | // update in counter 5 -- keeping reducer function in separate file. 8 | //value is state, but we need to use state property in component 9 | // that's why i have changed variable name here 10 | function decrementCounter(value = 0, action) { 11 | switch (action.type) { 12 | // Update in counter 8 -- using counter static properties in switch case 13 | // so that it can be controlled from single place 14 | case CounterAction.DECREMENT: 15 | // IMPORTANT: returning simple value therefore it will be avaiable as 16 | // simple value and not as object 17 | return value - 1 18 | // Update in counter 6 -- more type of actions 19 | case CounterAction.DECREMENT_WITH_VALUE: 20 | return value - action.val; 21 | default: 22 | return value 23 | } 24 | } 25 | 26 | export default decrementCounter; -------------------------------------------------------------------------------- /react-redux-sample/react-redux-counter_9/src/store/reducers/incrementCounter.js: -------------------------------------------------------------------------------- 1 | //Update in counter 9 multiple reducer 2 | 3 | // Update in counter 8 import action 4 | import CounterAction from '../actions/counter' 5 | 6 | 7 | // update in counter 5 -- keeping reducer function in separate file. 8 | //value is state, but we need to use state property in component 9 | // that's why i have changed variable name here 10 | function incrementCounter(value = 0, action) { 11 | switch (action.type) { 12 | // Update in counter 8 -- using counter static properties in switch case 13 | // so that it can be controlled from single place 14 | case CounterAction.INCREMENT: 15 | // IMPORTANT: returning simple value therefore it will be avaiable as 16 | // simple value and not as object 17 | return value + 1 18 | // Update in counter 6 -- more type of actions 19 | case CounterAction.INCREMENT_WITH_VALUE: 20 | return value + action.val; 21 | default: 22 | return value 23 | } 24 | } 25 | 26 | export default incrementCounter; -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Counter example with react-redux 7 | 8 | Update in Counter 15: 9 | Adding redux-observable and Epics 10 | Receiving value in epic function when passed in action -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0", 13 | "redux-observable": "^0.14.1", 14 | "rxjs": "^5.3.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux_16-epic-fetch-ajax-data/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/components/user/User.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/components/user/User.css -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/components/user/User.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './User.css'; 3 | 4 | class User extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 |
10 | In User jsx 11 |
12 |
13 |
14 |

Repos

15 |
    16 | { 17 | this.props.repoList.map((item,index)=>{ 18 | return
  • {item.name}
    • 19 | }) 20 | } 21 | 22 |
23 |
24 |
25 |
26 |

Followers

27 |
    28 | { 29 | this.props.followersList.map((item,index)=>{ 30 | return
  • {item.login}
    • 31 | }) 32 | } 33 |
34 |
35 |
36 | ); 37 | } 38 | } 39 | 40 | export default User; 41 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import './App.css'; 4 | 5 | import UserAction from './../../store/actions/user' 6 | 7 | import User from '../../components/user/User' 8 | 9 | // Mapping the component's property to Redux's state 10 | function mapStateToProps(state) { 11 | return { 12 | repoList : state.userReducer.repoList, 13 | followersList : state.userReducer.followersList 14 | 15 | }; 16 | } 17 | 18 | // store object is not avaiable here so we will map dispatch to properties and 19 | // pass it in connect function then redux will map it 20 | function mapDispatchToProps(dispatch) { 21 | return { 22 | fetchUserData : function (){ 23 | return dispatch(UserAction.getData()); 24 | } 25 | }; 26 | } 27 | 28 | class App extends Component { 29 | 30 | render() { 31 | return ( 32 |
33 | 34 |
35 | 36 |
37 | ); 38 | } 39 | } 40 | 41 | export default connect(mapStateToProps,mapDispatchToProps)(App); 42 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import store from './store' 6 | import { Provider } from 'react-redux' 7 | 8 | ReactDOM.render( 9 | //Wraping up in Provider 10 | 11 |
12 | 13 |
14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/store/actions/user.js: -------------------------------------------------------------------------------- 1 | export default class UserAction { 2 | 3 | static GET_DATA = "GET_DATA"; 4 | static GET_REPO_SUCCESSFUL = "GET_REPO_SUCCESSFUL"; 5 | static GET_FOLLOWERS_SUCCESSFUL = "GET_FOLLOWERS_SUCCESSFUL"; 6 | 7 | static getData(){ 8 | return { 9 | type: UserAction.GET_DATA 10 | } 11 | } 12 | 13 | static getRepoSuccessful(repoList){ 14 | return { 15 | type: UserAction.GET_REPO_SUCCESSFUL, 16 | payload: repoList 17 | } 18 | } 19 | 20 | static getFollowersSuccessful(followersList){ 21 | return { 22 | type: UserAction.GET_FOLLOWERS_SUCCESSFUL, 23 | payload : followersList 24 | } 25 | } 26 | 27 | } -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | import { combineReducers, applyMiddleware } from 'redux'; 3 | 4 | import { combineEpics, createEpicMiddleware } from 'redux-observable'; 5 | 6 | import userReducer from './reducers/userReducer'; 7 | 8 | import UserEpic from './epics/userEpic'; 9 | 10 | export const rootReducer = combineReducers({ 11 | userReducer 12 | // more reducers go here 13 | }) 14 | 15 | export const rootEpic = combineEpics( 16 | UserEpic.getRepoData, 17 | UserEpic.getFollowersData 18 | // more epics functions go here 19 | ) 20 | 21 | const epicMiddleware = createEpicMiddleware(rootEpic); 22 | 23 | const createStoreWithMiddleware = applyMiddleware(epicMiddleware); 24 | 25 | let store = createStore(rootReducer,createStoreWithMiddleware) 26 | 27 | store.subscribe(() => 28 | console.log(store.getState()) 29 | ); 30 | 31 | export default store; 32 | -------------------------------------------------------------------------------- /react-redux-sample/react-redux_16-epic-fetch-ajax-data/src/store/reducers/userReducer.js: -------------------------------------------------------------------------------- 1 | 2 | import UserAction from '../actions/user' 3 | 4 | 5 | const INITIAL_STATE = { 6 | repoList : [], 7 | followersList: [], 8 | } 9 | 10 | function userReducer(state = INITIAL_STATE, action) { 11 | switch (action.type) { 12 | 13 | case UserAction.GET_REPO_SUCCESSFUL: 14 | return {...state, repoList: action.payload} 15 | case UserAction.GET_FOLLOWERS_SUCCESSFUL: 16 | return {...state, followersList: action.payload} 17 | default: 18 | return state 19 | } 20 | } 21 | 22 | export default userReducer; -------------------------------------------------------------------------------- /react-redux-todolist/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-redux-todolist/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | Todo list with React Redux -------------------------------------------------------------------------------- /react-redux-todolist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-redux": "^5.0.3", 12 | "redux": "^3.6.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /react-redux-todolist/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-todolist/public/favicon.ico -------------------------------------------------------------------------------- /react-redux-todolist/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-redux-todolist/src/components/addTodo/AddTodo.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-todolist/src/components/addTodo/AddTodo.css -------------------------------------------------------------------------------- /react-redux-todolist/src/components/addTodo/AddTodo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './AddTodo.css'; 3 | 4 | class AddTodo extends Component { 5 | 6 | constructor(){ 7 | super(); 8 | this.state = { 9 | todoDescription : "" 10 | } 11 | this.addTodo = this.addTodo.bind(this); 12 | } 13 | 14 | addTodo(){ 15 | console.log(this.refs.todoText.value); 16 | this.props.addTodoEvent(this.refs.todoText.value); 17 | } 18 | 19 | render() { 20 | return ( 21 |
22 | Add Todo Item
23 | 24 | 25 |
26 | ); 27 | } 28 | } 29 | 30 | export default AddTodo; 31 | -------------------------------------------------------------------------------- /react-redux-todolist/src/components/index.js: -------------------------------------------------------------------------------- 1 | import AddTodo from './addTodo/AddTodo' 2 | import TodoList from './todoList/TodoList' 3 | import TodoItem from './todoItem/TodoItem' 4 | 5 | export { 6 | AddTodo, 7 | TodoList, 8 | TodoItem 9 | } -------------------------------------------------------------------------------- /react-redux-todolist/src/components/todoItem/TodoItem.css: -------------------------------------------------------------------------------- 1 | .todoText { 2 | width: 50px; 3 | } -------------------------------------------------------------------------------- /react-redux-todolist/src/components/todoList/TodoList.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-todolist/src/components/todoList/TodoList.css -------------------------------------------------------------------------------- /react-redux-todolist/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-redux-todolist/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | 4 | import Main from '../main/Main' 5 | 6 | class App extends Component { 7 | 8 | 9 | render() { 10 | return ( 11 |
12 |
13 |
14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /react-redux-todolist/src/containers/main/Main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-redux-todolist/src/containers/main/Main.css -------------------------------------------------------------------------------- /react-redux-todolist/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 10px; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-redux-todolist/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/app/App'; 4 | import './index.css'; 5 | import store from './store' 6 | import { Provider } from 'react-redux' 7 | 8 | ReactDOM.render( 9 | //Wraping up in Provider 10 | 11 |
12 | 13 |
14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /react-redux-todolist/src/store/actions/todoList.js: -------------------------------------------------------------------------------- 1 | export default class TodoListAction { 2 | 3 | static ADD_TODO = "ADD_TODO"; 4 | static UPDATE_TODO = "UPDATE_TODO"; 5 | static DELETE_TODO = "DELETE_TODO"; 6 | static TOGGLE_TODO = "TOGGLE_TODO"; 7 | 8 | static addTodo(todoItemDescription){ 9 | return { 10 | type: TodoListAction.ADD_TODO, 11 | payload : { 12 | text: todoItemDescription, 13 | completed : false 14 | } 15 | } 16 | } 17 | 18 | static deleteTodo(id,index){ 19 | return { 20 | type: TodoListAction.DELETE_TODO, 21 | itemIndex: index, 22 | id:id 23 | } 24 | } 25 | 26 | static updateTodo(id,itemIndex,updateTodoText){ 27 | return { 28 | type: TodoListAction.UPDATE_TODO, 29 | text: updateTodoText, 30 | itemIndex: itemIndex, 31 | id:id 32 | } 33 | } 34 | 35 | static toggleTodo(id,index){ 36 | return { 37 | type: TodoListAction.TOGGLE_TODO, 38 | itemIndex: index, 39 | id:id 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /react-redux-todolist/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | import { combineReducers } from 'redux'; 3 | 4 | import TodoListReducer from './reducers/todoReducer'; 5 | 6 | export const rootReducer = combineReducers({ 7 | TodoListReducer 8 | // more reducers go here 9 | }) 10 | 11 | let store = createStore(rootReducer) 12 | 13 | store.subscribe(() => 14 | console.log(store.getState()) 15 | ); 16 | 17 | export default store; 18 | -------------------------------------------------------------------------------- /react-router-sample/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-router-sample/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | This sample will test 8 | 1) Properties 9 | 2) States 10 | 3) JSX 11 | 4) Lifecycle Events 12 | 13 | -------------------------------------------------------------------------------- /react-router-sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-router": "^3.0.2" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /react-router-sample/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample/public/favicon.ico -------------------------------------------------------------------------------- /react-router-sample/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-router-sample/src/components/About/About.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample/src/components/About/About.css -------------------------------------------------------------------------------- /react-router-sample/src/components/About/About.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './About.css'; 3 | 4 | class About extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 | About 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default About; 16 | -------------------------------------------------------------------------------- /react-router-sample/src/components/Contact/Contact.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample/src/components/Contact/Contact.css -------------------------------------------------------------------------------- /react-router-sample/src/components/Contact/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Contact.css'; 3 | 4 | class Contact extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 | Contact 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Contact; 16 | -------------------------------------------------------------------------------- /react-router-sample/src/components/Post/Post.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample/src/components/Post/Post.css -------------------------------------------------------------------------------- /react-router-sample/src/components/Post/Post.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Post.css'; 3 | 4 | class Post extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 | Post 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Post; 16 | -------------------------------------------------------------------------------- /react-router-sample/src/components/Posts/Posts.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample/src/components/Posts/Posts.css -------------------------------------------------------------------------------- /react-router-sample/src/components/Posts/Posts.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Posts.css'; 3 | 4 | class Posts extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 | Posts 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Posts; 16 | -------------------------------------------------------------------------------- /react-router-sample/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-router-sample/src/containers/Content/Content.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample/src/containers/Content/Content.css -------------------------------------------------------------------------------- /react-router-sample/src/containers/Content/Content.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Content.css'; 3 | 4 | class Content extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 |
Content
10 |
11 | {this.props.children} 12 |
13 |
14 | ); 15 | } 16 | } 17 | 18 | export default Content; 19 | -------------------------------------------------------------------------------- /react-router-sample/src/containers/Login/Login.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample/src/containers/Login/Login.css -------------------------------------------------------------------------------- /react-router-sample/src/containers/Login/Login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Login.css'; 3 | 4 | class Login extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 | Login 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Login; 16 | -------------------------------------------------------------------------------- /react-router-sample/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-router-sample/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 | App 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-router-sample/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-router-sample/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {Router, Route, Link, browserHistory} from 'react-router'; 4 | import App from './containers/app/App'; 5 | import Login from './containers/Login/Login'; 6 | import Content from './containers/Content/Content'; 7 | import About from './components/About/About'; 8 | import Posts from './components/Posts/Posts'; 9 | import Post from './components/Post/Post'; 10 | import Contact from './components/Contact/Contact'; 11 | import './index.css'; 12 | 13 | ReactDOM.render(( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ), 24 | document.getElementById('root') 25 | ); 26 | -------------------------------------------------------------------------------- /react-router-sample/src/menu.json: -------------------------------------------------------------------------------- 1 | [ 2 | "Home", 3 | "About", 4 | "Services", 5 | "Portfolio", 6 | "Contact us" 7 | ] -------------------------------------------------------------------------------- /react-router-sample_2/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /react-router-sample_2/README.md: -------------------------------------------------------------------------------- 1 | React Sample app created with React cli "create-react-app" 2 | 3 | 4 | [Create React App](https://github.com/facebookincubator/create-react-app). 5 | 6 | 7 | This sample will test 8 | 1) Properties 9 | 2) States 10 | 3) JSX 11 | 4) Lifecycle Events 12 | 13 | -------------------------------------------------------------------------------- /react-router-sample_2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-es6", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.9.0" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.2", 10 | "react-dom": "^15.4.2", 11 | "react-router": "^3.0.2" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /react-router-sample_2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample_2/public/favicon.ico -------------------------------------------------------------------------------- /react-router-sample_2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /react-router-sample_2/src/components/About/About.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample_2/src/components/About/About.css -------------------------------------------------------------------------------- /react-router-sample_2/src/components/About/About.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './About.css'; 3 | 4 | class About extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 | About 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default About; 16 | -------------------------------------------------------------------------------- /react-router-sample_2/src/components/Contact/Contact.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample_2/src/components/Contact/Contact.css -------------------------------------------------------------------------------- /react-router-sample_2/src/components/Contact/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Contact.css'; 3 | 4 | class Contact extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 | Contact 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Contact; 16 | -------------------------------------------------------------------------------- /react-router-sample_2/src/components/Post/Post.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample_2/src/components/Post/Post.css -------------------------------------------------------------------------------- /react-router-sample_2/src/components/Post/Post.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Post.css'; 3 | 4 | class Post extends Component { 5 | 6 | render() { 7 | let post = this.props.route.posts.find(element=>element.slug == this.props.params.id) 8 | return ( 9 |
10 |

{post.title}

11 |

{post.text}

12 |

Continue reading...

13 |
14 | ); 15 | } 16 | } 17 | 18 | export default Post; 19 | -------------------------------------------------------------------------------- /react-router-sample_2/src/components/Posts/Posts.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample_2/src/components/Posts/Posts.css -------------------------------------------------------------------------------- /react-router-sample_2/src/components/Posts/Posts.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Link} from 'react-router'; 3 | import './Posts.css'; 4 | 5 | class Posts extends Component { 6 | 7 | render() { 8 | return ( 9 |
Posts 10 |
    11 | {this.props.route.posts.map((post, index)=> 12 |
  1. 13 | {post.title} 14 |
    2. 15 | )} 16 |
17 |
18 | ); 19 | } 20 | } 21 | 22 | export default Posts; 23 | -------------------------------------------------------------------------------- /react-router-sample_2/src/components/hello/Hello.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample_2/src/components/hello/Hello.css -------------------------------------------------------------------------------- /react-router-sample_2/src/containers/Content/Content.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample_2/src/containers/Content/Content.css -------------------------------------------------------------------------------- /react-router-sample_2/src/containers/Login/Login.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeeshanhanif/learn-react-with-samples/55ce08cbf1c06568f3363bcc457126f54ed13127/react-router-sample_2/src/containers/Login/Login.css -------------------------------------------------------------------------------- /react-router-sample_2/src/containers/Login/Login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Login.css'; 3 | 4 | class Login extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 | Login 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Login; 16 | -------------------------------------------------------------------------------- /react-router-sample_2/src/containers/app/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /react-router-sample_2/src/containers/app/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 | App 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /react-router-sample_2/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /react-router-sample_2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {Router, Route, Link, browserHistory,withRouter} from 'react-router'; 4 | import App from './containers/app/App'; 5 | import Login from './containers/Login/Login'; 6 | import Content from './containers/Content/Content'; 7 | import About from './components/About/About'; 8 | import Posts from './components/Posts/Posts'; 9 | import Post from './components/Post/Post'; 10 | import Contact from './components/Contact/Contact'; 11 | import posts from './posts'; 12 | import './index.css'; 13 | 14 | ReactDOM.render(( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ), 25 | document.getElementById('root') 26 | ); 27 | -------------------------------------------------------------------------------- /react-router-sample_2/src/posts.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "slug": "http2", 3 | "title": "Implementing HTTP/2 with Node.js and Express", 4 | "link": "http://webapplog.com/http2-node/", 5 | "text": "The modern Internet with its TCP/IP protocol started around 1975 which is astonishing 41 years ago. For the most part of its existence, we used HTTP and it’s successor HTTP/1.1 (version 1.1) to communicate between clients and servers." 6 | }, { 7 | "slug": "es6", 8 | "title": "Top 10 ES6 Features Every Busy JavaScript Developer Must Know", 9 | "link": "http://webapplog.com/es6/", 10 | "text": "This essay will give you a quick introduction to ES6. If you don’t know what is ES6, it’s a new JavaScript implementation..." 11 | }, { 12 | "slug": "you-dont-know-node", 13 | "title": "You Don't Know Node: Quick Intro to Core Features", 14 | "link": "http://webapplog.com/you-dont-know-node/", 15 | "text": "This is a kitchen sink of subjectively the most interesting core features. The key takeaways of this essay are:..." 16 | } 17 | ] --------------------------------------------------------------------------------