├── .babelrc
├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── custom-elements.json
├── es-dev-server.config.js
├── index.html
├── package.json
└── src
└── app.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/preset-react"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 |
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
22 |
23 | [*.json]
24 | indent_size = 2
25 |
26 | [*.{html,js,md}]
27 | block_comment_start = /**
28 | block_comment = *
29 | block_comment_end = */
30 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ## editors
2 | /.idea
3 | /.vscode
4 |
5 | ## system files
6 | .DS_Store
7 |
8 | ## npm
9 | /node_modules/
10 | /npm-debug.log
11 |
12 | ## testing
13 | /coverage/
14 |
15 | ## temp folders
16 | /.tmp/
17 |
18 | # build
19 | /_site/
20 | /dist/
21 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 foo-bar
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # es-dev-server react demo
2 |
3 | https://open-wc.org/developing/es-dev-server.html
4 |
5 | ```bash
6 | npm install
7 | npm start
8 | ```
9 |
--------------------------------------------------------------------------------
/custom-elements.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "tags": [
4 | {
5 | "name": "foo-bar",
6 | "description": "An application with a title and an action counter",
7 | "properties": [
8 | {
9 | "name": "title",
10 | "type": "String",
11 | "description": "The title of your application",
12 | "default": "Hey there"
13 | },
14 | {
15 | "name": "page",
16 | "type": "String",
17 | "description": "Which page to show",
18 | "default": "main"
19 | }
20 | ],
21 | "events": [],
22 | "slots": [],
23 | "cssProperties": []
24 | }
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/es-dev-server.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | port: 8080,
3 | watch: true,
4 | nodeResolve: true,
5 | babel: true,
6 | appIndex: 'index.html',
7 | moduleDirs: ['node_modules', 'web_modules'],
8 | };
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
19 | foo-bar
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "es-dev-server-react",
3 | "version": "0.0.0",
4 | "description": "Develop react application with es-dev-server",
5 | "author": "afc163",
6 | "license": "MIT",
7 | "scripts": {
8 | "start": "es-dev-server --app-index index.html --node-resolve --open --watch"
9 | },
10 | "dependencies": {
11 | "@babel/preset-env": "^7.9.5",
12 | "@babel/preset-react": "^7.9.4",
13 | "es-dev-server": "^1.5.0",
14 | "es-react": "^16.12.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import { React, ReactDOM } from 'es-react';
2 |
3 | const App = () => {
4 | const [count, setCount] = React.useState(0);
5 | return (
6 |
7 |
Count: {count}
8 |
9 |
10 |