react小案例

index.js

import React from 'react';
import Hello from './hello/Hello'

// 旧版，18之前
// import ReactDOM from 'react-dom';
// ReactDOM.render(<Hello></Hello>,document.getElementById("root"))

// 新版，18之后
// 引入Hello组件
// import Hello from './hello/Hello.js'
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root')).render(<Hello/>);
// root.render(<Hello/>);

hello.js

import React, { Component } from 'react'
import List from './List.js'

class Hello extends Component{
	constructor(){
		super()
		this.state = {
			list:[
				{id:1,name:"大得",text:"评论hello"},
				{id:2,name:"大得",text:"评论hello"},
				{id:3,name:"大得",text:"评论hello"},
				{id:4,name:"大得",text:"评论hello"},
				{id:5,name:"大得",text:"评论hello"},
				{id:6,name:"大得",text:"评论hello"}
			]
		}
	}
	
	render(){
		return (
			<div>
				<h2>大得想说</h2>
				{this.state.list.map((req,index) => {
					return <List key={index} lists={req} />
				})}
			</div>
		)
	}
}

export default Hello;

List.js

import React from 'react'

export default function(props){
	return(
		<div style={{color:'red',marginTop:'10px',borderBottom:'1px solid #000'}}>
			<h3>{props.lists.name}</h3>
			<p>{props.lists.text}</p>
			<br />
		</div>
	)
}