react組件的配置和搭建

davidac 發(fā)布于2019-08-22 11:23 / 2496人閱讀

摘要：作者基于服務(wù)器的搭建第一步，安裝初始化在創(chuàng)建項(xiàng)目的當(dāng)前文件夾來打開控制臺(tái)，進(jìn)行初始化，此步驟會(huì)出現(xiàn)的文件，用于加載依賴安裝安裝安裝不成功的話就一個(gè)一個(gè)安裝安裝在項(xiàng)目里創(chuàng)建文件夾里創(chuàng)建主頁面在項(xiàng)目

作者：yewq

h5.基于服務(wù)器的搭建

第一步，安裝node

react初始化在創(chuàng)建項(xiàng)目的當(dāng)前文件夾來打開控制臺(tái)，進(jìn)行react初始化，npm init,此步驟會(huì)出現(xiàn)package.json的文件，用于加載依賴

安裝react,react-dom npm install react react-dom --save

安裝 babel-core、babel-loader、babel-preset-es2015、babel-preset-react npm install babel-core babel-loader babel-preset-es2015 babel-preset-react (安裝不成功的話就一個(gè)一個(gè)安裝)

安裝webpack-dev-server npm install webpack-dev-server --save-dev

在項(xiàng)目里創(chuàng)建文件夾 dist,dist里創(chuàng)建index.html(主頁面)

在項(xiàng)目里創(chuàng)建文件夾 src,src里創(chuàng)建index.js(相當(dāng)于入口文件)

在項(xiàng)目里創(chuàng)建文件 webpack.config.js

在填充完index.html webpack.config.js index.js內(nèi)容之后，（index.js中的可以先不用引入add.js,先把項(xiàng)目運(yùn)行起來再加組件）;在控制臺(tái)打入npm start,報(bào)錯(cuò)的話打入npm i -項(xiàng)目所在的磁盤符號(hào) webpack，再執(zhí)行npm start,如果報(bào)babel的錯(cuò)，把loader: "babel"改為loader: "babel-loader"，如果報(bào)./dist/js/的錯(cuò)，把路徑改為path: __dirname + "/dist/js"，然后就可以運(yùn)行了

h5.index.html的內(nèi)容




    
    Title

h5.webpack.config.js的內(nèi)容

module.exports = {
    entry:"./src/index.js",
    output:{
        path: __dirname + "/dist/js",
        filename:"bundle.js"
    },
    devServer:{
        inline:true,
        contentBase:"./dist",
        port:4040
    },
    module:{
        loaders:[
            {
                test:/.js$/,
                exclude:/node_modules/,
                loader: "babel-loader",
                query:{
                    presets:["es2015","react"],
                }
            }
        ]
    }
};

h5.index.js的內(nèi)容

import React from "react";
import ReactDOM from "react-dom";
// import Add from "./components/Add";


// ReactDOM.render(
    
//     document.getElementById("app")
// );
window.index=()=>{
    ReactDOM.render(,document.getElementById("app"));

}

h3. 制作一個(gè)小例子（react基本的基礎(chǔ)都包含在里面）
h5. 搭建組件

在src里創(chuàng)建components文件夾，創(chuàng)建文件 Add.js(一定要首字母大寫)TodoFooter.js TodoHeader.js TodoItem.js TodoMain.js

在index.js中加 import Add from "./components/Add";

h5. Add.js中的代碼

import React from "react";
// import LocalDb from "localDb";

import TodoHeader from "./TodoHeader.js";
import TodoMain from "./TodoMain.js";
import TodoFooter from "./TodoFooter.js";

class Add extends React.Component {
    constructor(){
        super();
        // this.db = new LocalDb("React-Todos");
        this.state = {
            todos: [
                {
                    text: "地下城堡",
                    isDone: false
                },
                {
                    text: "問道",
                    isDone: false
                },
                 {
                    text:"不思議",
                    isDone: false
                }
                ],

            isAllChecked: false
        };
    }

