Skip to content

Commit c5fc812

Browse files
bepbep
committed
Add React sample
1 parent 6f5ea7b commit c5fc812

File tree

8 files changed

+137
-27
lines changed

8 files changed

+137
-27
lines changed

‎.gitignore

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
public/
2-
node_modules/date-fns/
3-
assets/jsconfig.json
2+
assets/jsconfig.json
3+
!node_modules/
4+
node_modules/*
5+
!node_modules/mynodemod/

‎assets/js/like.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Note: We're using the CDN in "production".
2+
import * as React from 'react'
3+
import * as ReactDOM from "react-dom";
4+
5+
// A simple React JSX component.
6+
class LikeButton extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = { liked: false };
10+
}
11+
12+
render() {
13+
if (this.state.liked) {
14+
return 'You liked this!';
15+
}
16+
17+
return (
18+
<button onClick={() => this.setState({ liked: true }) }>
19+
Like
20+
</button>
21+
);
22+
}
23+
}
24+
25+
26+
const domContainer = document.querySelector('#like_button_container');
27+
ReactDOM.render(<LikeButton />, domContainer);

‎assets/js/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// From mod1, but hello1 get its data from mod2.
1+
//// From mod1, but hello1 get its data from mod2.
22
import { hello1, hello2 } from 'core/util';
33
// From mod2
44
import * as data from 'core/util/data.json';

‎assets/js/shims/react-dom.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export let ReactDOM = window.ReactDOM;

‎assets/js/shims/react.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export let React = window.React;

‎layouts/index.html

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,47 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>
6-
{{ .Title }}
7-
</title>
8-
{{ $js := resources.Get "js/main.js" | js.Build (dict "minify" false "params" (dict "myparam" "Hugo Rocks!") ) }}
9-
<script src="{{ $js.RelPermalink }}"></script>
10-
{{ partialCached "jslibs/alpinejs/script-src.html" "-" }}
11-
</head>
12-
<body class="mt-10">
13-
<div class="" x-data="{}">
14-
<ul>
15-
<li x-text="hello1()"></li>
16-
<li x-text="hello2()"></li>
17-
<li x-text="hello3()"></li>
18-
<li x-text="hello4()"></li>
19-
<li x-text="hello6()"></li>
20-
<li x-text="helloNodeModules()"></li>
21-
<li x-text="data.Hugo"></li>
22-
<li x-text="params.myparam"></li>
23-
</ul>
24-
</div>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>
6+
{{ .Title }}
7+
</title>
8+
{{ if hugo.IsProduction }}
9+
{{/* We import from node_modules in development to get code completion etc. working. */}}
10+
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
11+
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
12+
{{ end }}
13+
{{ $js := resources.Get "js/main.js" | js.Build (dict "minify" false "params" (dict "myparam" "Hugo Rocks!") ) }}
14+
<script src="{{ $js.RelPermalink }}"></script>
15+
{{ partialCached "jslibs/alpinejs/script-src.html" "-" }}
16+
</head>
17+
<body class="mt-10">
18+
<h2>
19+
Basic Test Cases
20+
</h2>
21+
<div class="" x-data="{}">
22+
<ul>
23+
<li x-text="hello1()"></li>
24+
<li x-text="hello2()"></li>
25+
<li x-text="hello3()"></li>
26+
<li x-text="hello4()"></li>
27+
<li x-text="hello6()"></li>
28+
<li x-text="helloNodeModules()"></li>
29+
<li x-text="data.Hugo"></li>
30+
<li x-text="params.myparam"></li>
31+
</ul>
32+
</div>
33+
<h2>
34+
React
35+
</h2>
36+
<div id="like_button_container"></div>
37+
{{ $shims := dict }}
38+
{{ $defines := dict }}
39+
{{ if hugo.IsProduction }}
40+
{{ $shims = dict "react" "js/shims/react.js" "react-dom" "js/shims/react-dom.js" }}
41+
{{ else }}
42+
{{ $defines = dict "process.env.NODE_ENV" `"development"` }}
43+
{{ end }}
44+
{{ $js := resources.Get "js/like.jsx" | js.Build (dict "shims" $shims "defines" $defines ) }}
45+
<script src="{{ $js.RelPermalink }}"></script>
46+
</body>
47+
</html>

‎package-lock.json

Lines changed: 52 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@
1010
"devDependencies": {}
1111
},
1212
"dependencies": {
13-
"date-fns": "^2.16.1"
13+
"date-fns": "^2.16.1",
14+
"react": "^17.0.1",
15+
"react-dom": "^17.0.1"
1416
},
1517
"description": "Test project used for integration testing.",
16-
"devDependencies": {},
18+
"devDependencies": {
19+
20+
},
1721
"homepage": "https://github.com/gohugoio/hugoTestProjectJSModImports#readme",
1822
"license": "ISC",
1923
"main": "index.js",

0 commit comments

Comments
 (0)