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