Skip to content

Commit

Permalink
Small typos
Browse files Browse the repository at this point in the history
  • Loading branch information
Daria Trainor committed Feb 14, 2017
1 parent 27d13c3 commit 2456120
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion react-jsx/5.1.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ var nav = React.createElement(

You can think of JSX as a shorthand for calling `React.createElement()`.

The idea of mixing HTML and JavaScript in the same file can be a rather contentious topic. Ignore the debate. Use it if you find it helpful. If not, write the React code required to create React nodes. Your choice. My opinion is that JSX provides a concise and familiar syntax for defining a tree structure with attributes that does not require learning a templating language or leaving JavaScript. Both of which are can be a win when building large applications.
The idea of mixing HTML and JavaScript in the same file can be a rather contentious topic. Ignore the debate. Use it if you find it helpful. If not, write the React code required to create React nodes. Your choice. My opinion is that JSX provides a concise and familiar syntax for defining a tree structure with attributes that does not require learning a templating language or leaving JavaScript. Both of which can be a win when building large applications.

It should be obvious but JSX is easier to read and write over large pyramids of JavaScript function calls or object literals (e.g., contrast the two code samples in this section). Additionally the React team clearly believes JSX is better suited for defining UI's than a traditional templating (e.g., Handlebars) solution:

Expand Down
2 changes: 1 addition & 1 deletion what-is-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ By doing all this we can now set the state by clicking on one of the options. In

The next thing we will need to do is pass the current state down to the `<MyOption>` component so that it can respond visually to the state of the component.

Using props, again, we will pass the `selected` state from the `<MySelect>` component down to the `<MyOption>` component by placing the property `state={this.state.selected}` on all of the `<MyOption>` components. Now that we know the state (i.e., `this.props.state`) and the current value (i.e., `this.props.value`) of the option we can verify if the state matches the value in a give `<MyOption>` component . If it does, we then know that this option should be selected. We do this by writing a simple `if` statement which adds a styled selected state (i.e., `selectedStyle`) to the JSX `<div>` if the state matches the value of the current option. Otherwise, we return a React element with `unSelectedStyle` styles.
Using props, again, we will pass the `selected` state from the `<MySelect>` component down to the `<MyOption>` component by placing the property `state={this.state.selected}` on all of the `<MyOption>` components. Now that we know the state (i.e., `this.props.state`) and the current value (i.e., `this.props.value`) of the option we can verify if the state matches the value in a given `<MyOption>` component . If it does, we then know that this option should be selected. We do this by writing a simple `if` statement which adds a styled selected state (i.e., `selectedStyle`) to the JSX `<div>` if the state matches the value of the current option. Otherwise, we return a React element with `unSelectedStyle` styles.

> [source code](https://jsfiddle.net/L1z9za23/#tabs=js,result,html,resources)
Expand Down

0 comments on commit 2456120

Please sign in to comment.