手把手教你全家桶之React(一)

前言

最近项目用到react,其实前年我就开始接触react，时光匆匆，一直没有时间整理下来（太懒啦）！如今再次用到，称工作间隙，对全家桶做一次总结，项目源码地址。废话不多说，上码。

创建一个文件目录并初始化package.json

    mkdir react-Buckets

    npm init

填好相关信息如图

安装webpack

需要有全局安装哦，不然一会用webpack编译时会报错的
关于装依赖加入package.json时，加 --save-dev表示开发环境要用的依赖，如果加 -save表示生产环境依然要用的依赖。

    npm install --save-dev webpack

手动添加webpack配置文件

    touch webpack.dev.config.js

配置文件

    var path=require('path');

    module.exports={

        // 入口文件指向src/index.js

        entry:path.join(__dirname,'src/index.js'),

        //打包后的文件到当前目录下的dist文件夹，名为bundle.js

        output:{

            path:path.join(__dirname,'./dist'),

            filename:'bundle.js'

        }

    };

    mkdir src && cd src

    touch index.js

入口文件写点内容

    document.getElementById('app').innerHTML='This is my React!';

进行一个小测试

    webpack --config webpack.dev.config.js

效果如图

此时发现目录下生成了 dist/bundle.js
我们在dist目录下新建 index.html

    touch ./dist/index.html

编辑index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

    <script type="text/javascript" src="./bundle.js"></script>

</body>

</html>

在浏览器打开index.html

编译优化：我们每次编译都要输那么长串的命令太难记，我们在package.json中设置命令，简化它：

    "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1",

        "build":"webpack --config webpack.dev.config.js"

    },

运行的时候使用,此处要注意下webpack的版本，如果是4.0则会提示装webpack-cli模块

    npm run build

安装与配置babel

平时大家在项目中不管用的vue还是react,应该大多都开始用ES6或ES7的语法了吧。想必都了解如果想让浏览器可以直接识别，基本都会选用babel插件进行编译转换。下面为大家一一介绍：

babel-core 调用Babel的API进行转码使用
babel-loader 允许使用babel和webpack将文件转化成JavaScript
babel-preset-es2015 将ES6解析成ES5
babel-preset-react 解析JSX语法
babel-preset-stage-0 解析ES7提案

那么先统一安装下

    npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

安装好后，添加配置文件

    touch .babelrc

打开文件，对babel进行配置,注：此处stage-0是包含stage-1,stage-2,stage-3

    {

        "presets":[

            "es2015",

            "react",

            "stage-0"

        ],

        "plugins":[]

    }

在webpack配置中加入babel,修改webpack.dev.config.js

在配置babel-loader模块时，将cacheDirectory=true是为了缓存编译结果，优化下次编译的。

    modle:{

        rules:[{

            test:/\.js$/,

            use:['babel-loader?cacheDirectory=true'],

            include:path.join(__dirname,'src')

        }]

    }

配置好了后，对babel进行测试，修改src/index.js

//使用ES6的箭头函数

var babeltest=()=>

    console.log('This is Babel Test!');

babeltest();

安装与配置react

安装

    npm install --save react react-dom

页面中引入src/index.js

    import React from 'react';

    import ReactDom from 'react-dom';

    ReactDom.render(

        <div>First React!</div>,

        document.getElementById('app')

    )

自定义一个组件,建好目录，我们把组件放入src/components中

    cd src

    mkdir components && cd components

    mkdir Hello && cd Hello

    touch Hello.js

进入Hello.js

import React, {Component} from 'react';

export default class Hello extends Component{

    render(){

        return(

            <div>Hello React!</div>

        )

    }

}

引用Hello.js,进入src/index.js

    import React from 'react';

    import ReactDom from 'react-dom';

    import Hello from './components/Hello/Hello';

    ReactDom.render(

        <Hello/>,

        document.getElementById('app');

    )

路由配置react-router

    npm install --save react-router-dom

    cd src

    mkdir router && touch router/router.js

打开router.js,配置home和about页面

    import React from 'react';

    import {BrowserRoter as Router,Route,Swith,Link} from 'react-router-dom';

    import Home from '../pages/Home/Home';

    import Page1 from '../pages/About/About';

    const getRouter=()=>(

        <Router>

            <div>

                <ul>

                    <li><Link to="/">首页</Link></li>

                    <li><Link to="/about">About</Link></li>

                </ul>

                <Switch>

                    <Route exact path="/" componen={Home} />

                    <Route path="/about" component={About}/>

                </Switch>

            </div>

        </Router>

    );

    export default getRouter;

cd src

mkdir pages && cd pages

mkdir Home && touch Home/Home.js

mkdet About && touch About/About.js

打开Home.js,定义内容

    import React,{Component} from 'react';

    export default class Home extends Component{

        render(){

            return(

                <div>

                    <h1>欢迎来到我的网站</h1>

                    <p>这是一个首页</p>

                </div>

            )

        }

}

打开About.js,定义内容

    import React,{Component} from 'react';

    export default class About extends Component{

        render(){

            return(

                <div>

                    <h2>关于我们</h2>

                    <p>自定义react全家桶</p>

                </div>

            )

        }

    }

在入口文件src/index.js，引入Router

    import React from 'react';

    import ReactDom from 'react-dom';

    import getRouter from './router/router';

    ReactDom.render(

        getRouter(),

        document.getElementById('app')

    )

编译下，效果如图

    npm run build

我们发现页面是出来了，但是点击切换不了路由，原因是因为我们需要配置一个web服务器来指向index.html，在这里我们来配置一个webpack-dev-server。

