fede/mern-template
Template
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

better api template & css modules example

Browse Source
This commit is contained in:
Ben Elferink
2020-12-27 01:43:04 +02:00
parent 40e22e0392
commit cb078bf083
4 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/App.js
View File

@@ -1,21 +1,23 @@
import React from 'react'; import React from 'react';
import HelloWorld from './components/HelloWorld'; import HelloWorld from './components/HelloWorld';
import './style/style.css'; import './style/style.css'; // regular CSS -> className='app'
import styles from './style/App.module.css'; // module CSS -> className={styles.App} (AKA styled components)
// import * as api from './api'; // import * as api from './api';
// un-comment this ^ ^ ^ to import api endpoints // ^ ^ ^ un-comment this to import api endpoints
function App() { function App() {
// const [data, setData] = React.useState([]);
// React.useEffect(() => { // React.useEffect(() => {
// api // api
// .getSomething() // replace this with your endpoint // .getSomething() // replace this with your endpoint
// .then((response) => console.log(`✅ ${response.status} ${response.statusText}`, response.data)) // .then((response) => console.log(`✅ ${response.status} ${response.statusText}`, setData(response.data)))
// .catch((error) => console.log(`❌ ${error}`)); // .catch((error) => console.log(`❌ ${error}`));
// }); // }, []);
// //
// example ^ ^ ^ using the api endpoint // ^ ^ ^ example using the api endpoint
return ( return (
<div className='App'> <div className={styles.App}>
<HelloWorld /> <HelloWorld />
</div> </div>
); );

15
client/src/api/index.js
View File

@@ -1,9 +1,12 @@
import axios from 'axios'; import axios from 'axios';
// customizable base-url // api base-url (that you created on server side)
const url = 'http://localhost:8080/'; const url = 'http://localhost:8080/api/v1';
// demonstration endpoints: // current path: http://localhost:8080/api/v1/example
// // current method: GET
// export const getSomething = () => axios.get(url + 'path'); // export const getSomething = () => axios.get(url + '/example');
// export const postSometing = (form) => axios.post(url + 'path', form);
// current path: http://localhost:8080/api/v1/example/upload
// current method: POST
// export const postSometing = (form) => axios.post(url + '/example/upload', form);

6
client/src/style/App.module.css Normal file
View File

@@ -0,0 +1,6 @@
.App {
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
}

10
client/src/style/style.css
View File

@@ -4,14 +4,8 @@
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.App {
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
}