Skip to content

Commit ba4eef4

Browse files
cassiozencassiozen
committed
Episode 4
1 parent ec61c5b commit ba4eef4

File tree

14 files changed

+275
-0
lines changed

14 files changed

+275
-0
lines changed

‎episode4/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# ReactCasts Episode 4: Context (Part 1)
2+
3+
I wish context was a smooth and straightforward topic but it’s not. It’s one of those concepts you’ll think you understand 100% but ever so often you’ll find yourself dealing with annoying issues crawling out of the woodwork. Then you’ll be spending a lot of time mapping all of the nooks and crannies those issues have been nesting…
4+
5+
That’s why this is a two-part video. I’ll start with the basics, and along the way I’ll point a few potential problems. On the next video I’ll show how to deal with these potential problems and build a robust solution.

‎episode4/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "i18n",
3+
"version": "0.1.0",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "0.7.0"
7+
},
8+
"dependencies": {
9+
"react": "^15.3.2",
10+
"react-dom": "^15.3.2"
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+
}

‎episode4/public/favicon.ico

24.3 KB
Binary file not shown.

‎episode4/public/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<!--
8+
Notice the use of %PUBLIC_URL% in the tag above.
9+
It will be replaced with the URL of the `public` folder during the build.
10+
Only files inside the `public` folder can be referenced from the HTML.
11+
12+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13+
work correctly both with client-side routing and a non-root public URL.
14+
Learn how to configure a non-root public URL by running `npm run build`.
15+
-->
16+
<title>React App</title>
17+
</head>
18+
<body>
19+
<div id="root"></div>
20+
<!--
21+
This HTML file is a template.
22+
If you open it directly in the browser, you will see an empty page.
23+
24+
You can add webfonts, meta tags, or analytics to this file.
25+
The build step will place the bundled scripts into the <body> tag.
26+
27+
To begin the development, run `npm start`.
28+
To create a production bundle, use `npm run build`.
29+
-->
30+
</body>
31+
</html>

‎episode4/src/App.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
h1 {
2+
margin: 0;
3+
}
4+
5+
footer {
6+
position: absolute;
7+
bottom: 10px;
8+
right: 10px;
9+
color: rgba(0, 0, 0, .15);
10+
font-weight: bold;
11+
font-size: 18px;
12+
}
13+
14+
15+
.panel {
16+
position: relative;
17+
border-radius: 4px;
18+
box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
19+
background-color: #ddd;
20+
margin: 15px;
21+
padding: 10px;
22+
width: 664px;
23+
height: 400px;
24+
z-index: 10;
25+
}
26+
27+
28+
.internalPanel {
29+
position: relative;
30+
border-radius: 4px;
31+
box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
32+
background-color: #999;
33+
margin: 30px;
34+
padding: 10px;
35+
width: 600px;
36+
height: 300px;
37+
z-index: 20;
38+
}
39+
40+
41+
.contentPanel {
42+
position: relative;
43+
border-radius: 2px;
44+
border: solid 1px #777;
45+
background-color: #909090;
46+
margin: 30px;
47+
padding: 10px;
48+
width: 520px;
49+
height: 200px;
50+
z-index: 30;
51+
}
52+
53+
54+
button {
55+
font-family: inherit;
56+
font-size: 100%;
57+
padding: .5em 1em;
58+
color: #444;
59+
color: rgba(0,0,0,.8);
60+
border: 1px solid #999;
61+
border: 0 rgba(0,0,0,0);
62+
background-color: #bbb;
63+
text-decoration: none;
64+
border-radius: 2px;
65+
display: inline-block;
66+
zoom: 1;
67+
line-height: normal;
68+
white-space: nowrap;
69+
vertical-align: middle;
70+
text-align: center;
71+
cursor: pointer;
72+
user-select: none;
73+
}
74+
75+
button:hover {
76+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
77+
background-image: -webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
78+
background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
79+
background-image: -moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));
80+
background-image: -o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
81+
background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
82+
}
83+
84+
button:active {
85+
box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
86+
border-color: #000\9;
87+
}
88+
89+
button:focus {outline:0;}
90+
91+
nav {
92+
float:right;
93+
}
94+
a {
95+
margin-right: 10px;
96+
cursor: pointer;
97+
}

‎episode4/src/App.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import Panel from './components/Panel';
3+
import './App.css';
4+
5+
import en from './locales/en.json';
6+
import pt from './locales/pt.json';
7+
8+
const locales = {en, pt};
9+
10+
class App extends Component {
11+
static childContextTypes = {
12+
locale: PropTypes.object
13+
}
14+
15+
state = {
16+
currentLocale: 'en'
17+
}
18+
19+
getChildContext() {
20+
return {locale: locales[this.state.currentLocale]}
21+
}
22+
23+
changeLocale(locale){
24+
this.setState({currentLocale: locale})
25+
}
26+
27+
render() {
28+
return (
29+
<div>
30+
<nav>
31+
<a onClick={() => this.changeLocale('en')}>🇺🇸</a>
32+
<a onClick={() => this.changeLocale('pt')}>🇧🇷</a>
33+
</nav>
34+
<Panel />
35+
</div>
36+
);
37+
}
38+
}
39+
40+
export default App;

‎episode4/src/App.test.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
});

‎episode4/src/components/ContentPanel.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Component, PropTypes } from 'react';
2+
3+
class ContentPanel extends Component {
4+
static contextTypes = {
5+
locale: PropTypes.object
6+
}
7+
render() {
8+
const { locale } = this.context;
9+
return (
10+
<div className="contentPanel">
11+
<h1>{locale.header}</h1>
12+
<p>
13+
{locale.text}
14+
</p>
15+
<button>{locale.buttonLabel}</button>
16+
<footer>ContentPanel.js</footer>
17+
</div>
18+
);
19+
}
20+
}
21+
22+
export default ContentPanel;

‎episode4/src/components/InternalPanel.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { Component } from 'react';
2+
import ContentPane from './ContentPanel';
3+
4+
class InternalPanel extends Component {
5+
render() {
6+
return (
7+
<div className="internalPanel">
8+
<ContentPane />
9+
<footer>InternalPanel.js</footer>
10+
</div>
11+
);
12+
}
13+
}
14+
15+
export default InternalPanel;

‎episode4/src/components/Panel.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { Component } from 'react';
2+
import InternalPanel from './InternalPanel';
3+
4+
class Panel extends Component {
5+
render() {
6+
return (
7+
<div className="panel">
8+
<InternalPanel />
9+
<footer>Panel.js</footer>
10+
</div>
11+
);
12+
}
13+
}
14+
15+
export default Panel;

‎episode4/src/index.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}

‎episode4/src/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
import './index.css';
5+
6+
ReactDOM.render(
7+
<App />,
8+
document.getElementById('root')
9+
);

‎episode4/src/locales/en.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"header": "Heading Text",
3+
"text": "This content is inside the third panel, and so it is also inside the internal panel and the parent panel.",
4+
"buttonLabel": "I'm a button"
5+
}

‎episode4/src/locales/pt.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"header": "Texto de Cabeçalho",
3+
"text": "O Araketu, o Araketu quando toca, deixa todo mundo pulando que nem pipoca. O fogo é fogo! Esquenta...",
4+
"buttonLabel": "Sou um botão"
5+
}

0 commit comments

Comments
 (0)