Skip to content

Commit 2e1fe21

Browse files
nodexninjanodexninja
committed
Initial commit
0 parents  commit 2e1fe21

13 files changed

+1024
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎.replit

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
language="nodejs"
2+
run="npm run dev"

‎README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
## Running React on Repl.it
2+
3+
[React](https://reactjs.org/) is a popular JavaScript library for building user interfaces.
4+
5+
[Vite](https://vitejs.dev/) is a blazing fast frontend build tool that includes features like Hot Module Reloading (HMR), optimized builds, and TypeScript support out of the box.
6+
7+
Using the two in conjunction is one of the fastest ways to build a web app.
8+
9+
### Getting Started
10+
- Hit run
11+
- Edit [App.jsx](#src/App.jsx) and watch it live update!
12+
13+
By default, Repl.it runs the `dev` script, but you can configure it by changing the `run` field in the `.replit` file.

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

‎package-lock.json

+860
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "ReplitReactjsProject",
3+
"version": "0.0.1",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"@material-ui/core": "^4.12.1",
11+
"@types/react": "^17.0.13",
12+
"@types/react-dom": "^17.0.8",
13+
"@vitejs/plugin-react-refresh": "^1.3.0",
14+
"react": "^17.0.2",
15+
"react-dom": "^17.0.2",
16+
"vite": "^2.3.8"
17+
}
18+
}

‎src/App.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Sofia' !important;
5+
}
6+
nav {
7+
padding: 1vw 12.5%;
8+
}
9+
@font-face {
10+
font-family: 'Sofia';
11+
src: url("Sofia Pro Regular.otf");
12+
}
13+
section {
14+
display: flex;
15+
flex-direction: column;
16+
padding: 1vw 12.5%;
17+
}
18+
.content {
19+
display: flex;
20+
flex-direction: column;
21+
}
22+
.adjust {
23+
margin: 1vw 0 !important;
24+
align-self: start !important;
25+
}
26+
.MuiButton-containedPrimary {
27+
padding: 1vw 2vw !important;
28+
border-radius: 0.5vw !important;
29+
text-transform: none !important;
30+
font-family: 'Sofia' !important;
31+
background: #0064ff !important;
32+
}

‎src/App.jsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import './App.css';
3+
import { Button } from '@material-ui/core'
4+
5+
function App() {
6+
return (
7+
<React.Fragment>
8+
<nav>
9+
Nodex Ninja
10+
</nav>
11+
<section>
12+
<div class="content">
13+
<p>
14+
Welcome to my Material UI website tutorial!
15+
This website was made with Replit, React and Vite for free.
16+
Replit provides NPM in its IDE so there is no need to download anything!
17+
</p>
18+
<Button className="adjust" variant="contained" color="primary" disableElevation>
19+
Get Started
20+
</Button>
21+
</div>
22+
</section>
23+
</React.Fragment>
24+
);
25+
}
26+
27+
export default App;

‎src/Sofia Pro Regular.otf

137 KB
Binary file not shown.

‎src/favicon.svg

+15
Loading

‎src/index.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12+
monospace;
13+
}

‎src/main.jsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import './index.css'
4+
import App from './App'
5+
6+
ReactDOM.render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
document.getElementById('root')
11+
)

‎vite.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import reactRefresh from '@vitejs/plugin-react-refresh'
2+
3+
/**
4+
* https://vitejs.dev/config/
5+
* @type { import('vite').UserConfig }
6+
*/
7+
export default {
8+
plugins: [reactRefresh()],
9+
server: {
10+
host: '0.0.0.0',
11+
hmr: {
12+
port: 443,
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)