"How to... React" by Luca Perna

import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return React.createElement('div', null, 'Hello world!');
}
}
ReactDOM.render(
React.createElement(Hello),
document.getElementById('root')
);

React.createElement('a', { href: 'https://goo.gl/zRPems' }, "lorem ipsum");
<a href={'https://goo.gl/zRPems'}>{'lorem ipsum'}</a>

import React from 'react';
import ReactDOM from 'react-dom';
render() {
return <div>{'Hello world!'}</div>;
}
}
ReactDOM.render(
<Hello />,
);

render() {
const whatToGreeting = this.props.whatToGreeting;
return <div>{`Hello ${whatToGreeting}!`}</div>;
}
}
ReactDOM.render(
<Hello whatToGreeting="world" />,
);

import PropTypes from 'prop-types';
static propTypes = {
whatToGreeting: PropTypes.string.isRequired,
}
render() {
}
}

import PropTypes from 'prop-types';
render() {
}
}
Hello.propTypes = {
whatToGreeting: PropTypes.string.isRequired,
};

class MyButton extends React.Component {
constructor() {
super();
this.state = {
label: 'Click me',
};
}
render() {
return <button>{this.state.label}</button>;
}
}

constructor() {
super();
this.state = {
label: 'Click me',
};
}
handleClick = () => {
this.setState({
label: 'Clicked',
});
}
render() {
return <button onClick={this.handleClick}>{this.state.label}</button>;
}
}

const buttonStyle = {
borderRadius: 5,
padding: '15px',
backgroundColor: 'yellow',
};
render() {
return <button style={buttonStyle}>{'I am a fantastic button'}</button>;
}
}

import './buttonStyle.css';
render() {
return (
<button className={'yellow-button'}>
{'I am a fantastic button with a fantastic class'}
</button>
);
}
}

import styled from 'styled-component';
const StyledButton = styled.button`
border-radius: 5px;
padding: 15px;
background-color: yellow;
`;
render() {
return <StyledButton>{'I am a styled component now!!'}</StyledButton>;
}
}

"How to... React" by Luca Perna

More Related Content

What's hot (20)

Similar to "How to... React" by Luca Perna (20)

More from ThinkOpen (20)

Recently uploaded (20)

"How to... React" by Luca Perna