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
1function app() {
2 return (
3 <div>
4 <h1>Hello World</h1>;
5 </div>
6 );
7}
1import React from 'react'; const App = () => { const greeting = 'Hello Function Component!'; return <Headline value={greeting} />;}; const Headline = ({ value }) => <h1>{value}</h1>; export default App;
1function Comment(props) {
2 return (
3 <div className="Comment">
4 <div className="UserInfo">
5 <img className="Avatar"
6 src={props.author.avatarUrl}
7 alt={props.author.name}
8 />
9 <div className="UserInfo-name">
10 {props.author.name}
11 </div>
12 </div>
13 <div className="Comment-text">
14 {props.text}
15 </div>
16 <div className="Comment-date">
17 {formatDate(props.date)}
18 </div>
19 </div>
20 );
21}
1function Welcome(props) { return <h1>Hello, {props.name}</h1>;
2}
3
4const element = <Welcome name="Sara" />;ReactDOM.render(
5 element,
6 document.getElementById('root')
7);
1const MySubComponent = (props) => {
2 if (props.display) {
3 return <p>This text is displayed</p>
4 }
5}
6
7class MyComponent extends React.Component {
8 render() {
9 return (
10 <MySubComponent display={true} />
11 )
12 }
13}
14