Skip to content

Commit 3b9cc13

Browse files
rinse0utrinse0ut
committed
Initial commit
0 parents  commit 3b9cc13

55 files changed

Lines changed: 4411 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
*DS_Store

‎01-Fundamentals/01-hello-world.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React Fundamentals</title>
6+
7+
<!-- le styles -->
8+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
9+
</head>
10+
11+
<body class="container">
12+
<div id="main"></div>
13+
</body>
14+
15+
<!-- js -->
16+
<script src="https://fb.me/react-0.14.7.js"></script>
17+
<script src="https://fb.me/react-dom-0.14.7.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
19+
20+
<script type="text/babel">
21+
22+
/*
23+
Hello World
24+
*/
25+
var App = React.createClass({
26+
render: function() {
27+
return (
28+
<h1>Hello React!</h1>
29+
)
30+
}
31+
});
32+
33+
ReactDOM.render(
34+
<App/>,
35+
document.getElementById('main')
36+
);
37+
</script>
38+
</html>
39+

‎01-Fundamentals/02-properties.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React Fundamentals</title>
6+
7+
<!-- le styles -->
8+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
9+
</head>
10+
11+
<body class="container">
12+
<div id="main"></div>
13+
</body>
14+
15+
<!-- js -->
16+
<script src="https://fb.me/react-0.14.7.js"></script>
17+
<script src="https://fb.me/react-dom-0.14.7.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
19+
20+
<script type="text/babel">
21+
22+
/*
23+
Properties - are passed into components as static values or methods.
24+
25+
Mutating props is bad mmkay!
26+
https://facebook.github.io/react/docs/jsx-spread.html#mutating-props-is-bad
27+
28+
Source / further info:
29+
https://egghead.io/lessons/react-introduction-to-properties
30+
https://facebook.github.io/react/docs/jsx-spread.html#spread-attributes
31+
32+
Exercise: Create a person component with three properties. Set the properties via the following ways:
33+
- attributes
34+
- default properties
35+
- spread attributes
36+
*/
37+
var App = React.createClass({
38+
propTypes: {
39+
name: React.PropTypes.string,
40+
cat: React.PropTypes.number.isRequired
41+
},
42+
getDefaultProps: function() {
43+
return {
44+
name: "Hacker"
45+
}
46+
},
47+
render: function() {
48+
return (
49+
<h1>Hello { this.props.name }!</h1>
50+
)
51+
}
52+
});
53+
54+
ReactDOM.render(
55+
<App cat={42} />,
56+
document.getElementById('main')
57+
);
58+
</script>
59+
</html>
60+

‎01-Fundamentals/03-state.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React Fundamentals</title>
6+
7+
<!-- le styles -->
8+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
9+
</head>
10+
11+
<body class="container">
12+
<div id="main"></div>
13+
</body>
14+
15+
<!-- js -->
16+
<script src="https://fb.me/react-0.14.7.js"></script>
17+
<script src="https://fb.me/react-dom-0.14.7.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
19+
20+
<script type="text/babel">
21+
22+
/*
23+
State - a collection of mutable values that are managed by the component it's self
24+
25+
Source / further info:
26+
https://egghead.io/lessons/react-state-basics
27+
https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
28+
https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html
29+
30+
Exercise: Create a new component with a state name attribute that can be updated by a text field
31+
*/
32+
var App = React.createClass({
33+
getInitialState: function() {
34+
return {
35+
like: false
36+
}
37+
},
38+
like: function() {
39+
this.setState({
40+
like: !this.state.like
41+
});
42+
},
43+
render: function() {
44+
return (
45+
<div className="welcome">
46+
<h1>Hello { this.props.name }!</h1>
47+
<button type="button" className={this.state.like ? 'btn btn-primary' : 'btn btn-default'} onClick={this.like}>Like</button>
48+
</div>
49+
)
50+
}
51+
});
52+
53+
ReactDOM.render(
54+
<App name='Hacker' />,
55+
document.getElementById('main')
56+
);
57+
</script>
58+
</html>
59+

‎01-Fundamentals/04-composition.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React Fundamentals</title>
6+
7+
<!-- le styles -->
8+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
9+
</head>
10+
11+
<body class="container">
12+
<div id="main"></div>
13+
</body>
14+
15+
<!-- js -->
16+
<script src="https://fb.me/react-0.14.7.js"></script>
17+
<script src="https://fb.me/react-dom-0.14.7.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
19+
20+
<script type="text/babel">
21+
22+
/*
23+
Composition
24+
25+
Further reading:
26+
https://facebook.github.io/react/docs/multiple-components.html
27+
*/
28+
var App = React.createClass({
29+
render: function() {
30+
return (
31+
<div className="welcome">
32+
<h1>{ this.props.title }</h1>
33+
<Like />
34+
</div>
35+
)
36+
}
37+
});
38+
39+
var Like = React.createClass({
40+
getInitialState: function() {
41+
return {
42+
like: false
43+
}
44+
},
45+
like: function() {
46+
this.setState({
47+
like: !this.state.like
48+
});
49+
},
50+
render: function() {
51+
return (
52+
<button type="button" className={this.state.like ? 'btn btn-primary' : 'btn btn-default'} onClick={this.like}>Like</button>
53+
)
54+
}
55+
});
56+
57+
ReactDOM.render(
58+
<App title='Composition' />,
59+
document.getElementById('main')
60+
);
61+
</script>
62+
</html>
63+

