├── .env.development ├── src ├── App.module.css ├── tailwind.css ├── style.scss ├── Test.js ├── index.js ├── Components.js ├── Tailwind.js ├── components │ ├── Button.js │ └── Tab.js ├── Bootstrap.js ├── Styles.js ├── App.js └── logo.svg ├── .env.production ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── postcss.config.js ├── README.md ├── tailwind.config.js ├── .gitignore ├── package.json └── .idea └── workspace.xml /.env.development: -------------------------------------------------------------------------------- 1 | REACT_APP_API_URL=http://localhost/api/ 2 | -------------------------------------------------------------------------------- /src/App.module.css: -------------------------------------------------------------------------------- 1 | .App { 2 | background: #eee; 3 | } 4 | -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | REACT_APP_API_URL=https://prototurk.com/api/ 2 | -------------------------------------------------------------------------------- /src/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tayfunerbilen/prototurk-react-starter-kit/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tayfunerbilen/prototurk-react-starter-kit/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tayfunerbilen/prototurk-react-starter-kit/HEAD/public/logo512.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Başlangıç Projesi 2 | 3 | Bu kodlar, bir react projesine başlangıç için gerekli olan paketlerden oluşan bir başlangıç setidir. 4 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | $red: red; 2 | $yellow: yellow; 3 | 4 | .env { 5 | background: $red; 6 | span { 7 | background: $yellow; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/Test.js: -------------------------------------------------------------------------------- 1 | function Test() { 2 | return ( 3 |
4 | Test component 5 |
6 | ) 7 | } 8 | 9 | export default Test 10 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./src/**/*.{js,jsx,ts,tsx}", 4 | ], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | } 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /src/Components.js: -------------------------------------------------------------------------------- 1 | import styled, {css} from "styled-components"; 2 | 3 | export const Title = styled.h1` 4 | font-size: 3rem; 5 | font-weight: 600; 6 | text-decoration: underline; 7 | ${props => props.theme === 'dark' && css` 8 | background: #000; 9 | color: #fff; 10 | &:hover { 11 | background: blue; 12 | } 13 | `} 14 | ` 15 | -------------------------------------------------------------------------------- /src/Tailwind.js: -------------------------------------------------------------------------------- 1 | function Tailwind() { 2 | return ( 3 |
4 |

Tailwind Başlık

5 | 8 |
9 | ) 10 | } 11 | 12 | export default Tailwind 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .idea 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | import classNames from "classnames" 2 | 3 | function Button({ children, variant = 'default' }) { 4 | return ( 5 | 12 | ) 13 | } 14 | 15 | export default Button 16 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/Bootstrap.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | import { Button, Tabs, Tab } from 'react-bootstrap'; 3 | 4 | function Bootstrap() { 5 | return ( 6 |
7 |

Bootstrap komponentleri

8 | 9 | 10 | 11 | 12 |
home
13 |
14 | 15 |
profile
16 |
17 | 18 |
contact
19 |
20 |
21 |
22 | ) 23 | } 24 | 25 | export default Bootstrap 26 | -------------------------------------------------------------------------------- /src/Styles.js: -------------------------------------------------------------------------------- 1 | import { Title } from "./Components"; 2 | import Bootstrap from "./Bootstrap"; 3 | import Tailwind from "./Tailwind"; 4 | import Test from "./Test" 5 | import logo from "./logo.svg" 6 | import styles from './App.module.css' 7 | import './tailwind.css' 8 | 9 | function Styles() { 10 | return ( 11 |
12 | {process.env.NODE_ENV} 13 | {process.env.NODE_ENV} 14 |

15 | {process.env.REACT_APP_API_URL} 16 | test 17 |

18 | 19 | {process.env.NODE_ENV === 'production' && ( 20 | <> 21 | 22 | 23 | 24 | )} 25 | 26 | 27 |
28 | ) 29 | } 30 | 31 | export default Styles 32 | -------------------------------------------------------------------------------- /src/components/Tab.js: -------------------------------------------------------------------------------- 1 | import {useState, useEffect} from "react" 2 | 3 | function Tab({children, activeTab, onChange}) { 4 | const [active, setActive] = useState(activeTab) 5 | 6 | useEffect(() => { 7 | setActive(activeTab) 8 | }, [activeTab]) 9 | 10 | useEffect(() => { 11 | onChange(active) 12 | }, [active]) 13 | 14 | return ( 15 |
16 | 27 | {children[active]} 28 |
29 | ) 30 | } 31 | 32 | Tab.Panel = function ({children, title}) { 33 | return ( 34 |
{children}
35 | ) 36 | } 37 | 38 | export default Tab 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-proje", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.2.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "bootstrap": "^5.1.3", 10 | "classnames": "^2.3.1", 11 | "react": "^18.1.0", 12 | "react-bootstrap": "^2.4.0", 13 | "react-dom": "^18.1.0", 14 | "react-scripts": "5.0.1", 15 | "sass": "^1.52.1", 16 | "styled-components": "^5.3.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "GENERATE_SOURCEMAP=false react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "devDependencies": { 44 | "autoprefixer": "^10.4.7", 45 | "postcss": "^8.4.14", 46 | "tailwindcss": "^3.0.24" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | %REACT_APP_API_URL% 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { createElement, useState } from "react" 2 | import './tailwind.css' 3 | import Button from "./components/Button" 4 | import Tab from "./components/Tab" 5 | 6 | function Profile() { 7 | console.log('profil tabına geldin!') 8 | return ( 9 |
10 | burası profile tabı 11 |
12 | ) 13 | } 14 | 15 | function App() { 16 | 17 | const name = 'Tayfun' 18 | const todos = ['todo1', 'todo2', 'todo3'] 19 | 20 | const [activeTab, setActiveTab] = useState(1) 21 | 22 | /* 23 | const h1 = createElement('h1', null, 'prototurk.com') 24 | const ul = createElement('ul', null, todos.map(todo => createElement('li', null, todo))) 25 | const button = createElement(Button, { 26 | text: 'Buton Texti' 27 | }, null) 28 | return createElement('main', { 29 | className: 'test', 30 | id: 'main' 31 | }, h1, ul, button) 32 | */ 33 | 34 | const searchFunction = () => { 35 | alert('hello!') 36 | } 37 | 38 | return ( 39 | <> 40 | 41 |
42 | 45 | setActiveTab(tabIndex)}> 46 | 47 | 2. tab 48 | 3. tab 49 | 50 | {activeTab === 2 && ( 51 |
52 | burası da eksta bir alan! 53 |
54 | )} 55 |
56 | 57 |
58 | 61 | 64 | 67 | 70 |
71 |

prototurk.com

72 | 73 | 74 | 81 | 82 | ); 83 | } 84 | 85 | export default App; 86 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 24 | 25 | 26 | 28 | 29 | 30 | 31 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 1652958816348 60 | 65 | 66 | 67 | 68 | 70 | 71 | 80 | 82 | --------------------------------------------------------------------------------