├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── src
├── App.js
├── index.css
└── index.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Integração do Material UI com ReactJS
2 |
3 | https://blog.rocketseat.com.br/react-material-ui/
4 |
5 | ## Instalação
6 |
7 | Faça o clone do nosso repositório e utilize os comandos:
8 |
9 | ```sh
10 | $ git clone https://github.com/Rocketseat/blog-react-material-ui.git
11 | $ cd blog-react-material-ui
12 | $ npm install
13 | $ npm start
14 | ```
15 |
16 | Acesse a página no link: http://localhost:3000
17 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "material-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@material-ui/core": "^1.2.1",
7 | "@material-ui/icons": "^1.1.0",
8 | "react": "^16.4.0",
9 | "react-dom": "^16.4.0",
10 | "react-scripts": "1.1.4"
11 | },
12 | "scripts": {
13 | "start": "react-scripts start",
14 | "build": "react-scripts build",
15 | "test": "react-scripts test --env=jsdom",
16 | "eject": "react-scripts eject"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-content/blog-react-material-ui/b36992b1577c7fa9b425f90fa295f8412de7a7cd/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React + Material | RocketSeat
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { withStyles } from "@material-ui/core/styles";
3 | import MoreVertIcon from "@material-ui/icons/MoreVert";
4 | import ImageIcon from "@material-ui/icons/Image";
5 | import WorkIcon from "@material-ui/icons/Work";
6 | import BeachAccessIcon from "@material-ui/icons/BeachAccess";
7 | import {
8 | Paper,
9 | Typography,
10 | Grid,
11 | Card,
12 | CardHeader,
13 | CardContent,
14 | Avatar,
15 | List,
16 | ListItem,
17 | ListItemText,
18 | IconButton
19 | } from "@material-ui/core";
20 |
21 | const styles = () => ({
22 | root: {
23 | padding: "50px 100px",
24 | zIndex: 999,
25 | position: "absolute"
26 | },
27 | card: {
28 | display: "flex",
29 | height: "calc(100vh - 100px)"
30 | },
31 | rightBorder: {
32 | borderRight: "solid #d0D0D0 1px"
33 | },
34 | content: {
35 | marginTop: 0
36 | },
37 | background: {
38 | position: "absolute",
39 | height: 200,
40 | width: "100%",
41 | top: 0,
42 | background: "#7159C1"
43 | },
44 | rightContainer: {
45 | background:
46 | "url(https://hdwallsource.com/img/2014/8/my-neighbor-totoro-wallpaper-27981-28703-hd-wallpapers.jpg) center center",
47 | flex: 1
48 | },
49 | heightAdjust: {
50 | display: "flex",
51 | flexDirection: "column"
52 | },
53 | paper: {
54 | background: "#9de1fe",
55 | padding: 20
56 | },
57 | information: {
58 | color: "#444"
59 | }
60 | });
61 |
62 | const App = ({ classes }) => (
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
100 | {list.map(item => (
101 |
102 | {item.image}
103 |
104 |
105 | ))}
106 |
107 |
108 | );
109 |
110 | const RightContainer = ({ classes }) => (
111 |
112 |
115 |
116 |
117 | }
118 | action={
119 |
120 |
121 |
122 | }
123 | title="Diego"
124 | />
125 |
126 |
127 | );
128 |
129 | export default withStyles(styles)(App);
130 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 |
6 | ReactDOM.render(, document.getElementById("root"));
7 |
--------------------------------------------------------------------------------