1class MyComponent extends React.Component{
2 constructor(props){
3 super(props);
4 };
5 render(){
6 return(
7 <div>
8 <h1>
9 My First React Component!
10 </h1>
11 </div>
12 );
13 }
14};
15
1class Welcome extends React.Component {
2 render() {
3 return <h1>Hello, {this.props.name}</h1>;
4 }
5}
1function Welcome(props) {
2 return <h1>Hello, {props.name}</h1>;
3}
4
5function App() {
6 return (
7 <div>
8 <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div>
9 );
10}
11
12ReactDOM.render(
13 <App />,
14 document.getElementById('root')
15);
1class Clock extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = {date: new Date()};
5 }
6
7 componentDidMount() { }
8 componentWillUnmount() { }
9 render() {
10 return (
11 <div>
12 <h1>Hello, world!</h1>
13 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
14 </div>
15 );
16 }
17}
1import React from 'react'; const App = () => { const greeting = 'Hello Function Component!'; return <Headline value={greeting} />;}; const Headline = ({ value }) => <h1>{value}</h1>; export default App;
1class Welcome extends React.Component {
2 render() {
3 return <h1>Bonjour, {this.props.name}</h1>;
4 }
5}