├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .stylelintrc ├── .travis.yml ├── .vscode └── settings.json ├── README.md ├── __tests__ ├── App.test.js └── __snapshots__ │ └── App.test.js.snap ├── ders4 ├── array-every.js ├── array-filter.js ├── array-find.js ├── array-from.js ├── array-map.js ├── array-reduce.js ├── array-some.js ├── arrow-function.js ├── async-await.js ├── classes.js ├── desctructing.js ├── let-vs-const.js ├── new-promise.js ├── object-assign.js ├── object-computed-property-names.js ├── object-entries.js ├── object-keys.js ├── object-method-properties.js ├── object-property-shorthand.js ├── object-values.js ├── spread.js └── template-literals.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.css ├── App.js ├── index.css ├── index.js └── logo.svg └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | coverage 2 | ders4 3 | build 4 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "env": { 4 | "browser": true, 5 | "jest": true 6 | }, 7 | "plugins": [ 8 | "react", 9 | "jsx-a11y", 10 | "import", 11 | "prettier" 12 | ], 13 | "rules": { 14 | "no-console": "off", 15 | "react/jsx-filename-extension": "off", 16 | "prettier/prettier": [ 17 | "error", 18 | { 19 | "trailingComma": "all", 20 | "singleQuote": true, 21 | "printWidth": 100 22 | } 23 | ] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://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 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard" 3 | } 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "7" 5 | 6 | sudo: false 7 | 8 | cache: yarn 9 | 10 | before_install: 11 | - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.21.3 12 | 13 | script: 14 | - yarn run test:ci 15 | 16 | after_success: 17 | - codecov 18 | 19 | before_deploy: 20 | - yarn run build 21 | - cp ./build/index.html ./build/200.html 22 | 23 | deploy: 24 | provider: surge 25 | project: ./build/ 26 | domain: react-redux-app.surge.sh 27 | skip_cleanup: true 28 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "prettier.printWidth": 100, 4 | "prettier.singleQuote": true, 5 | "prettier.trailingComma": "all" 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React ve Redux ile Web Uygulaması Geliştirme 2 | 3 | React ve Redux ile Web Uygulama Geliştirme video serisi için repo. Bu seride sadece React değil modern bir web uygulaması geliştirilirken kullanılan bir çok kütüphane ve web uygulamasına da göz gezdireceğiz. 4 | 5 | https://www.youtube.com/playlist?list=PL-ohrY_IyV4CUNsDxXDkdT-aAVfrTPXll 6 | 7 | > Her bir dersin kodlarını **branch** olarak bulabilirsiniz. 8 | 9 | ## Eğitim videoları 10 | 11 | - [create-react-app, ESLint, style-lint ve Prettier'e bakacağız](https://www.youtube.com/watch?v=oGOyZMB2-Ko) 12 | - [lint-staged, Jest, test coverage ve Istanbul kütüphanesine bakacağız](https://youtu.be/k2_jLJf8dAk) 13 | - [travis, codecov ve surge.sh akışını kullanarak ilk deploy'umuzu gerçekleştiriyoruz](https://youtu.be/vGOky33smMM) 14 | - [JavaScript'in yeni syntax'ına, Array ve Object metodlarına genel bir bakış](https://youtu.be/kRknZ6ejQ_8) 15 | 16 | ## Katkıda bulunanlar 17 | - [@ademilter](https://github.com/ademilter) 18 | -------------------------------------------------------------------------------- /__tests__/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import App from '../src/App'; 5 | 6 | it('renders correctly', () => { 7 | const wrapper = shallow(); 8 | 9 | expect(wrapper).toMatchSnapshot(); 10 | }); 11 | -------------------------------------------------------------------------------- /__tests__/__snapshots__/App.test.js.snap: -------------------------------------------------------------------------------- 1 | exports[`test renders correctly 1`] = ` 2 | ShallowWrapper { 3 | "complexSelector": ComplexSelector { 4 | "buildPredicate": [Function], 5 | "childrenOfNode": [Function], 6 | "findWhereUnwrapped": [Function], 7 | }, 8 | "length": 1, 9 | "node":
11 |
13 | logo 17 |

18 | Welcome to React App 19 |

20 |
21 |

23 | To get started, edit 24 | 25 | src/App.js 26 | 27 | and save to reload. 28 |

29 |
, 30 | "nodes": Array [ 31 |
33 |
35 | logo 39 |

40 | Welcome to React App 41 |

42 |
43 |

45 | To get started, edit 46 | 47 | src/App.js 48 | 49 | and save to reload. 50 |

51 |
, 52 | ], 53 | "options": Object {}, 54 | "renderer": ReactShallowRenderer { 55 | "_instance": ShallowComponentWrapper { 56 | "_calledComponentWillUnmount": false, 57 | "_compositeType": 2, 58 | "_context": Object {}, 59 | "_currentElement": , 60 | "_debugID": 1, 61 | "_hostContainerInfo": null, 62 | "_hostParent": null, 63 | "_instance": StatelessComponent { 64 | "_reactInternalInstance": [Circular], 65 | "context": Object {}, 66 | "props": Object {}, 67 | "refs": Object {}, 68 | "state": null, 69 | "updater": Object { 70 | "enqueueCallback": [Function], 71 | "enqueueCallbackInternal": [Function], 72 | "enqueueElementInternal": [Function], 73 | "enqueueForceUpdate": [Function], 74 | "enqueueReplaceState": [Function], 75 | "enqueueSetState": [Function], 76 | "isMounted": [Function], 77 | "validateCallback": [Function], 78 | }, 79 | }, 80 | "_mountOrder": 1, 81 | "_pendingCallbacks": null, 82 | "_pendingElement": null, 83 | "_pendingForceUpdate": false, 84 | "_pendingReplaceState": false, 85 | "_pendingStateQueue": null, 86 | "_renderedComponent": NoopInternalComponent { 87 | "_currentElement":
89 |
91 | logo 95 |

96 | Welcome to React App 97 |

98 |
99 |

101 | To get started, edit 102 | 103 | src/App.js 104 | 105 | and save to reload. 106 |

107 |
, 108 | "_debugID": 2, 109 | "_renderedOutput":
111 |
113 | logo 117 |

118 | Welcome to React App 119 |

120 |
121 |

123 | To get started, edit 124 | 125 | src/App.js 126 | 127 | and save to reload. 128 |

129 |
, 130 | }, 131 | "_renderedNodeType": 0, 132 | "_rootNodeID": 0, 133 | "_topLevelWrapper": null, 134 | "_updateBatchNumber": null, 135 | "_warnedAboutRefsInRender": false, 136 | }, 137 | "getRenderOutput": [Function], 138 | "render": [Function], 139 | }, 140 | "root": [Circular], 141 | "unrendered": , 142 | } 143 | `; 144 | -------------------------------------------------------------------------------- /ders4/array-every.js: -------------------------------------------------------------------------------- 1 | const arr = [1, 2, 3, 4, 5]; 2 | const output = arr.every(value => value >= 1); 3 | 4 | console.log(output); 5 | -------------------------------------------------------------------------------- /ders4/array-filter.js: -------------------------------------------------------------------------------- 1 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 2 | const newArr = arr.filter(item => item < 5); 3 | 4 | console.log(newArr); 5 | -------------------------------------------------------------------------------- /ders4/array-find.js: -------------------------------------------------------------------------------- 1 | const users = [ 2 | { 3 | id: 1, 4 | username: 'alpcan', 5 | }, 6 | { 7 | id: 2, 8 | username: 'hasan', 9 | }, 10 | { 11 | id: 3, 12 | username: 'burak', 13 | }, 14 | ]; 15 | 16 | const user = users.find(item => item.username === 'buraks'); 17 | console.log(user); 18 | -------------------------------------------------------------------------------- /ders4/array-from.js: -------------------------------------------------------------------------------- 1 | const arr = Array.from({ length: 10 }, (value, index) => index * 2); 2 | console.log(arr); 3 | -------------------------------------------------------------------------------- /ders4/array-map.js: -------------------------------------------------------------------------------- 1 | /* 2 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 3 | const newArr = arr.map(item => item * 2); 4 | 5 | console.log(newArr); 6 | */ 7 | 8 | const users = [ 9 | { 10 | id: 1, 11 | username: 'alpcan', 12 | }, 13 | { 14 | id: 2, 15 | username: 'hasan', 16 | }, 17 | { 18 | id: 3, 19 | username: 'burak', 20 | }, 21 | ]; 22 | 23 | console.log(users.map(user => `ID: ${user.id}, Username: ${user.username}`)); 24 | -------------------------------------------------------------------------------- /ders4/array-reduce.js: -------------------------------------------------------------------------------- 1 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 2 | const total = arr.reduce((prev, cur) => prev + cur, 0); 3 | 4 | console.log(total); 5 | -------------------------------------------------------------------------------- /ders4/array-some.js: -------------------------------------------------------------------------------- 1 | const arr = [1, 2, 3, 4, 5]; 2 | const output = arr.some(value => value > 5); 3 | 4 | console.log(output); 5 | -------------------------------------------------------------------------------- /ders4/arrow-function.js: -------------------------------------------------------------------------------- 1 | /* 2 | function fn(param1, param2) { 3 | console.log(param1); 4 | console.log(param2); 5 | } 6 | 7 | fn(1, 2); 8 | */ 9 | 10 | const fn = (param1 = 'value', ...rest) => ({ 11 | key1: param1, 12 | key2: 'value2', 13 | rest, 14 | }); 15 | 16 | const result = fn('value1', 'value3', 'value4', 'value5', 'value6', 'value7'); 17 | console.log(JSON.stringify(result, null, 2)); 18 | -------------------------------------------------------------------------------- /ders4/async-await.js: -------------------------------------------------------------------------------- 1 | const asyncFn = () => 2 | new Promise(resolve => { 3 | setTimeout(() => { 4 | // Hata oluştu. 5 | resolve('asenkron data 1'); 6 | }, 3000); 7 | }); 8 | 9 | const asyncFn2 = () => 10 | new Promise((resolve, reject) => { 11 | setTimeout(() => { 12 | // Hata oluştu. 13 | reject('asenkron hata'); 14 | }, 1000); 15 | }); 16 | 17 | const main = async () => { 18 | console.log('Start'); 19 | 20 | try { 21 | const data1 = await asyncFn(); 22 | console.log('ilk promise beklendi.'); 23 | const data2 = await asyncFn2(); 24 | console.log('ikinci promise beklendi.'); 25 | console.log(`Data 1: ${data1}, Data 2: ${data2}`); 26 | } catch (err) { 27 | console.log(err); 28 | } finally { 29 | console.log('end'); 30 | } 31 | }; 32 | 33 | main(); 34 | -------------------------------------------------------------------------------- /ders4/classes.js: -------------------------------------------------------------------------------- 1 | class Person { 2 | constructor(name) { 3 | this.name = name; 4 | } 5 | 6 | getName() { 7 | return this.name; 8 | } 9 | } 10 | 11 | class ExamplePerson extends Person { 12 | constructor(name, lastName) { 13 | super(name); 14 | 15 | this.lastName = lastName; 16 | } 17 | 18 | getLastName() { 19 | return this.lastName; 20 | } 21 | 22 | getFullName() { 23 | return `${this.getName()} ${this.getLastName()}`; 24 | } 25 | } 26 | 27 | const person = new ExamplePerson('Alpcan', 'Aydın'); 28 | console.log(person.getFullName()); 29 | -------------------------------------------------------------------------------- /ders4/desctructing.js: -------------------------------------------------------------------------------- 1 | const props = { 2 | prop1: 'value1', 3 | prop2: 'value2', 4 | prop3: 'value3', 5 | prop4: 'value4', 6 | prop5: 'value5', 7 | prop6: { 8 | key1: 'value6', 9 | key2: 'value7', 10 | }, 11 | }; 12 | 13 | /* 14 | const prop1 = props.prop1; 15 | const prop3 = props.prop3; 16 | */ 17 | 18 | const { prop6: { key1: var1 } } = props; 19 | console.log(var1); 20 | -------------------------------------------------------------------------------- /ders4/let-vs-const.js: -------------------------------------------------------------------------------- 1 | const arr = [1, 2, 3]; 2 | arr.push(4); 3 | 4 | arr = [1, 2, 3, 4]; 5 | 6 | const obj = { key1: 'value1', key2: 'value2' }; 7 | obj.key3 = 'value3'; 8 | 9 | obj = {}; 10 | -------------------------------------------------------------------------------- /ders4/new-promise.js: -------------------------------------------------------------------------------- 1 | const asyncFn = () => 2 | new Promise(resolve => { 3 | setTimeout(() => { 4 | // Hata oluştu. 5 | resolve('asenkron data 1'); 6 | }, 3000); 7 | }); 8 | 9 | const asyncFn2 = () => 10 | new Promise(resolve => { 11 | setTimeout(() => { 12 | // Hata oluştu. 13 | resolve('asenkron data 2'); 14 | }, 1000); 15 | }); 16 | 17 | Promise.all([asyncFn(), asyncFn2(), 'senkron data']).then(values => console.log(values)); 18 | -------------------------------------------------------------------------------- /ders4/object-assign.js: -------------------------------------------------------------------------------- 1 | // Object.assign(target, ...sources); 2 | 3 | const output = Object.assign( 4 | {}, 5 | { key2: 'value2', key3: 'value3' }, 6 | { key1: 'new-value' }, 7 | { key1: 'value1' }, 8 | ); 9 | 10 | console.log(output); 11 | -------------------------------------------------------------------------------- /ders4/object-computed-property-names.js: -------------------------------------------------------------------------------- 1 | const key = 'username'; 2 | 3 | const user = { 4 | id: 1, 5 | location: 'Izmir', 6 | [key]: 'burak', 7 | }; 8 | 9 | console.log(user); 10 | -------------------------------------------------------------------------------- /ders4/object-entries.js: -------------------------------------------------------------------------------- 1 | const obj = { 2 | key1: 'value1', 3 | key2: 'value2', 4 | key3: 'value3', 5 | key4: 'value4', 6 | }; 7 | 8 | // console.log(Object.entries(obj)); 9 | 10 | // eslint-disable-next-line 11 | for (const [key, value] of Object.entries(obj)) { 12 | console.log(`key: ${key}, value: ${value}`); 13 | } 14 | -------------------------------------------------------------------------------- /ders4/object-keys.js: -------------------------------------------------------------------------------- 1 | const obj = { 2 | key1: 'value1', 3 | key2: 'value2', 4 | key3: 'value3', 5 | key4: 'value4', 6 | }; 7 | 8 | console.log(Object.keys(obj)); 9 | -------------------------------------------------------------------------------- /ders4/object-method-properties.js: -------------------------------------------------------------------------------- 1 | const helper = { 2 | uppercase: str => str.toUpperCase(), 3 | lowercase: str => str.toLowerCase(), 4 | }; 5 | 6 | /* 7 | const helper = { 8 | uppercase(str) { 9 | return str.toUpperCase(); 10 | }, 11 | 12 | lowercase(str) { 13 | return str.toLowerCase(); 14 | }, 15 | }; 16 | */ 17 | 18 | console.log(helper.uppercase('kucuk')); 19 | -------------------------------------------------------------------------------- /ders4/object-property-shorthand.js: -------------------------------------------------------------------------------- 1 | const username = 'burak'; 2 | const location = 'Izmir'; 3 | const id = 1; 4 | 5 | const user = { id, location, username }; 6 | 7 | console.log(user); 8 | -------------------------------------------------------------------------------- /ders4/object-values.js: -------------------------------------------------------------------------------- 1 | const obj = { 2 | key1: 'value1', 3 | key2: 'value2', 4 | key3: 'value3', 5 | key4: 'value4', 6 | }; 7 | 8 | console.log(Object.values(obj)); 9 | -------------------------------------------------------------------------------- /ders4/spread.js: -------------------------------------------------------------------------------- 1 | const arr = [1, 2, 3, 4, 5]; 2 | 3 | const [key1, key2, ...rest] = arr; 4 | console.log(rest); 5 | -------------------------------------------------------------------------------- /ders4/template-literals.js: -------------------------------------------------------------------------------- 1 | const var1 = 'value1'; 2 | const var2 = 'value2'; 3 | 4 | console.log(`string string string ${var1} string string ${var2}`); 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ders1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^15.5.4", 7 | "react-dom": "^15.5.4" 8 | }, 9 | "devDependencies": { 10 | "codecov": "^2.1.0", 11 | "enzyme": "^2.8.2", 12 | "enzyme-to-json": "^1.5.1", 13 | "eslint": "^3.19.0", 14 | "eslint-config-airbnb": "^14.1.0", 15 | "eslint-plugin-import": "^2.2.0", 16 | "eslint-plugin-jsx-a11y": "^4.0.0", 17 | "eslint-plugin-prettier": "^2.0.1", 18 | "eslint-plugin-react": "^6.10.3", 19 | "istanbul": "^0.4.5", 20 | "lint-staged": "^3.4.0", 21 | "pre-commit": "^1.2.2", 22 | "prettier": "^1.2.2", 23 | "react-scripts": "0.9.5", 24 | "react-test-renderer": "^15.5.4", 25 | "stylelint": "^7.10.1", 26 | "stylelint-config-standard": "^16.0.0" 27 | }, 28 | "scripts": { 29 | "start": "react-scripts start", 30 | "build": "react-scripts build", 31 | "lint:eslint": "eslint .", 32 | "lint:stylelint": "stylelint .", 33 | "lint": "yarn run lint:eslint && yarn run lint:stylelint", 34 | "format": "prettier --print-width=100 --single-quote --trailing-comma all --write \"{src,__tests__}/**/*.js\"", 35 | "lint-staged": "lint-staged", 36 | "test": "react-scripts test --env=jsdom", 37 | "test:ci": "yarn run lint && yarn test && yarn run coverage", 38 | "coverage": "yarn run test -- --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/index.js", 39 | "postcoverage": "istanbul check-coverage --statements 90 --functions 90 --branches 90 --lines 90", 40 | "eject": "react-scripts eject" 41 | }, 42 | "lint-staged": { 43 | "*.js": [ 44 | "yarn run format", 45 | "git add" 46 | ] 47 | }, 48 | "pre-commit": "lint-staged", 49 | "jest": { 50 | "snapshotSerializers": [ 51 | "/node_modules/enzyme-to-json/serializer" 52 | ] 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alpcanaydin/react-redux-app/ced69da53b52b79dfaf5e9583bc0b6a6dec94062/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | const App = () => ( 6 |
7 |
8 | logo 9 |

Welcome to React App

10 |
11 |

12 | To get started, edit src/App.js and save to reload. 13 |

14 |
15 | ); 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | --------------------------------------------------------------------------------