    // 判斷是否所有任務(wù)的狀態(tài)都完成，同步底部的全選框
    allChecked(){
        let isAllChecked = false;
        if(this.state.todos.every((todo)=> todo.isDone)){
            isAllChecked = true;
            this.setState({
                todos: this.state.todos,
                isAllChecked:true
            });
        }else{
            this.setState({
                todos: this.state.todos,
                isAllChecked:false
            });
        }
        this.setState({
            todos: this.state.todos,
        });
        
    }

    // 添加任務(wù)，是傳遞給Header組件的方法
    addTodo(todoItem){
        this.state.todos.push(todoItem);
        this.allChecked();
    }

    // 改變?nèi)蝿?wù)狀態(tài)，傳遞給TodoItem和Footer組件的方法
    changeTodoState(index, isDone, isChangeAll = false){
        if(isChangeAll){
            this.setState({
                todos: this.state.todos.map((todo) => {
                    todo.isDone = isDone;
                    return todo;
                }),
                isAllChecked:isDone
            })
            this.allChecked();
        }else{
            this.state.todos[index].isDone = isDone;
            this.allChecked();
        }
    }
    // 清除已完成的任務(wù)，傳遞給Footer組件的方法
    clearDone(){
        let todos = this.state.todos.filter(todo => !todo.isDone);
        this.setState({
            todos: todos,
            isAllChecked: false
        });
    }

    // 刪除當(dāng)前的任務(wù)，傳遞給TodoItem的方法
    deleteTodo(index){
        this.state.todos.splice(index, 1);
        this.setState({
            todos: this.state.todos
        });
    }
    render(){
        var props = {
            todoCount: this.state.todos.length || 0,
            todoDoneCount: (this.state.todos && this.state.todos.filter((todo)=>todo.isDone)).length || 0
        };
        return (
                
                
                
                
            
        )
    }
}
export default Add;

h5. TodoHeader.js中的代碼

import React from "react";

class TodoHeader extends React.Component {

    // 綁定鍵盤回車事件，添加新任務(wù)
    handlerKeyUp(event){
        if(event.keyCode === 13){
            let value = event.target.value;

            if(!value) return false;

            let newTodoItem = {
                text: value,
                isDone: false
            };
            event.target.value = "";
            this.props.addTodo(newTodoItem);
        }
    }
    render(){
        return (
            
                
            
        )
    }
}

export default TodoHeader;

h5. TodoFooter.js中的代碼

import React from "react";
export default class TodoFooter extends React.Component{

    // 處理全選與全不選的狀態(tài)
    handlerAllState(event){
        this.props.changeTodoState(null, event.target.checked, true);
    }

    // 綁定點(diǎn)擊事件，清除已完成
    handlerClick(){
        this.props.clearDone();
    }

    render(){
        return (
            
                
                {this.props.todoDoneCount}已完成 / {this.props.todoCount}總數(shù)
                
            
        )
    }
}

h5. TodoItem.js中的代碼

import React from "react";
export default class TodoItem extends React.Component{

    // 處理任務(wù)是否完成狀態(tài)
    handlerChange(){
        let isDone = !this.props.isDone;
        this.props.changeTodoState(this.props.index, isDone);
    }

    // 鼠標(biāo)移入
    handlerMouseOver(){
        this.refs.deleteBtn.style.display = "inline";
    }

    // 鼠標(biāo)移出
    handlerMouseOut(){
        this.refs.deleteBtn.style.display = "none";
    }

    // 刪除當(dāng)前任務(wù)
    handlerDelete(){
        this.props.deleteTodo(this.props.index);
    }

    render(){
        let doneStyle = this.props.isDone ? {textDecoration: "line-through"} : {textDecoration: "none"};

        return (
            
                
                {this.props.text}
                
            
        )
    }
}

h5. TodoMain.js中的代碼

import React from "react";
import TodoItem from "./TodoItem.js"

export default class TodoMain extends React.Component{
    // 遍歷顯示任務(wù)，轉(zhuǎn)發(fā)props
    render(){
        return (
            
                {this.props.todos.map((todo, index) => {
                    return 
                })}
            
        )
    }