‎01-Fundamentals/05-lifecycle-methods.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React Fundamentals</title>
6+
7+
<!-- le styles -->
8+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
9+
</head>
10+
11+
<body class="container">
12+
<div id="main"></div>
13+
</body>
14+
15+
<!-- js -->
16+
<script src="https://fb.me/react-0.14.7.js"></script>
17+
<script src="https://fb.me/react-dom-0.14.7.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
19+
20+
<script type="text/babel">
21+
22+
/*
23+
Lifecycle methods
24+
25+
Source / further info:
26+
http://facebook.github.io/react/docs/component-specs.html
27+
https://egghead.io/lessons/react-component-lifecycle-mounting-basics?series=react-fundamentals
28+
29+
Exercise: Add a componentWillUnmount lifecycle method that console logs 'removed' and a wrapper component that removes it's child from the DOM.
30+
*/
31+
var App = React.createClass({
32+
getInitialState: function() {
33+
return {
34+
val: 0
35+
}
36+
},
37+
componentWillMount: function() {
38+
console.log('mounting');
39+
},
40+
componentDidMount: function() {
41+
console.log('mounted');
42+
},
43+
componentDidUpdate: function() {
44+
console.log('updated');
45+
},
46+
handleClick: function() {
47+
this.setState({
48+
val: 1
49+
});
50+
},
51+
render: function() {
52+
console.log('rendering');
53+
return (
54+
<div className="welcome">
55+
<h1>{ this.props.title }</h1>
56+
<button type="button" onClick={this.handleClick}>Update</button>
57+
</div>
58+
)
59+
}
60+
});
61+
62+
ReactDOM.render(
63+
<App title='Lifecycle Methods' />,
64+
document.getElementById('main')
65+
);
66+
</script>
67+
</html>
68+

‎01-Fundamentals/06-unidirectional-data-flow.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React Fundamentals</title>
6+
7+
<!-- le styles -->
8+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
9+
</head>
10+
11+
<body class="container">
12+
<div id="main"></div>
13+
</body>
14+
15+
<!-- js -->
16+
<script src="https://fb.me/react-0.14.7.js"></script>
17+
<script src="https://fb.me/react-dom-0.14.7.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
19+
20+
<script type="text/babel">
21+
/*
22+
Unidirectional Data Flow
23+
24+
Application state is managed in the top level component and flows down to the child components via props.
25+
26+
Source & Further reading:
27+
https://hashnode.com/post/why-does-react-emphasize-on-unidirectional-data-flow-and-flux-architecture-ciibz8ej600n2j3xtxgc0n1f0
28+
https://scotch.io/tutorials/learning-react-getting-started-and-concepts#unidirectional-data-flow
29+
*/
30+
var FilteredList = React.createClass({
31+
filterList: (event) =>{
32+
var updatedList = this.state.initialItems;
33+
updatedList = updatedList.filter item => {
34+
return item.toLowerCase().search(
35+
event.target.value.toLowerCase()) !== -1;
36+
});
37+
this.setState({items: updatedList});
38+
},
39+
getInitialState: function() {
40+
return {
41+
initialItems: [
42+
'Angular',
43+
'Backbone',
44+
'Ember',
45+
'Express',
46+
'React',
47+
'Node',
48+
'MongoDB',
49+
'Polymer',
50+
'Vue'
51+
],
52+
items: []
53+
}
54+
},
55+
componentWillMount: function(){
56+
this.setState({items: this.state.initialItems})
57+
},
58+
render: function(){
59+
return (
60+
<div className="filter-list">
61+
<input type="text" placeholder="Search" onChange={this.filterList} />
62+
<List items={this.state.items} />
63+
</div>
64+
)
65+
}
66+
});
67+
68+
var List = React.createClass({
69+
render: function() {
70+
return (
71+
<ul>
72+
{
73+
this.props.items.map(function(item) {
74+
return <li key={item}>{item}</li>
75+
})
76+
}
77+
</ul>
78+
)
79+
}
80+
});
81+
82+
ReactDOM.render(
83+
<FilteredList />,
84+
document.getElementById('main')
85+
);
86+
</script>
87+
</html>
88+

0 commit comments

Comments
 (0)