├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public └── index.html └── src ├── API └── article_api.js ├── App.js ├── BLoC └── article_bloc.js ├── Pages ├── About.js └── Articles.js └── index.js /.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-BLoC-pattern 2 | 3 | 4 | React BLoC pattern 5 | 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.9", 7 | "@testing-library/react": "^11.2.5", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.1", 10 | "bootstrap": "^4.6.0", 11 | "mdbreact": "^5.0.1", 12 | "react": "^17.0.1", 13 | "react-dom": "^17.0.1", 14 | "react-router-dom": "^5.2.0", 15 | "react-scripts": "4.0.3", 16 | "reactstrap": "^8.9.0", 17 | "simpler-state": "^1.0.0-rc.2", 18 | "web-vitals": "^1.1.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /src/API/article_api.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | export const API_URL = "https://jsonplaceholder.typicode.com/"; 4 | 5 | 6 | 7 | 8 | export async function apiGetArticles(currpage){ 9 | return axios.get(API_URL+"posts"); 10 | } 11 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Route, Switch } from "react-router-dom"; 2 | import { About } from "./Pages/About"; 3 | import Article from './Pages/Articles' 4 | 5 | export default function App() { 6 | return ( 7 |
8 | 9 | 10 | 11 | 12 |
13 | ); 14 | } 15 | 16 | -------------------------------------------------------------------------------- /src/BLoC/article_bloc.js: -------------------------------------------------------------------------------- 1 | import { entity } from 'simpler-state' 2 | import {apiGetArticles} from '../API/article_api' 3 | 4 | export const articles = entity([]) 5 | 6 | export const getArticles = by => { 7 | apiGetArticles(1).then(c =>{articles.set(c.data);console.log(c)}); 8 | } 9 | 10 | -------------------------------------------------------------------------------- /src/Pages/About.js: -------------------------------------------------------------------------------- 1 | import { useEntity } from 'simpler-state' 2 | import { articles } from '../BLoC/article_bloc' 3 | 4 | export function About(){ 5 | 6 | const article = useEntity(articles) 7 | 8 | return ( 9 |
10 | {article.length > 0 ?( 11 | article.map(article => 12 | <>

13 |
14 |

{article.title}


15 |
16 |
17 | 18 | ) 19 | ):(
veri yok
)} 20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/Pages/Articles.js: -------------------------------------------------------------------------------- 1 | import { useEntity } from 'simpler-state' 2 | import { articles, getArticles } from '../BLoC/article_bloc' 3 | import React, { useEffect } from "react"; 4 | import { Button } from 'reactstrap'; 5 | import { Link } from 'react-router-dom'; 6 | 7 | 8 | export default function App (){ 9 | useEffect(() => { 10 | getArticles(); 11 | }); 12 | 13 | const article = useEntity(articles) 14 | 15 | return ( 16 |
17 | 18 | {article.length > 0 ?( 19 | article.map(article => 20 | <>

21 |
22 |

{article.title}


23 |
24 |
25 | 26 | ) 27 | ):(
veri yok
)} 28 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | import { BrowserRouter } from "react-router-dom"; 5 | import 'bootstrap/dist/css/bootstrap.min.css' 6 | 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById("root") 13 | ); 14 | --------------------------------------------------------------------------------