update react-player-list-tryout

react-player-helloworld/react-player-list-tryout/README.md

@@ -1,41 +1,18 @@
+### development environment
 
+start development environment
 
-## React Boilerplate
+```bash
+# start react auto-refreshing
+$ npm run react-dev
 
-The following repo contains a very basic setup
 
-```console
-git clone https://github.com/asieke/React-Express-Boilerplate.git
-cd React-Express-Boilerplate
-npm install
-```
-
-### Running the server
+# start express server
+$ npm run start
 
-Kick off webpack so that its running.  Its set to use the -w option so it'll continuously compile the `client/src` directory into `client/dist`
+# a switch to the browser is required, start with following shell-script
+$ ./start_browser.sh
 
-```console
-npm run react-dev
+# browse video player -> http://localhost:3000/
+# browse testing page -> http://localhost:3000/test
 ```
-
-### Start the  Server
-
-Nodemon should be installed - so all changes to the server will be automatically reloaded.  You should be up and running at localhost:3000
-
-```console
-npm start
-```
-
-### The Express Server
-
-It doesn't really do much other than serve the static files in client/dist
-
-### Client
-
-In the `client/dist` directory, you'll find the compiled `bundle.js` which is imported by `index.html`.
-
-In the `src/ directory` we have the bare bones of a basic react app that has an `index.jsx` file and an App component that prints `Hello World`
-
-### Webpack Config
-
-Uses babel to precompile and currently is only set up for .jsx files

react-player-helloworld/react-player-list-tryout/README.md.original

@@ -0,0 +1,41 @@
+
+
+## React Boilerplate
+
+The following repo contains a very basic setup
+
+```console
+git clone https://github.com/asieke/React-Express-Boilerplate.git
+cd React-Express-Boilerplate
+npm install
+```
+
+### Running the server
+
+Kick off webpack so that its running.  Its set to use the -w option so it'll continuously compile the `client/src` directory into `client/dist`
+
+```console
+npm run react-dev
+```
+
+### Start the  Server
+
+Nodemon should be installed - so all changes to the server will be automatically reloaded.  You should be up and running at localhost:3000
+
+```console
+npm start
+```
+
+### The Express Server
+
+It doesn't really do much other than serve the static files in client/dist
+
+### Client
+
+In the `client/dist` directory, you'll find the compiled `bundle.js` which is imported by `index.html`.
+
+In the `src/ directory` we have the bare bones of a basic react app that has an `index.jsx` file and an App component that prints `Hello World`
+
+### Webpack Config
+
+Uses babel to precompile and currently is only set up for .jsx files

react-player-helloworld/react-player-list-tryout/client/src/components/Test.jsx

@@ -0,0 +1,4 @@
+const Test = () => {
+  return <>Test</>;
+};
+export default Test;

react-player-helloworld/react-player-list-tryout/client/src/index.jsx

@@ -1,9 +1,48 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 
+import { Router, Route, Switch } from 'react-router';
+import { createBrowserHistory } from 'history';
+const history = createBrowserHistory();
+
 import App from './components/App.jsx';
 
+let Home = () => {
+  return <div> hello Home </div>;
+};
+let About = () => {
+  return <div> hello About </div>;
+};
+let User = () => {
+  return <div> hello User </div>;
+};
+let NoMatch = () => {
+  return <div> hello NoMatch </div>;
+};
+
+let routes = (
+  <Switch>
+    <Route exact path="/">
+      <Home />
+    </Route>
+    <Route path="**/about">
+      <About />
+    </Route>
+    <Route path="/:user">
+      <User />
+    </Route>
+    <Route>
+      <NoMatch />
+    </Route>
+  </Switch>
+);
+
 ReactDOM.render(
-  <App />,
-  document.getElementById('root')
+  <>
+    <Router history={history}>
+      <App />
+      {routes}
+    </Router>
+  </>,
+  document.getElementById('root'),
 );