├── .flowconfig
├── .gitignore
├── .travis.yml
├── README.md
├── decls
    └── types.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
└── src
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── registerServiceWorker.js


/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | 
 3 | [include]
 4 | 
 5 | [libs]
 6 | 
 7 | decls
 8 | 
 9 | [lints]
10 | 
11 | [options]
12 | 


--------------------------------------------------------------------------------
/.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.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - stable
 5 | 
 6 | install:
 7 |   - npm install
 8 | 
 9 | script:
10 |   - npm test


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | **Deprecated: I don't keep up with Flow anymore, because I use TypeScript for all my projects. If you want to check out TypeScript with React, check out [The Road to React](https://www.roadtoreact.com/).**
 2 | 
 3 | # React Flow Example
 4 | 
 5 | [![Build Status](https://travis-ci.org/the-road-to-learn-react/react-flow-example.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/react-flow-example) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-learn-react/react-flow-example.svg)](https://greenkeeper.io/)
 6 | 
 7 | * Found in [The Road to learn React](https://roadtoreact.com/)
 8 | 
 9 | ## Features
10 | 
11 | * uses:
12 |   * React (create-react-app)
13 |   * Flow
14 | 
15 | ## Installation
16 | 
17 | * `git clone git@github.com:the-road-to-learn-react/react-flow-example.git`
18 | * `cd react-flow-example`
19 | * `npm install`
20 | * `npm start`
21 | * visit http://localhost:3000/
22 | * `npm run flow` to type check all // @flow files or install a flow plugin for your editor / IDE
23 | 


--------------------------------------------------------------------------------
/decls/types.js:
--------------------------------------------------------------------------------
1 | type ArticlesEntity = Array<ArticleEntity>;
2 | 
3 | type ArticleEntity = {
4 |   id: string,
5 |   title: string,
6 |   url: string,
7 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-flow-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "flow-bin": "^0.89.0",
 7 |     "react": "^16.6.0",
 8 |     "react-dom": "^16.6.0",
 9 |     "react-scripts": "3.1.0"
10 |   },
11 |   "scripts": {
12 |     "start": "react-scripts start",
13 |     "build": "react-scripts build",
14 |     "test": "react-scripts test --env=jsdom",
15 |     "flow": "flow",
16 |     "eject": "react-scripts eject"
17 |   },
18 |   "devDependencies": {},
19 |   "browserslist": [
20 |     ">0.2%",
21 |     "not dead",
22 |     "not ie <= 11",
23 |     "not op_mini all"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/the-road-to-learn-react/react-flow-example/98265d1c81832606bd1fe02c05ea7fcc0e7fee95/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | 
  3 | // Note: Entity Types can be found in ../decls/types.js and are imported in ../.flowconfig
  4 | 
  5 | import * as React from 'react';
  6 | 
  7 | const ARTICLES = [
  8 |   { id: '0', title: 'How to fetch data in React', url: 'https://www.robinwieruch.de/react-fetching-data/' },
  9 |   { id: '1', title: 'React\'s Ecosystem as a flexible Framework', url: 'https://www.robinwieruch.de/essential-react-libraries-framework/' },
 10 |   { id: '2', title: 'What\'s new in React 16?', url: 'https://www.robinwieruch.de/what-is-new-in-react-16/' },
 11 |   { id: '3', title: '8 things to learn in React before using Redux', url: 'https://www.robinwieruch.de/learn-react-before-using-redux/' },
 12 |   { id: '4', title: 'Accept Stripe Payments with React and Express', url: 'https://www.robinwieruch.de/react-express-stripe-payment/' },
 13 |   { id: '5', title: 'Tips to learn React + Redux', url: 'https://www.robinwieruch.de/tips-to-learn-react-redux/' },
 14 |   { id: '6', title: '10 Reasons why I moved from Angular to React', url: 'https://www.robinwieruch.de/reasons-why-i-moved-from-angular-to-react/' },
 15 |   { id: '7', title: 'All the Conditional Renderings in React', url: 'https://www.robinwieruch.de/conditional-rendering-react/' },
 16 |   { id: '8', title: 'Redux or MobX: An attempt to dissolve the Confusion', url: 'https://www.robinwieruch.de/redux-mobx-confusion/' },
 17 |   { id: '9', title: 'Tips to learn React + Redux', url: 'https://www.robinwieruch.de/tips-to-learn-react-redux/' },
 18 |   { id: '10', title: 'A gentle Introduction to React\'s Higher Order Components', url: 'https://www.robinwieruch.de/gentle-introduction-higher-order-components/' },
 19 |   { id: '11', title: 'Complete Course to learn Redux and MobX', url: 'https://roadtoreact.com/' },
 20 | ];
 21 | 
 22 | type AppProps = {
 23 | 
 24 | };
 25 | 
 26 | type AppState = {
 27 |   searchTerm: string,
 28 | };
 29 | 
 30 | const applyFilter = (searchTerm: string): Function => (article: ArticleEntity): boolean =>
 31 |   article.title.toLowerCase().includes(searchTerm.toLowerCase());
 32 | 
 33 | const applySearchTerm = (searchTerm: string): Function => () => ({
 34 |   searchTerm,
 35 | });
 36 | 
 37 | class App extends React.Component<AppProps, AppState> {
 38 |   constructor() {
 39 |     super();
 40 | 
 41 |     this.state = {
 42 |       searchTerm: '',
 43 |     };
 44 | 
 45 |     (this:any).onSearch = this.onSearch.bind(this);
 46 |   }
 47 | 
 48 |   onSearch(event: SyntheticInputEvent<HTMLInputElement>) {
 49 |     const { value } = event.target;
 50 | 
 51 |     this.setState(applySearchTerm(value));
 52 |   }
 53 | 
 54 |   render() {
 55 |     const { searchTerm } = this.state;
 56 | 
 57 |     return (
 58 |       <div>
 59 |         <Search value={searchTerm} onSearch={this.onSearch}>
 60 |           <p>Search</p>
 61 |         </Search>
 62 | 
 63 |         <Articles articles={ARTICLES.filter(applyFilter(searchTerm))} />
 64 | 
 65 |         <p>Found in <a href="https://roadtoreact.com/">the Road to learn React</a></p>
 66 |       </div>
 67 |     );
 68 |   }
 69 | }
 70 | 
 71 | type SearchProps = {
 72 |   value: string,
 73 |   onSearch: Function,
 74 |   children: React.Element<any> | string,
 75 | };
 76 | 
 77 | function Search({ value, onSearch, children }: SearchProps) {
 78 |   return (
 79 |     <div>
 80 |       {children} <input
 81 |         value={value}
 82 |         onChange={onSearch}
 83 |         type="text"
 84 |       />
 85 |     </div>
 86 |   );
 87 | }
 88 | 
 89 | type ArticlesProps = {
 90 |   articles: ArticlesEntity,
 91 | };
 92 | 
 93 | function Articles({ articles }: ArticlesProps) {
 94 |   return (
 95 |     <ul>
 96 |       {articles.map(article =>
 97 |         <li key={article.id}>
 98 |           <Article article={article} />
 99 |         </li>
100 |       )}
101 |     </ul>
102 |   );
103 | }
104 | 
105 | type ArticleProps = {
106 |   article: ArticleEntity,
107 | };
108 | 
109 | function Article({ article }: ArticleProps) {
110 |   return <a href={article.url}>{article.title}</a>
111 | }
112 | 
113 | export default App;
114 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | it('renders without crashing', () => {
6 |   const div = document.createElement('div');
7 |   ReactDOM.render(<App />, div);
8 | });
9 | 


--------------------------------------------------------------------------------
/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 './index.css';
4 | import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 | 
7 | ReactDOM.render(<App />, document.getElementById('root'));
8 | registerServiceWorker();
9 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (!isLocalhost) {
 36 |         // Is not local host. Just register service worker
 37 |         registerValidSW(swUrl);
 38 |       } else {
 39 |         // This is running on localhost. Lets check if a service worker still exists or not.
 40 |         checkValidServiceWorker(swUrl);
 41 |       }
 42 |     });
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.');
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.');
 65 |             }
 66 |           }
 67 |         };
 68 |       };
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error);
 72 |     });
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload();
 88 |           });
 89 |         });
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl);
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       );
 99 |     });
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister();
106 |     });
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------