Startseite Erkunden Hilfe
Anmelden
lu
/
lp
Mirror von git://github.com/heyLu/lp
Beobachten 1
Favorit hinzufügen 0
Fork 0
Code Issues 0 Commits 434 Releases 1 Wiki
Quellcode durchsuchen

start working through the react tutorial

i don't remember this, did they change it?
Lucas Stadler vor 11 Jahren
Ursprung
b331cc5c29
Commit
3a8728880a
3 geänderte Dateien mit 51 neuen und 9 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 45 7
      js/react/entry.js
  2. 5 1
      js/react/index.html
  3. 1 1
      js/react/package.json

+ 45 - 7
js/react/entry.js
Datei anzeigen 

@ -1,16 +1,54 @@
1 
// following along http://facebook.github.io/react/docs/tutorial.html
2
1 3 
import React from "react";
2 4
3 5 
require('./style.css');
4 6
5 
class Greeter {
6 
	greet(name = "World", suffix = "!") {
7 
		console.log(`Hello, ${name}${suffix}`);
7 
class CommentForm extends React.Component {
8 
	render() {
9 
		return (
10 
			<div className="comment-form">
11 
				I might be an actual form someday...
12 
			</div>
13 
		);
14 
	}
15 
}
16
17 
class CommentList extends React.Component {
18 
	render() {
19 
		return (
20 
			<div className="comment-list">
21 
				<Comment author="Alice">Down the... halfpipe!</Comment>
22 
				<Comment author="PP">Alice, what blasphemy!</Comment>
23 
				<Comment author="Maybe Not Lewis">Let her be herself, Peter,
24 
					we let you jump around all the time as well...
25 
				</Comment>
26 
			</div>
27 
		);
8 28 
	}
9 29 
}
10 30
11 
new Greeter().greet("Alice");
31 
class CommentBox extends React.Component {
32 
	render() {
33 
		return (
34 
			<div className="comment-box">
35 
				<h1>Comments</h1>
36 
				<CommentList />
37 
				<CommentForm />
38 
			</div>
39 
		);
40 
	}
41 
}
12 42
13 
var container = document.createElement("div");
14 
document.body.appendChild(container);
43 
class Comment extends React.Component {
44 
	render() {
45 
		return (
46 
			<div className="comment">
47 
				<h2 className="comment-author">{this.props.author}</h2>
48 
				{this.props.children}
49 
			</div>
50 
		);
51 
	}
52 
}
15 53
16 
React.render(<h1>???</h1>, container);
54 
React.render(<CommentBox />, document.getElementById("content"));

+ 5 - 1
js/react/index.html
Datei anzeigen 

@ -1,8 +1,12 @@
1 1 
<html>
2 2 
	<head>
3 
		<meta charset="utf-8">
3 
		<meta charset="utf-8" />
4 
		<title>Hi, React!</title>
4 5 
	</head>
5 6 
	<body>
7 
		<div id="content">
8 
		</div>
9
6 10 
		<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
7 11 
	</body>
8 12 
</html>

+ 1 - 1
js/react/package.json
Datei anzeigen 

@ -6,7 +6,7 @@
6 6 
    "6to5-core": "^3.5.3",
7 7 
    "6to5-loader": "^3.0.0",
8 8 
    "css-loader": "^0.9.1",
9 
    "react": "^0.12.2",
9 
    "react": "^0.13.0-beta.1",
10 10 
    "style-loader": "^0.8.3",
11 11 
    "webpack": "^1.5.3"
12 12 
  },