maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update tutorial to use className

This commit is contained in:
petehunt 2013-11-04 17:04:25 -08:00
parent ff3c8ccbe6
commit 6c1e8e8a66
1 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
docs/docs/tutorial.md
View File

@ -65,7 +65,7 @@ Let's build the `CommentBox` component, which is just a simple `<div>`:
var CommentBox = React.createClass({
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
@ -120,7 +120,7 @@ Let's build skeletons for `CommentList` and `CommentForm` which will, again, be
var CommentList = React.createClass({
render: function() {
return (
<div class="commentList">
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
@ -130,7 +130,7 @@ var CommentList = React.createClass({
var CommentForm = React.createClass({
render: function() {
return (
<div class="commentForm">
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
@ -145,7 +145,7 @@ Next, update the `CommentBox` component to use its new friends:
var CommentBox = React.createClass({
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
@ -166,7 +166,7 @@ Let's create our third component, `Comment`. We will want to pass it the author
var CommentList = React.createClass({
render: function() {
return (
<div class="commentList">
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
@ -186,8 +186,8 @@ Let's create the Comment component. It will read the data passed to it from the
var Comment = React.createClass({
render: function() {
return (
<div class="comment">
<h2 class="commentAuthor">
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
@ -223,8 +223,8 @@ var converter = new Showdown.converter();
var Comment = React.createClass({
render: function() {
return (
<div class="comment">
<h2 class="commentAuthor">
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{converter.makeHtml(this.props.children.toString())}
@ -247,8 +247,8 @@ var Comment = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div class="comment">
<h2 class="commentAuthor">
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{"{{"}}__html: rawMarkup}} />
@ -281,7 +281,7 @@ We need to get this data into `CommentList` in a modular way. Modify `CommentBox
var CommentBox = React.createClass({
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
@ -306,7 +306,7 @@ var CommentList = React.createClass({
return <Comment author={comment.author}>{comment.text}</Comment>;
});
return (
<div class="commentList">
<div className="commentList">
{commentNodes}
</div>
);
@ -346,7 +346,7 @@ var CommentBox = React.createClass({
},
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
@ -389,7 +389,7 @@ var CommentBox = React.createClass({
},
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
@ -426,7 +426,7 @@ var CommentBox = React.createClass({
},
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
@ -453,7 +453,7 @@ Now it's time to build the form. Our `CommentForm` component should ask the user
var CommentForm = React.createClass({
render: function() {
return (
<form class="commentForm">
<form className="commentForm">
<input type="text" placeholder="Your name" />
<input type="text" placeholder="Say something..." />
<input type="submit" />
@ -481,7 +481,7 @@ var CommentForm = React.createClass({
},
render: function() {
return (
<form class="commentForm" onSubmit={this.handleSubmit}>
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
<input
type="text"
@ -539,7 +539,7 @@ var CommentBox = React.createClass({
},
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm
@ -566,7 +566,7 @@ var CommentForm = React.createClass({
},
render: function() {
return (
<form class="commentForm" onSubmit={this.handleSubmit}>
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
<input
type="text"
@ -618,7 +618,7 @@ var CommentBox = React.createClass({
},
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm
@ -673,7 +673,7 @@ var CommentBox = React.createClass({
},
render: function() {
return (
<div class="commentBox">
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm