-
Notifications
You must be signed in to change notification settings - Fork 45.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use controlled components in tutorial #5445
Use controlled components in tutorial #5445
Conversation
<input type="text" placeholder="Your name" ref="author" /> | ||
<input type="text" placeholder="Say something..." ref="text" /> | ||
<input type="text" placeholder="Your name" | ||
value={this.state.author} onChange={this.handleAuthorChange}/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know this is a lot of lines but its our style and I think we should use it so we're consistent with the rest of our code samples.
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleChange}
/>
Thanks for taking this on! This is a lot of code to introduce all at once - I think we might need a bit more in the paragraph preceding that first big code change to tie it together more.
It's technically accurate - that is exactly what we're doing. But then you see a whole lot of code changing to do something that on the surface seems pretty straightforward. So I think saying something about the fact that we're going to use |
@yangshun updated the pull request. |
@zpao Great suggstions! I have broken the code changes down into smaller and more digestable chunks. Have a read of the modified version at http://yangshun.im/react/docs/tutorial.html#adding-new-comments |
@zpao what do you think? |
|
||
```javascript{3-14,16-19} | ||
```javascript{3-11,14-26} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you make this 27 (to catch the closing </form>
tag (it's already messed up on the site so not your fault)
Otherwise, this looks really awesome, thanks! Could you fix that one bit and squash the commits, then we can merge this. Would you like to update the tutorial repo as well (https://github.com/reactjs/react-tutorial/blob/master/public/scripts/example.js)? I'm happy to do that but figured I'd give you the chance if you wanted :) |
Yes I'd gladly make the fixes for the tutorial repo too! Gimme a moment to modify the highlighting and submit a PR to the tutorial repo (: |
@zpao Do I have to update the tutorials of the other languages too? |
@yangshun updated the pull request. |
No, let's let the translators do that. Unless you happen to know Italian, Japanese, Korean, and Chinese… |
But they will have to sync up the code changes too since another snippet has been added. Will that be fine? |
Yea, that'll be fine. We don't do a good job of surfacing those translations so it's not a huge deal. |
Awesome, let's get these in and I'll update the site :) |
Use controlled components in tutorial
Got it! The PR for the react-tutorial can be found here: reactjs/react-tutorial#101 |
Use controlled components in tutorial (cherry picked from commit 904e9e3)
Updated tutorial and use controlled components instead of refs, as mentioned in #5443. @zpao