added quick items and more minor stuff

This commit is contained in:
Niklas 2020-04-21 18:40:13 +02:00
parent f37e5d1fd0
commit 0fd8cc7409
7 changed files with 62 additions and 3 deletions

View File

@ -5,11 +5,13 @@
"main": "src/index.ts", "main": "src/index.ts",
"scripts": { "scripts": {
"devServer": "webpack-dev-server --mode development --inline --hot --open", "devServer": "webpack-dev-server --mode development --inline --hot --open",
"build": "webpack --mode development" "build": "webpack --mode development",
"buildProd": "webpack --mode production"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@types/prop-types": "^15.7.3",
"@types/react": "^16.9.34", "@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6", "@types/react-dom": "^16.9.6",
"@typescript-eslint/eslint-plugin": "^2.28.0", "@typescript-eslint/eslint-plugin": "^2.28.0",
@ -28,6 +30,7 @@
"webpack-dev-server": "^3.10.3" "webpack-dev-server": "^3.10.3"
}, },
"dependencies": { "dependencies": {
"prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1" "react-dom": "^16.13.1"
} }

24
src/components/Quick.tsx Normal file
View File

@ -0,0 +1,24 @@
import * as React from "react";
import * as PropTypes from "prop-types";
import "../style/quick.scss";
class Quick extends React.Component {
static propTypes = {
children : PropTypes.element
};
constructor(props){
super(props);
}
render(): JSX.Element {
return <div className="quick-component">
{this.props.children}
</div>;
}
}
export default Quick;

View File

@ -0,0 +1,22 @@
import * as React from "react";
import * as PropTypes from "prop-types";
import "../style/quickItem.scss";
class QuickItem extends React.Component {
static propTypes = {
url: PropTypes.string.isRequired
};
constructor(props){
super(props);
}
render(): JSX.Element {
return <div className="quickItem-component">
</div>;
}
}
export default QuickItem;

View File

@ -1,12 +1,19 @@
import * as React from "react"; import * as React from "react";
import Quick from "./Quick";
import QuickItem from "./QuickItem";
class App extends React.Component { class App extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
render(): JSX.Element { render(): JSX.Element {
return <h1>Hello world</h1>; return <div>
<Quick>
<QuickItem/>
</Quick>
</div>;
} }
} }

View File

@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
import * as ReactDOM from "react-dom"; import * as ReactDOM from "react-dom";
import App from "./components/app"; import App from "./components/App";
import "./style/default.scss"; import "./style/default.scss";

3
src/style/quick.scss Normal file
View File

@ -0,0 +1,3 @@
.quick-component {
background-color: green;
}

0
src/style/quickItem.scss Normal file
View File