karma/zucchetti-sa5
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

React with typescript, sass and webpack workign

Browse Source
This commit is contained in:
Fauconnet Arnaud
2022-10-13 09:50:30 +02:00
parent 7e01b19907
commit 2e62d4675b
7 changed files with 171 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
import "./style.scss"
export default function App() {
return (
<main id="root">
<h1>React with Webpack</h1>
<div id="container">
<div id="box">This box should be centered <br/>(and also this this text)</div>
</div>
</main>
);
}

12
src/html/template.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React with Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

5
src/index.tsx Normal file
View File

@ -0,0 +1,5 @@
import * as React from 'react'
import { createRoot } from 'react-dom/client'
import App from "./App"
createRoot(document.querySelector("#root")).render(<App />)

31
src/style.scss Normal file
View File

@ -0,0 +1,31 @@
$box-background: blue;
$container-background: lime;
$title-color: cyan;
main {
h1 {
color: $title-color;
text-align: center;
}
#container{
display: flex;
background-color: $container-background;
width: 100vw;
height: 50vh;
align-items: center;
justify-content: center;
#box{
width: 50%;
height: 50%;
background-color: $box-background;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
}
}