create-react-app做的留言板

FWHeart 發布于2019-08-20 18:25 / 2391人閱讀

摘要：做的留言板先看一下我們的留言板，然后在去實現功能做留言板首先要配置好我們的文件，然后才能接著做我們的留言板快速開始安裝，建議使用使用命令創建應用，為項目名稱進入目錄，然后啟動接下來看看我們的代碼吧留言板留言板

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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