Skip to content

Instantly share code, notes, and snippets.

Avatar

Ilya Suzdalnitski suzdalnitski

View GitHub Profile
View reactintro_style.js
// style.js:
const style = {
form: {
margin: 50,
padding: 10,
width: 300,
border: "1px solid black",
backgroundColor: "black",
color: "white"
},
View reactintro_style.jsx
render() {
const { firstNameError, firstName } = this.state;
return (
<div
style={{
margin: 50,
padding: 10,
width: 300,
border: "1px solid black",
View reactintro_validation.jsx
class SimpleForm extends React.Component {
state = {
firstName: "",
firstNameError: "",
};
validateName = name => {
const regex = /[A-Za-z]{3,}/;
return !regex.test(name)
View reactintro_two_inputs.jsx
class SimpleForm extends React.Component {
state = {
firstName: "",
lastName: ""
};
onFirstNameChange = event =>
this.setState({
firstName: event.target.value
});
View reactintro_form_state.jsx
class SimpleForm extends React.Component {
state = {
firstName: "",
};
onFirstNameChange = event =>
this.setState({
firstName: event.target.value
});
View reactintro_input_simple.jsx
import React from "react";
class SimpleForm extends React.Component {
render() {
return (
<div>
<input type="text" name="firstName" />
<Greetings firstName="John" />
</div>
);
View reactintro_props_class.jsx
class Greetings extends React.Component {
render() {
return (
<div>Hey you! {this.props.firstName} {this.props.lastName}!</div>
);
}
}
View reactintro_props_destructured.jsx
const Greetings = ({ firstName, lastName }) => <div>Hey you! {firstName} {lastName}!</div>;
View reactintro_props.jsx
const Greetings = (props) => <div>Hey you! {props.firstName} {props.lastName}!</div>;
const App = () => (
<div>
<Greetings firstName="John" lastName="Smith" />
</div>
);
View reactintro_arrow.jsx
const App = () => (
<div className="App">
...
</div>
);
export default App;