Initial commit
commit
0cec32f6a7
@ -0,0 +1 @@
|
||||
node_modules
|
@ -0,0 +1,49 @@
|
||||
"use strict";
|
||||
|
||||
const React = require("react");
|
||||
const ReactDOM = require("react-dom");
|
||||
|
||||
// the below would be 'library code' ///////////////////////////////////
|
||||
|
||||
let TitleContext = React.createContext();
|
||||
|
||||
function PanelTitle({ children }) {
|
||||
let setTitle = React.useContext(TitleContext);
|
||||
setTitle(children);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function Panel({ view }) {
|
||||
let [ title, setTitle ] = React.useState("Default title");
|
||||
|
||||
let View = view;
|
||||
|
||||
return (
|
||||
<div className="panel">
|
||||
<h1>{ title }</h1>
|
||||
<hr/>
|
||||
<TitleContext.Provider value={setTitle}>
|
||||
<View />
|
||||
</TitleContext.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// end-user code goes below ///////////////////////////////////////
|
||||
|
||||
function SomeView() {
|
||||
return (<>
|
||||
<PanelTitle>Hello world!</PanelTitle>
|
||||
<p>Some text goes here.</p>
|
||||
<p>More text goes here.</p>
|
||||
</>);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Panel view={SomeView} />
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("app"));
|
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "bugcase-react-parent-configuration",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"repository": "git@git.cryto.net:joepie91/bugcase-react-parent-configuration.git",
|
||||
"author": "Sven Slootweg <admin@cryto.net>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "budo index.jsx --live --dir static/ --serve /bundle.js -- -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ]"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.10.2",
|
||||
"@babel/preset-env": "^7.10.2",
|
||||
"@babel/preset-react": "^7.10.1",
|
||||
"babelify": "^10.0.0",
|
||||
"budo": "^11.6.3",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
}
|
||||
}
|
@ -0,0 +1,11 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>React Bugcase</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue