Skip to content

Commit

Permalink
Add React sample
Browse files Browse the repository at this point in the history
  • Loading branch information
bep committed Jan 21, 2021
1 parent 6f5ea7b commit c5fc812
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 27 deletions.
6 changes: 4 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
public/
node_modules/date-fns/
assets/jsconfig.json
assets/jsconfig.json
!node_modules/
node_modules/*
!node_modules/mynodemod/
27 changes: 27 additions & 0 deletions assets/js/like.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// Note: We're using the CDN in "production".
import * as React from 'react'
import * as ReactDOM from "react-dom";

// A simple React JSX component.
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}

render() {
if (this.state.liked) {
return 'You liked this!';
}

return (
<button onClick={() => this.setState({ liked: true }) }>
Like
</button>
);
}
}


const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);
2 changes: 1 addition & 1 deletion assets/js/main.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// From mod1, but hello1 get its data from mod2.
//// From mod1, but hello1 get its data from mod2.
import { hello1, hello2 } from 'core/util';
// From mod2
import * as data from 'core/util/data.json';
Expand Down
1 change: 1 addition & 0 deletions assets/js/shims/react-dom.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export let ReactDOM = window.ReactDOM;
1 change: 1 addition & 0 deletions assets/js/shims/react.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export let React = window.React;
67 changes: 45 additions & 22 deletions layouts/index.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,47 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
{{ .Title }}
</title>
{{ $js := resources.Get "js/main.js" | js.Build (dict "minify" false "params" (dict "myparam" "Hugo Rocks!") ) }}
<script src="{{ $js.RelPermalink }}"></script>
{{ partialCached "jslibs/alpinejs/script-src.html" "-" }}
</head>
<body class="mt-10">
<div class="" x-data="{}">
<ul>
<li x-text="hello1()"></li>
<li x-text="hello2()"></li>
<li x-text="hello3()"></li>
<li x-text="hello4()"></li>
<li x-text="hello6()"></li>
<li x-text="helloNodeModules()"></li>
<li x-text="data.Hugo"></li>
<li x-text="params.myparam"></li>
</ul>
</div>
<head>
<meta charset="utf-8">
<title>
{{ .Title }}
</title>
{{ if hugo.IsProduction }}
{{/* We import from node_modules in development to get code completion etc. working. */}}
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
{{ end }}
{{ $js := resources.Get "js/main.js" | js.Build (dict "minify" false "params" (dict "myparam" "Hugo Rocks!") ) }}
<script src="{{ $js.RelPermalink }}"></script>
{{ partialCached "jslibs/alpinejs/script-src.html" "-" }}
</head>
<body class="mt-10">
<h2>
Basic Test Cases
</h2>
<div class="" x-data="{}">
<ul>
<li x-text="hello1()"></li>
<li x-text="hello2()"></li>
<li x-text="hello3()"></li>
<li x-text="hello4()"></li>
<li x-text="hello6()"></li>
<li x-text="helloNodeModules()"></li>
<li x-text="data.Hugo"></li>
<li x-text="params.myparam"></li>
</ul>
</div>
<h2>
React
</h2>
<div id="like_button_container"></div>
{{ $shims := dict }}
{{ $defines := dict }}
{{ if hugo.IsProduction }}
{{ $shims = dict "react" "js/shims/react.js" "react-dom" "js/shims/react-dom.js" }}
{{ else }}
{{ $defines = dict "process.env.NODE_ENV" `"development"` }}
{{ end }}
{{ $js := resources.Get "js/like.jsx" | js.Build (dict "shims" $shims "defines" $defines ) }}
<script src="{{ $js.RelPermalink }}"></script>
</body>
</html>
52 changes: 52 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,14 @@
"devDependencies": {}
},
"dependencies": {
"date-fns": "^2.16.1"
"date-fns": "^2.16.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"description": "Test project used for integration testing.",
"devDependencies": {},
"devDependencies": {

},
"homepage": "https://github.com/gohugoio/hugoTestProjectJSModImports#readme",
"license": "ISC",
"main": "index.js",
Expand Down

0 comments on commit c5fc812

Please sign in to comment.