资讯专栏INFORMATION COLUMN

React结合Bootstrap的使用

Zack / 3117人阅读

摘要:结合的使用大家应该都不陌生吧,它是一套用于和的框架,这里,我们要使用它里面的一套样式框架搭建环境首先我们需要去官网下载一个库官网网址直接在浏览器打开就可以,打开以后会出现以下页面,点击第一个,下载就可以然后安装插件在命令行里输入

React结合Bootstrap的使用

Bootstrap大家应该都不陌生吧,它是一套用于HTML、CSS 和JS的框架,这里,我们要使用它里面的一套样式框架;

搭建环境

首先我们需要去官网下载一个Bootstrap库

官网网址:
http://v3.bootcss.com/getting-started/#download
直接在浏览器打开就可以,打开以后会出现以下页面,点击第一个,下载Bootstrap就可以;

然后安装Bootstrap插件

在命令行里输入
npm install file-loader url url-loader --save-dev

配置webpack.config.js文件

module.exports = {
  entry: "./index.js",
  output: {
      path:path.resolve(__dirname,"build"),
      publicPath:"/assets/",
    filename: "bundle.js"
  },
  module: {
      rules: [
    { test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
    { test: /.css$/, exclude: /node_modules/, loader: "style-loader!css-loader" },
    { test: /.eot(?v=d+.d+.d+)?$/, loader: "file-loader" },  //添加
    { test: /.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000" }, //添加
    { test: /.ttf(?v=d+.d+.d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" }, //添加
    { test: /.svg(?v=d+.d+.d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" } //添加
      ]
    } 
}    

这样我们的环境就搭建完成了;

一个简单的小例子

我做了一个用React和Bootstarp的一个例子,一个提交的表格,下面我来给大家详细的介绍一下:

创建一个index.html,用来显示效果



    
        
        React3
    
    
        

创建ToDoapp.js文件,它将作为一个最大的模块来包三个模块

import React模块 from "react";  //导入React模块

import ToDoList from "./ToDoList";  //导入ToDoList模块
import ToDoForm from "./ToDoForm"; //导入ToDoForm模块

class ToDoapp 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);
    this.okItem=this.okItem.bind(this);
    }
  okItem(id){
    this.state.todos.map(item=>{
        if(item.id==id){
            item.done=1;
        }
            return item;
        });
        this.setState({
            todos:this.state.todos
        });
    }
    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 (
            



ToDo你要做什么?


); } } export default ToDoapp; //导出ToDoapp模块

创建ToDoList.js文件

import React from "react";

import ToDoItem from "./ToDoItem";  //导入ToDoItem模块
class ToDoList extends React.Component{
    render(){
        let todos=this.props.data;
        let todoItems=todos.map(item=>{
            return 
        });

        return (
            
                    {todoItems}
                
内容 时间 状态 操作
); } } export default ToDoList; //导出ToDoList模块

创建ToDoItem.js文件

import React from "react";

class ToDoItem extends React.Component{
    delete(){
        this.props.deleteItem(this.props.data.id);
    }
    complete(){
        this.props.okItem(this.props.data.id);
    }
    render(){

        let {text,time,done,id}=this.props.data;

        return (
           
               {text}
               {time}
               {done==0?"未完成":"完成"}
               
                   删除
                   
                     
                            完成
                   
                
           
        );
    }
}

export default ToDoItem;  //导出ToDoItem模块

创建ToDoForm.js文件

import React from "react";

class ToDoForm 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 ToDoForm; //导出ToDoForm模块

这里我们能用到了栅格化布局;

接下来就让我们来看一下效果吧:

效果:添加的时候可以显示当前时间,安回车键就可以直接添加,点击完成可以把未完成改成完成,点击删除可以删除内容;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84400.html

相关文章

  • React结合Bootstrap使用

    摘要:结合的使用大家应该都不陌生吧,它是一套用于和的框架,这里,我们要使用它里面的一套样式框架搭建环境首先我们需要去官网下载一个库官网网址直接在浏览器打开就可以,打开以后会出现以下页面,点击第一个,下载就可以然后安装插件在命令行里输入 React结合Bootstrap的使用 Bootstrap大家应该都不陌生吧,它是一套用于HTML、CSS 和JS的框架,这里,我们要使用它里面的一套样式框架...

    oneasp 评论0 收藏0
  • React结合webpack案例——表格记事

    摘要:结合实现表格记事官网有一个案例,实现表格的添加,我做一个比他复杂一点,结合的案例。 React结合webpack实现表格记事 React官网有一个案例,实现表格的添加,我做一个比他复杂一点,结合bootstrap的案例。分享给大家! showImg(https://segmentfault.com/img/bVRJSh?w=745&h=416); 首先下载loader插件 npm fi...

    ccj659 评论0 收藏0
  • NiceFish-React

    摘要:大漠穷秋于赠此笔名。是版本的实现,和版本保持风格一致。码云最有价值的开源项目这是版的实现,和版本保持风格一致。采用版本,使用组件库以及开发。已推荐这是的服务端代码,基于。如果你需要与这个后端代码进行对接,请检出本项目的分支。 你好,我是徐晓东,笔名燕云长风。大漠穷秋于 2019-03-16 21:22 赠此笔名。 寓意:结合李白著名的边塞诗《关山月》取【燕云长风】—— 长风几万里,吹...

    Terry_Tai 评论0 收藏0
  • React-APP结合webpack搭建项目

    摘要:搭建项目有三种安装的方式,想了解的登录官网查看,今天介绍的一个自动安装的不需要怎么配置环境,自动生成的方式,类似于并实现一个小案例,留言功能官网的安装教程安装依次安装最终启动自后会出现一个页面大家可以去试试下边我们配置一 React-APP搭建项目 React有三种安装的方式,想了解的登录React官网查看,今天介绍的一个自动安装的不需要怎么配置环境,自动生成的方式,类似于vue-cl...

    jayzou 评论0 收藏0
  • 你要 React 面试知识点,都在这了

    摘要:是流行的框架之一,在年及以后将会更加流行。于年首次发布,多年来广受欢迎。下面是另一个名为的高阶函数示例,该函数接受另外两个函数,分别是和。将所有较小的函数组合成更大的函数,最终,得到一个应用程序,这称为组合。 React是流行的javascript框架之一,在2019年及以后将会更加流行。React于2013年首次发布,多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高...

    klinson 评论0 收藏0

发表评论

0条评论

Zack

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<