web服务器配置 webpack-dev-server

webpack-dev-server是我们做前后端分离时，常会用到的依赖，它是一个小型的静态文件服务器，可以为webpack打包后生成的文件提供web服务器功能。

安装,这个和webpack一样，要有全局安装才行。

    npm install webpack-dev-server@2 --save-dev

修改配置文件webpack.dev.config.js

    devServer:{

        //将服务器根目录指向打包后的dist文件，默认是指向项目的根目录

        contentBase:path.join(__dirname,'./dist');

    }

测试

    webpack-dev-server --config webpack.dev.config.js

打开http://localhost:8080

8080是默认端口，可更改配置。同样，我们把编译命令优化下：

    "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1",

        "build": "webpack --config webpack.dev.config.js",

        "start": "webpack-dev-server --config webpack.dev.config.js --color --progress"

    },

小贴示：可以试试打开浏览器后，去删除dist/bundle.js哦，是不是页面依然可以打开呢，因为webpack-dev-server编译后会缓存在内存中！

附webpack-dev-server 基本配置

color : 打印日志为彩色
progress : 日志显示进度
historyApiFallback : 值为Boolean，设为true时，作意404的请求路径，会指向index.html
host : 默认为loaclhost，可以设为IP地址，局域网内用其它设备IP访问
port : 端口号，默认为8080
proxy : 代理，比如后端交互的服务器地址为localhost:9000,设置如下

    proxy:{

        "/api":"htpp://localhost:9000"

    }

未完待续 ^_

手把手教你全家桶之React(一)的更多相关文章

手把手教你全家桶之React(二)
前言上一篇已经讲了一些react的基本配置,本遍接着讲热更新以及react+redux的配置与使用. 热更新我们在实际开发时,都有用到热更新,在修改代码后,不用每次都重启服务,而是自动更新.并而不 ...
手把手教你全家桶之React(三)--完结篇
前言本篇主要是讲一些全家桶的优化与完善,基础功能上一篇已经讲得差不多了.直接开始: Source Maps 当javaScript抛出异常时,我们会很想知道它发生在哪个文件的哪一行.但是webpac ...
手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
vue全家桶和react全家桶
vue全家桶:vue + vuex (状态管理) + vue-router (路由) + vue-resource +axios +elementui react全家桶 : react + re ...
手把手教你用JS/Vue/React实现幸运水果机（80后情怀之作）
项目体验地址免费视频教程分别使用原生JS,Vue和React,手把手教你开发一个H5小游戏,快速上手Vue和React框架的使用. 项目截图在线体验在线体验游戏介绍幸运水果机是一款街机游戏 ...
手把手教你如何使用webpack+react
上一篇随笔讲述了新手入门入门前端里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的 ...
使用react全家桶制作博客后台管理系统
前面的话笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统概述该项目是基于react全家桶(React.React-r ...
使用react全家桶制作博客后台管理系统网站PWA升级移动端常见问题处理循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统前面的话笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统概述该项目是基 ...
手把手教你webpack、react和node.js环境配置（上篇）
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

随机推荐

赛码网算法：军训队列( python实现 )
军训队列题目描述某大学开学进行军训队列训练,将学生从一开始按顺序依次编号,并排成一行横队,训练的规则如下:从头开始一至二报数,凡报到二的出列剩下的依次向前靠拢,再从头开始进行一至三报数,凡报到三的出 ...
Python之匿名函数
匿名函数匿名函数:为了解决那些功能很简单的需求而设计的一句话函数. #这段代码 def calc(n): return n**n print(calc(10)) #换成匿名函数 calc = lam ...
简单了解Spring的控制反转和依赖注入
浅谈控制反转(Inversion of Control,IOC) 我们首先先来了解一下控制二字,也就是在控制"正"转的情况下,在任何一个有请求作用的系统当中,至少需要有两个类互相配 ...
基于Verilog HDL的超前进位全加器设计
通常我们所使用的加法器一般是串行进位,将从输入的ci逐位进位地传递到最高位的进位输出co,由于电路是有延迟的,这样的长途旅行是需要时间的,所以为了加快加法器的运算,引入了超前进位全加器. 全加器的两个 ...
apache修改最大连接数报错
报错的内容: AH00180: WARNING: MaxRequestWorkers of 2500 exceeds ServerLimit value of 256 servers, decreas ...
POJ-1861 Network---最小生成树
题目链接: https://vjudge.net/problem/POJ-1861 题目大意: 有一些公司,公司之间需要连接起来.给出了哪些公司可以连接以及连接边的长度.求最小生成树中最大的边,以及最 ...
Canvas-自由绘制
#自由绘制 from tkinter import * master=Tk() c=Canvas(master,width=400,height=200) c.pack() def paint(eve ...
The first week CorelDRAW 课总结：
1.这节课学到了什么知识? 答:(1)认识了CorelDRAW X4的工作界面(由标题栏菜单栏工具栏属性栏工具箱页面控制栏状态栏绘图区和调色板组成): (2)CorelDRAW X4的基 ...
申请安装阿里云免费SSL证书
微信小程序已经全面要求使用HTTPS服务了,还有苹果商店也是,所以,实现网站HTTPS已经很有必要.要实现HTTPS就需要一个SSL证书,证书大部分都很贵,不过也有一些免费的证书服务供个人开发者使用. ...
BZOJ 4551[Tjoi2016&Heoi2016]树(树链剖分+二分)
Description 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记 ...