Skip to content

Commit 8d77cd1

Browse files
trikannatrikanna
committed
minimal setup
1 parent 93029f8 commit 8d77cd1

File tree

10 files changed

+207
-43
lines changed

10 files changed

+207
-43
lines changed

‎packages/react-scripts/package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,14 @@
5656
"webpack": "3.5.1",
5757
"webpack-dev-server": "2.7.1",
5858
"webpack-manifest-plugin": "1.2.1",
59-
"whatwg-fetch": "2.0.3"
59+
"whatwg-fetch": "2.0.3",
60+
"styled-components": "^2.1.2",
61+
"react-router-dom": "^4.1.2"
6062
},
6163
"devDependencies": {
6264
"react": "^15.5.4",
63-
"react-dom": "^15.5.4"
65+
"react-dom": "^15.5.4",
66+
"babel-plugin-styled-components": "^1.1.7"
6467
},
6568
"optionalDependencies": {
6669
"fsevents": "1.1.2"

‎packages/react-scripts/template/.babelrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"plugins": [
3+
["styled-components", {
4+
"displayName": true
5+
}]
6+
]
7+
}

‎packages/react-scripts/template/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = false

‎packages/react-scripts/template/public/index.html

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
66
<meta name="theme-color" content="#000000">
77
<!--
88
manifest.json provides metadata used when your web app is added to the
@@ -19,7 +19,7 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>Welcome to React</title>
2323
</head>
2424
<body>
2525
<noscript>
@@ -36,5 +36,16 @@
3636
To begin the development, run `npm start` or `yarn start`.
3737
To create a production bundle, use `npm run build` or `yarn build`.
3838
-->
39+
40+
<script>
41+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
42+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
43+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
44+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
45+
46+
ga('create', 'UA-104453639-1', 'auto');
47+
ga('send', 'pageview');
48+
49+
</script>
3950
</body>
4051
</html>

‎packages/react-scripts/template/src/App.css

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎packages/react-scripts/template/src/App.js

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,50 @@
11
import React, { Component } from 'react';
22
import logo from './logo.svg';
3-
import './App.css';
3+
import styled from 'styled-components';
4+
5+
const Wrapper = styled.div`
6+
background: #f2f2f2;
7+
text-align: center;
8+
padding: 0 15px;
9+
10+
&:after {
11+
content: "";
12+
display: table;
13+
clear: both;
14+
}
15+
`;
16+
17+
const Header = styled.header`
18+
border-bottom: 1px solid #fefefe;
19+
padding-bottom: 10px;
20+
margin-bottom: 14px;
21+
22+
.logo {
23+
height: 150px;
24+
margin: 0 auto;
25+
}
26+
`;
27+
28+
const Intro = styled.p`
29+
max-width: 600px;
30+
margin: 0 auto 13pt;
31+
`;
432

533
class App extends Component {
634
render() {
735
return (
8-
<div className="App">
9-
<div className="App-header">
10-
<img src={logo} className="App-logo" alt="logo" />
36+
<Wrapper>
37+
<Header>
38+
<img src={logo} className="logo" alt="logo" />
39+
<h1>Welcome to React</h1>
1140
<h2>Welcome to React</h2>
12-
</div>
13-
<p className="App-intro">
14-
To get started, edit <code>src/App.js</code> and save to reload.
15-
</p>
16-
</div>
41+
<h3>Welcome to React</h3>
42+
<h4>Welcome to React</h4>
43+
<h5>Welcome to React</h5>
44+
<h6>Welcome to React</h6>
45+
</Header>
46+
<Intro>To get started, edit <code>src/App.js</code> and save to reload. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt accusamus laudantium rerum, repudiandae, qui velit nulla consectetur, doloremque, perferendis inventore cupiditate! Ex iusto optio, praesentium consequatur laboriosam odio atque itaque.</Intro>
47+
</Wrapper>
1748
);
1849
}
1950
}

‎packages/react-scripts/template/src/css/global.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
*,
2+
*:before,
3+
*:after {
4+
box-sizing: inherit;
5+
}
6+
7+
html, body {
8+
height: 100%;
9+
}
10+
11+
html {
12+
-webkit-tap-highlight-color: transparent;
13+
-webkit-text-size-adjust: 100%;
14+
-ms-text-size-adjust: 100%;
15+
16+
box-sizing: border-box;
17+
}
18+
19+
body {
20+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
21+
font-size: 13px;
22+
line-height: 1.4;
23+
-webkit-font-smoothing: subpixel-antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
-webkit-overflow-scrolling: touch;
26+
background: #ffffff;
27+
color: #282828;
28+
}
29+
30+
h1, h2, h3, h4, h5, h6, strong {
31+
font-weight: 700;
32+
margin-bottom: 18px;
33+
}
34+
35+
h1 {
36+
font-size: 28pt;
37+
line-height: 28pt;
38+
}
39+
40+
h2 {
41+
font-size: 22pt;
42+
line-height: 22pt;
43+
}
44+
45+
h3 {
46+
font-size: 20pt;
47+
line-height: 20pt;
48+
}
49+
50+
h4 {
51+
font-size: 17pt;
52+
line-height: 17pt;
53+
}
54+
55+
h5 {
56+
font-size: 15pt;
57+
line-height: 15pt;
58+
}
59+
60+
h6 {
61+
font-size: 12pt;
62+
line-height: 12pt;
63+
}
64+
65+
p {
66+
font-size: 10pt;
67+
line-height: 13pt;
68+
margin-bottom: 13pt;
69+
}
70+
71+
#root {
72+
min-height: 100%;
73+
}
74+
75+
pre,
76+
code {
77+
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
78+
font-size: 11px;
79+
}

‎packages/react-scripts/template/src/css/reset.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
html, body, div, span, applet, object, iframe,
7+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8+
a, abbr, acronym, address, big, cite, code,
9+
del, dfn, em, img, ins, kbd, q, s, samp,
10+
small, strike, strong, sub, sup, tt, var,
11+
b, u, i, center,
12+
dl, dt, dd, ol, ul, li,
13+
fieldset, form, label, legend,
14+
table, caption, tbody, tfoot, thead, tr, th, td,
15+
article, aside, canvas, details, embed,
16+
figure, figcaption, footer, header, hgroup,
17+
menu, nav, output, ruby, section, summary,
18+
time, mark, audio, video {
19+
margin: 0;
20+
padding: 0;
21+
border: 0;
22+
font-size: 100%;
23+
font: inherit;
24+
vertical-align: baseline;
25+
}
26+
/* HTML5 display-role reset for older browsers */
27+
article, aside, details, figcaption, figure,
28+
footer, header, hgroup, menu, nav, section {
29+
display: block;
30+
}
31+
body {
32+
line-height: 1;
33+
}
34+
ol, ul {
35+
list-style: none;
36+
}
37+
blockquote, q {
38+
quotes: none;
39+
}
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: '';
43+
content: none;
44+
}
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}

‎packages/react-scripts/template/src/index.css

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/react-scripts/template/src/index.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
3+
4+
import './css/reset.css';
5+
import './css/global.css';
6+
47
import App from './App';
8+
59
import registerServiceWorker from './registerServiceWorker';
610

711
ReactDOM.render(<App />, document.getElementById('root'));
12+
813
registerServiceWorker();

0 commit comments

Comments
 (0)