react组件的配置和搭建

摘要：作者基于服务器的搭建第一步，安装初始化在创建项目的当前文件夹来打开控制台，进行初始化，此步骤会出现的文件，用于加载依赖安装安装安装不成功的话就一个一个安装安装在项目里创建文件夹里创建主页面在项目

作者：yewq

h5.基于服务器的搭建

第一步，安装node

react初始化 在创建项目的当前文件夹来打开控制台，进行react初始化，npm init,此步骤会出现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 (安装不成功的话就一个一个安装)

安装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的内容

h5.webpack.config.js的内容

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的内容

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. 制作一个小例子（react基本的基础都包含在里面）
h5. 搭建组件

在src里创建components文件夹，创建文件 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
        };
    }

    // 判断是否所有任务的状态都完成，同步底部的全选框
    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 (
            
    
                
                
                
            
        )
    }
}
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 (
            

                
            
        )
    }
}

export default TodoHeader;

h5. TodoFooter.js中的代码

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 (
            

                
                {this.props.todoDoneCount}已完成 / {this.props.todoCount}总数
                清除已完成
            
        )
    }
}

h5. TodoItem.js中的代码

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 (
            

                
                {this.props.text}
                删除
            
        )
    }
}

h5. TodoMain.js中的代码

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

export default class TodoMain extends React.Component{
    // 遍历显示任务，转发props
    render(){
        return (
            

                {this.props.todos.map((todo, index) => {
                    return 
                })}
            
        )
    }