react組件的配置和搭建

時間 2019-11-07

標籤 react 組件配置搭建欄目 React 简体版

原文原文鏈接

做者：yewqhtml

h5.基於服務器的搭建node

第一步，安裝node
react初始化在建立項目的當前文件夾來打開控制檯，進行react初始化，npm init,此步驟會出現package.json的文件，用於加載依賴
安裝react,react-dom npm install react react-dom --save
安裝 babel-core、babel-loader、babel-preset-es201五、babel-preset-react npm install babel-core babel-loader babel-preset-es2015 babel-preset-react (安裝不成功的話就一個一個安裝)
安裝webpack-dev-server npm install webpack-dev-server --save-dev
在項目裏建立文件夾 dist,dist裏建立index.html(主頁面)
在項目裏建立文件夾 src,src裏建立index.js(至關於入口文件)
在項目裏建立文件 webpack.config.js
在填充完index.html webpack.config.js index.js內容以後，（index.js中的能夠先不用引入add.js,先把項目運行起來再加組件）;在控制檯打入npm start,報錯的話打入npm i -項目所在的磁盤符號 webpack，再執行npm start,若是報babel的錯，把loader: 'babel'改成loader: 'babel-loader'，若是報./dist/js/的錯，把路徑改成path: __dirname + "/dist/js"，而後就能夠運行了

h5.index.html的內容react

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
    <script>
    index();
    </script>
</body>
</html>

h5.webpack.config.js的內容webpack

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的內容web

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


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

}

h3. 製做一個小例子（react基本的基礎都包含在裏面）
h5. 搭建組件npm

在src裏建立components文件夾，建立文件 Add.js(必定要首字母大寫)TodoFooter.js TodoHeader.js TodoItem.js TodoMain.js
在index.js中加 import Add from './components/Add';

h5. Add.js中的代碼json

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
        };
    }

    // 判斷是否全部任務的狀態都完成，同步底部的全選框
    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,
        });
        
    }

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

    // 改變任務狀態，傳遞給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();
        }
    }
    // 清除已完成的任務，傳遞給Footer組件的方法
    clearDone(){
        let todos = this.state.todos.filter(todo => !todo.isDone);
        this.setState({
            todos: todos,
            isAllChecked: false
        });
    }

    // 刪除當前的任務，傳遞給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 (
            <div className="panel">    
                <TodoHeader addTodo={this.addTodo.bind(this)}/>
                <TodoMain deleteTodo={this.deleteTodo.bind(this)} todos={this.state.todos} changeTodoState={this.changeTodoState.bind(this)} isAllChecked = {this.state.isAllChecked}/>
                <TodoFooter isAllChecked={this.state.isAllChecked} clearDone={this.clearDone.bind(this)} {...props} changeTodoState={this.changeTodoState.bind(this)}/>
            </div>
        )
    }
}
export default Add;

h5. TodoHeader.js中的代碼服務器

import React from "react";

class TodoHeader extends React.Component {

    // 綁定鍵盤迴車事件，添加新任務
    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 (
            <div className="panel-header">
                <input onKeyUp={this.handlerKeyUp.bind(this)} type="text" placeholder="what's your task ?"/>
            </div>
        )
    }
}

export default TodoHeader;

h5. TodoFooter.js中的代碼babel

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

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

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

    render(){
        return (
            <div className="clearfix todo-footer">
                <input checked={this.props.isAllChecked} onChange={this.handlerAllState.bind(this)} type="checkbox" className="fl"/>
                <span className="fl">{this.props.todoDoneCount}已完成 / {this.props.todoCount}總數</span>
                <button onClick={this.handlerClick.bind(this)} className="fr">清除已完成</button>
            </div>
        )
    }
}

h5. TodoItem.js中的代碼app

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

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

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

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

    // 刪除當前任務
    handlerDelete(){
        this.props.deleteTodo(this.props.index);
    }

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

        return (
            <li
                onMouseOver={this.handlerMouseOver.bind(this)}
                onMouseOut={this.handlerMouseOut.bind(this)}
            >
                <input type="checkbox"  checked={this.props.isAllChecked} onChange={this.handlerChange.bind(this)}/>
                <span style={doneStyle}>{this.props.text}</span>
                <button style={{'display': 'none'}} ref="deleteBtn" onClick={this.handlerDelete.bind(this)}  className="fr">刪除</button>
            </li>
        )
    }
}

h5. TodoMain.js中的代碼

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

export default class TodoMain extends React.Component{
    // 遍歷顯示任務，轉發props
    render(){
        return (
            <ul className="todo-list">
                {this.props.todos.map((todo, index) => {
                    return <TodoItem key={index} {...todo} index={index} {...this.props}/>
                })}
            </ul>
        )
    }