create-react-app做的留言板

FWHeart 发布于2019-08-20 18:25 / 2395人阅读

摘要：做的留言板先看一下我们的留言板，然后在去实现功能做留言板首先要配置好我们的文件，然后才能接着做我们的留言板快速开始安装，建议使用使用命令创建应用，为项目名称进入目录，然后启动接下来看看我们的代码吧留言板留言板

create-react-app做的留言板

先看一下我们的留言板，然后在去实现功能

做留言板首先要配置好我们的文件，然后才能接着做我们的留言板

快速开始：

npm install -g create-react-app       /* 安装create-react-app，建议使用cnpm */

create-react-app myapp                 /* 使用命令创建应用，myapp为项目名称 */

cd myapp                                        /* 进入目录，然后启动 */

npm start

接下来看看我们的代码吧

index.html

index.js

import React from "react";
import ReactDOM from "react-dom";
import LiuApp from "./LiuApp";

import "./bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(,document.getElementById("app"));

LiuApp.js

import React from "react";

import LiuList from "./LiuList";
import LiuForm from "./LiuForm";

class LiuApp extends React.Component{

    constructor(props){
    
        super(props);


        this.ids=1;
        this.state={
                todos:[]
        };
        
        this.addItem=this.addItem.bind(this);
        this.deleteItem=this.deleteItem.bind(this);

    }
    deleteItem(id){
        let newtodos=this.state.todos.filter((item)=>{
            return !(item.id==id)
        });
          this.setState({
            todos:newtodos
        });

    }

    addItem(value){
       this.state.todos.unshift(
            {
                id:this.ids++,
                text:value,
                time:(new Date()).toLocaleString(),
                done:0
            }
        )

        this.setState({
            todos:this.state.todos
        });
    }

    render(){
        return (
            

                

                

                

                

                
                    
                            留言板
                            
                    
                    
                             
                             
                    
                 
            
          
        );
    }
}

export default LiuApp;

LiuList.js

import React from "react";

import LiuItem from "./LiuItem";
class LiuList extends React.Component{
    render(){
        let todos=this.props.data;
       
        let todoItems=todos.map(item=>{
            return 
        });
        


        return (
            
                    {todoItems}
                
                
                    
                        留言板
                    
                
                
                
            
          


        );
    }
}

export default LiuList;

LiuForm.js

import React from "react";


class LiuForm extends React.Component{
   tijiao(event){
        event.preventDefault();
    }
    add(event){
        
        if(event.type=="keyup"&&event.keyCode!=13){
            return false;
        }

        let txt=this.refs.txt.value;

        if(txt=="") return false;
        
        this.props.addItem(txt);


        this.refs.txt.value="";
    }
    render(){
        return(
             
                
                
                    
                        
                    
                    
                
                    
                
                

            
            
        );
    }
}
export default LiuForm;

LiuItem.js

import React from "react";


class LiuItem extends React.Component{

    delete(){
        this.props.deleteItem(this.props.data.id);
    }
    render(){


        let {text,time,done,id}=this.props.data;

        return (
           
               {time}

{text}

                
                    

                    

                   删除留言
                
           


        );
    }
}

export default LiuItem;

以上就是多有的代码，现在看看我们最终的结果

GPU云服务器云服务器 create-react-app java做的 php做的网站 php做的crm

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84469.html

create-react-app留言板

摘要：留言板搭建环境创建文件安装使用命令创建目录进入目录运行它会自动跳转到页面安装修改项目删除不需要的项目修改完以后的项目目录编写程序因为我们这里会用到，所以我们需要先下载一个样式库下载样式库官网网址直接在浏览器打 create-react-app留言板搭建环境创建package.json文件 npm init -y 安装create-react-app npm install -g c...

gplane 2019-08-20 18:25 评论0 收藏0
create-react-app留言板

摘要：留言板搭建环境创建文件安装使用命令创建目录进入目录运行它会自动跳转到页面安装修改项目删除不需要的项目修改完以后的项目目录编写程序因为我们这里会用到，所以我们需要先下载一个样式库下载样式库官网网址直接在浏览器打 create-react-app留言板搭建环境创建package.json文件 npm init -y 安装create-react-app npm install -g c...

shuibo 2019-08-01 17:15 评论0 收藏0
从零开始开发一个react脚手架（五）

摘要：关于和，其实单纯问两者的区别，大家都知道，一个是开发依赖，一个是线上依赖。因为一开始的开发不规范，导致我随意乱装。。一个包可以再大点。脚手架已经实现了三分之一，现在是直接来作为脚手架，到最后效果应该是的形式，不过命令内容已经实现和。前言：最近天天加班做新项目，Taro版的小程序，还要实现富文本加海报，踩了不少坑，下次专门开个坑说一下。回到脚手架，说实话从头写一个，即便是参考crea...

gekylin 2019-08-23 17:15 评论0 收藏0
React-APP结合webpack搭建项目

摘要：搭建项目有三种安装的方式，想了解的登录官网查看，今天介绍的一个自动安装的不需要怎么配置环境，自动生成的方式，类似于并实现一个小案例，留言功能官网的安装教程安装依次安装最终启动自后会出现一个页面大家可以去试试下边我们配置一 React-APP搭建项目 React有三种安装的方式，想了解的登录React官网查看，今天介绍的一个自动安装的不需要怎么配置环境，自动生成的方式，类似于vue-cl...

jayzou 2019-08-20 18:25 评论0 收藏0
create-react-app 源码学习（上）

摘要：这里通过调用方法方法主要是通过来通过命令执行下的方法。原文地址Nealyang/personalBlog 前言对于前端工程构建，很多公司、BU 都有自己的一套构建体系,比如我们正在使用的 def，或者 vue-cli 或者 create-react-app，由于笔者最近一直想搭建一个个人网站，秉持着呼吸不停，折腾不止的原则，编码的过程中，还是不想太过于枯燥。在 coding 之前...

MkkHou 2019-08-23 18:12 评论0 收藏0