好客租房40-react组件基础综合案例-案例需求分析

简介: 好客租房40-react组件基础综合案例-案例需求分析

实现 案例的数据

渲染评论列表 有评论

没有评论 暂无评论

获取评论信息 包括评论人和受控组件

发表评论 更新评论

//导入react

import React from 'react'

import ReactDOM from 'react-dom'

//导入组件

// 约定1:类组件必须以大写字母开头

// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性

// 约定3:组件必须提供render方法

// 约定4:render方法必须有返回值

class HelloWorld extends React.Component {
     render() {
         return (
             <div className="app">
                 <div>
                     <input
                         className="user"
                         type="text"
                         placeholder="请输入评论人"
                     />
                     <br />
                     <textarea
                         className="content"
                         cols="30"
                         rows="10"
                         placeholder="请输入评论列表"
                     ></textarea>
                     <br />
                     <button>发表评论</button>
                 </div>
                 <div className="no-comment">暂无评论,快去评论吧~</div>
                 <ul>
                     <li>
                         <h3>评论人:jack</h3>
                         <h3>评论内容:沙发</h3>
                     </li>
                 </ul>
             </div>
         )
     }
 }
 ReactDOM.render(<HelloWorld />, document.getElementById('root'))

运行结果

image.png

相关文章
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
121 0
|
3月前
|
存储 前端开发 JavaScript
最适合新手学习的react案例-Todolist尊享版!
【8月更文挑战第13天】最适合新手学习的react案例-Todolist尊享版!
57 2
最适合新手学习的react案例-Todolist尊享版!
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
54 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
32 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
50 6
React技术栈-基于react脚手架编写评论管理案例
|
2月前
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
32 2
|
6月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
52 1
|
6月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
119 1
|
6月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
52 0
|
6月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理