@samitouri / QOS-React-2 / commits / 6c1e8e8a66

Update tutorial to use className

petehunt committed Nov 4, 2013 at 17:04 UTC 6c1e8e8a668d30f02d423498b248541b938586e1
1 file changed +22 -22
docs/docs/tutorial.md
+22 -22
@@ -65,7 +65,7 @@ Let's build the `CommentBox` component, which is just a simple `<div>`:
65 var CommentBox = React.createClass({
66 render: function() {
67 return (
68 - <div class="commentBox">
68 + <div className="commentBox">
69 Hello, world! I am a CommentBox.
70 </div>
71 );
@@ -120,7 +120,7 @@ Let's build skeletons for `CommentList` and `CommentForm` which will, again, be
120 var CommentList = React.createClass({
121 render: function() {
122 return (
123 - <div class="commentList">
123 + <div className="commentList">
124 Hello, world! I am a CommentList.
125 </div>
126 );
@@ -130,7 +130,7 @@ var CommentList = React.createClass({
130 var CommentForm = React.createClass({
131 render: function() {
132 return (
133 - <div class="commentForm">
133 + <div className="commentForm">
134 Hello, world! I am a CommentForm.
135 </div>
136 );
@@ -145,7 +145,7 @@ Next, update the `CommentBox` component to use its new friends:
145 var CommentBox = React.createClass({
146 render: function() {
147 return (
148 - <div class="commentBox">
148 + <div className="commentBox">
149 <h1>Comments</h1>
150 <CommentList />
151 <CommentForm />
@@ -166,7 +166,7 @@ Let's create our third component, `Comment`. We will want to pass it the author
166 var CommentList = React.createClass({
167 render: function() {
168 return (
169 - <div class="commentList">
169 + <div className="commentList">
170 <Comment author="Pete Hunt">This is one comment</Comment>
171 <Comment author="Jordan Walke">This is *another* comment</Comment>
172 </div>
@@ -186,8 +186,8 @@ Let's create the Comment component. It will read the data passed to it from the
186 var Comment = React.createClass({
187 render: function() {
188 return (
189 - <div class="comment">
190 - <h2 class="commentAuthor">
189 + <div className="comment">
190 + <h2 className="commentAuthor">
191 {this.props.author}
192 </h2>
193 {this.props.children}
@@ -223,8 +223,8 @@ var converter = new Showdown.converter();
223 var Comment = React.createClass({
224 render: function() {
225 return (
226 - <div class="comment">
227 - <h2 class="commentAuthor">
226 + <div className="comment">
227 + <h2 className="commentAuthor">
228 {this.props.author}
229 </h2>
230 {converter.makeHtml(this.props.children.toString())}
@@ -247,8 +247,8 @@ var Comment = React.createClass({
247 render: function() {
248 var rawMarkup = converter.makeHtml(this.props.children.toString());
249 return (
250 - <div class="comment">
251 - <h2 class="commentAuthor">
250 + <div className="comment">
251 + <h2 className="commentAuthor">
252 {this.props.author}
253 </h2>
254 <span dangerouslySetInnerHTML={{"{{"}}__html: rawMarkup}} />
@@ -281,7 +281,7 @@ We need to get this data into `CommentList` in a modular way. Modify `CommentBox
281 var CommentBox = React.createClass({
282 render: function() {
283 return (
284 - <div class="commentBox">
284 + <div className="commentBox">
285 <h1>Comments</h1>
286 <CommentList data={this.props.data} />
287 <CommentForm />
@@ -306,7 +306,7 @@ var CommentList = React.createClass({
306 return <Comment author={comment.author}>{comment.text}</Comment>;
307 });
308 return (
309 - <div class="commentList">
309 + <div className="commentList">
310 {commentNodes}
311 </div>
312 );
@@ -346,7 +346,7 @@ var CommentBox = React.createClass({
346 },
347 render: function() {
348 return (
349 - <div class="commentBox">
349 + <div className="commentBox">
350 <h1>Comments</h1>
351 <CommentList data={this.state.data} />
352 <CommentForm />
@@ -389,7 +389,7 @@ var CommentBox = React.createClass({
389 },
390 render: function() {
391 return (
392 - <div class="commentBox">
392 + <div className="commentBox">
393 <h1>Comments</h1>
394 <CommentList data={this.state.data} />
395 <CommentForm />
@@ -426,7 +426,7 @@ var CommentBox = React.createClass({
426 },
427 render: function() {
428 return (
429 - <div class="commentBox">
429 + <div className="commentBox">
430 <h1>Comments</h1>
431 <CommentList data={this.state.data} />
432 <CommentForm />
@@ -453,7 +453,7 @@ Now it's time to build the form. Our `CommentForm` component should ask the user
453 var CommentForm = React.createClass({
454 render: function() {
455 return (
456 - <form class="commentForm">
456 + <form className="commentForm">
457 <input type="text" placeholder="Your name" />
458 <input type="text" placeholder="Say something..." />
459 <input type="submit" />
@@ -481,7 +481,7 @@ var CommentForm = React.createClass({
481 },
482 render: function() {
483 return (
484 - <form class="commentForm" onSubmit={this.handleSubmit}>
484 + <form className="commentForm" onSubmit={this.handleSubmit}>
485 <input type="text" placeholder="Your name" ref="author" />
486 <input
487 type="text"
@@ -539,7 +539,7 @@ var CommentBox = React.createClass({
539 },
540 render: function() {
541 return (
542 - <div class="commentBox">
542 + <div className="commentBox">
543 <h1>Comments</h1>
544 <CommentList data={this.state.data} />
545 <CommentForm
@@ -566,7 +566,7 @@ var CommentForm = React.createClass({
566 },
567 render: function() {
568 return (
569 - <form class="commentForm" onSubmit={this.handleSubmit}>
569 + <form className="commentForm" onSubmit={this.handleSubmit}>
570 <input type="text" placeholder="Your name" ref="author" />
571 <input
572 type="text"
@@ -618,7 +618,7 @@ var CommentBox = React.createClass({
618 },
619 render: function() {
620 return (
621 - <div class="commentBox">
621 + <div className="commentBox">
622 <h1>Comments</h1>
623 <CommentList data={this.state.data} />
624 <CommentForm
@@ -673,7 +673,7 @@ var CommentBox = React.createClass({
673 },
674 render: function() {
675 return (
676 - <div class="commentBox">
676 + <div className="commentBox">
677 <h1>Comments</h1>
678 <CommentList data={this.state.data} />
679 <CommentForm