Skip to content

Instantly share code, notes, and snippets.

Avatar

Ilya Suzdalnitski suzdalnitski

View GitHub Profile
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}>
You can’t perform that action at this time.