The document contains code snippets demonstrating different ways to create and style components in React, including: - Defining a basic component class that renders JSX - Passing props to components - Adding propTypes for validation - Managing component state - Styling components with inline styles, CSS classes, and styled components

3. •
•
•

4. •
•

6. •
•

8. 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')
);

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

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

11. •
•
•
•

12. class Hello extends React.Component {
render() {
const whatToGreeting = this.props.whatToGreeting;
return <div>{`Hello ${whatToGreeting}!`}</div>;
}
}
ReactDOM.render(
<Hello whatToGreeting="world" />,
document.getElementById('root')
);

14. import PropTypes from 'prop-types';
class Hello extends React.Component {
static propTypes = {
whatToGreeting: PropTypes.string.isRequired,
}
render() {
const whatToGreeting = this.props.whatToGreeting;
return <div>{`Hello ${whatToGreeting}!`}</div>;
}
}

15. import PropTypes from 'prop-types';
class Hello extends React.Component {
render() {
const whatToGreeting = this.props.whatToGreeting;
return <div>{`Hello ${whatToGreeting}!`}</div>;
}
}
Hello.propTypes = {
whatToGreeting: PropTypes.string.isRequired,
};

16. •
•
•

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

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

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

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

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