- 目标
目的:自己做记录,记录制作过程以及遇到的问题。内容来自b站的up主:黑马程序员(up主名字)的黑马程序员黑马程序员前端React视频教程....(视频名称部分)。
效果展示:
![](https://i-blog.csdnimg.cn/blog_migrate/9b19e40c48ca2aa287e70e4bd87f8d93.png)
![](https://i-blog.csdnimg.cn/blog_migrate/06fcc5e4e13e1ad687d01e270aab3227.png)
2. 开始制作
2.1 创建项目
新建一个文件夹,用vscode打开,在vscode中打开终端,在终端内数输入“npx create-react-app comm”(comm是项目名,自己取的)
![](https://i-blog.csdnimg.cn/blog_migrate/2e3d90e986d47d00496d9d1c53eb302c.png)
创建好之后的样子
在终端输入“cd comm”,再输入“yarn start(/npm start)”
![](https://i-blog.csdnimg.cn/blog_migrate/91be01052f3cb7a422e2dc2acd1856f5.png)
创建完成
完成基础样式,点开src文件夹里面的index.js,将里面的内容替换成如下
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// 评论列表案例
// comments: [
// { id:1, name:'jack', content:'沙发!!!' },
// { id:2, name:'andy ', content:'板凳!!!' },
// { id:3, name:'tom', content:'楼主好人!!!' }
// ]
class App extends React.Component {
render() {
return (
<div className="app">
<div>
<input className='user' ty