├── .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 |
75 | {todos.map((todo, index) => (
76 | -
77 | {todo}
78 |
79 | ))}
80 |
81 | >
82 | );
83 | }
84 |
85 | export default App;
86 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
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 |
61 |
62 | 1652958816348
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------