github/react-from-zero
1
1
Fork 0
mirror of https://github.com/kay-is/react-from-zero.git synced 2026-04-24 03:00:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update to React & Babel

Browse Source
This commit is contained in:
Kay Plößer
2016-04-26 21:16:24 +02:00
parent 4716b54eba
commit af7fd0de91
11 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
0-object-elements.html
View File

@@ -2,8 +2,8 @@
<title>0 Object Elements - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<div id='app'><!--The render target of our React application--></div>

4
1-element-factory.html
View File

@@ -2,8 +2,8 @@
<title>1 Element Factory - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<div id='app'></div>

6
10-example-app.html
View File

@@ -2,9 +2,9 @@
<title>10 Example App - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id='app'></div>

6
2-jsx.html
View File

@@ -2,10 +2,10 @@
<title>2 JSX - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js">
// Now we will use JSX, which needs to be converted to JavaScript.
// For this we will use Babel. Babel is normally used to convert ES2015 to ES5, but
// it also can convert JSX to ES5. Babels browser version uses text/babel script tags.

6
3-nested-elements.html
View File

@@ -2,9 +2,9 @@
<title>3 Nested Elements - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id='app'></div>

6
4-components.html
View File

@@ -2,9 +2,9 @@
<title>4 Components - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id='app'></div>

11
5-properties.html
View File

@@ -2,9 +2,9 @@
<title>5 Properties - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id='app'></div>
@@ -31,8 +31,9 @@ reactElement = <MyComponent {...props}/>
// This allows components with dynamic content
var planets = ['earth', 'mars', 'venus']
var elements = planets.map(function(planet) {
return <MyComponent className='myClass' customData={planet}/>
// If an array is used as "child node" each child needs a unique key-property
var elements = planets.map(function(planet, index) {
return <MyComponent className='myClass' customData={planet} key={index}/>
})
reactElement = <div>{elements}</div>

6
6-property-types.html
View File

@@ -2,9 +2,9 @@
<title>6 Property Types - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id='app'></div>

6
7-property-example.html
View File

@@ -2,9 +2,9 @@
<title>7 Property Example - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id='app'></div>

6
8-nested-components.html
View File

@@ -2,9 +2,9 @@
<title>8 Nested Components - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id='app'></div>

13
9-component-classes.html
View File

@@ -2,9 +2,9 @@
<title>9 Component Classes - React From Zero</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id='app'></div>
@@ -44,7 +44,8 @@ var MyComponent = React.createClass({
// this method handles all the clicks on the <span> element
handleClick: function() {
// every call of this.setState() triggers a call of render() with the new values in this.state
// every call of this.setState() triggers a call of render() with
// the new values in this.state
this.setState({
times: this.state.times + 1
})
@@ -63,8 +64,8 @@ var MyComponent = React.createClass({
color: this.props.color
}
// returning an element with a click-handler and the props and state values
// state is stored in this.state
// returning an element with a click-handler and the props and
// state values. state is stored in this.state
return <span onClick={this.handleClick} style={style}>
Clicked {this.state.times} times
</span>