View sproptypes_user_with_proptypes.jsx
const User = ({ name, friends }) => ( | |
<div> | |
Name: {name} | |
{friends && friends.map(friend => <User key={friend.name} {...friend} />)} | |
</div> | |
); | |
User.propTypes = { | |
name: PropTypes.string.isRequired, | |
friends: PropTypes.arrayOf( |
View sproptypes_user.jsx
const User = ({ name, friends }) => ( | |
<div> | |
Name: {name} | |
{friends.map(friend => ( | |
<User key={friend.name} {...friend} /> | |
))} | |
</div> | |
); |
View reactintro_form_refactored2.jsx
... | |
import FirstNameField from './FirstNameField'; | |
import LastNameField from './LastNameField'; | |
class SimpleForm extends React.Component { | |
... | |
render() { | |
const { firstNameError, firstName, lastName, lastNameError } = this.state; |
View reactintro_FirstNameField.jsx
import React from 'react'; | |
import TextField from './TextField'; | |
const FirstNameField = ({...rest}) => ( | |
<TextField name="firstName" | |
label="First name:" | |
{...rest} /> | |
); | |
export default FirstNameField; |
View reactintro_LastNameField.jsx
import React from 'react'; | |
import TextField from './TextField'; | |
const LastNameField = ({...rest}) => ( | |
<TextField name="lastName" | |
label="Last name:" | |
{...rest} /> | |
); | |
export default LastNameField; |
View reactintro_render_refactored.jsx
... | |
import TextField from './TextField'; | |
class SimpleForm extends React.Component { | |
... | |
render() { | |
const { firstNameError, firstName, lastName, lastNameError } = this.state; |
View reactintro_TextField.jsx
import React from 'react' | |
import style from "./style"; | |
const TextField = ({name, onChange, onBlur, error, label}) => ( | |
<div style={style.inputGroup}> | |
<label> | |
{label} | |
<input | |
style={style.input} | |
type="text" |
View reactintro_form_two_fields.jsx
class SimpleForm extends React.Component { | |
state = { | |
... | |
lastName: "", | |
lastNameError: "" | |
}; | |
validateName = ...; | |
onFirstNameBlur = ...; |
View reactintro_greetings.jsx
import React from "react"; | |
const Greetings = ({ firstName, lastName }) => ( | |
<div> | |
Hey you! {firstName} {lastName}! | |
</div> | |
); | |
export default Greetings; |
View reactintro_form_styled.jsx
import style from './style'; | |
class SimpleForm extends React.Component { | |
... | |
render() { | |
const { firstNameError, firstName, lastName } = this.state; | |
return ( | |
<div style={style.form}> |
NewerOlder