手把手教你全家桶之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 基本配置
  1. color : 打印日志为彩色
  2. progress : 日志显示进度
  3. historyApiFallback : 值为Boolean,设为true时,作意404的请求路径,会指向index.html
  4. host : 默认为loaclhost,可以设为IP地址,局域网内用其它设备IP访问
  5. port : 端口号,默认为8080
  6. proxy : 代理,比如后端交互的服务器地址为localhost:9000,设置如下
    proxy:{
        "/api":"htpp://localhost:9000"
    }

未完待续 ^_^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏冰霜之地

初探 Go 的编译命令执行过程

Go 语言这两年在语言排行榜上的上升势头非常猛,Go 语言虽然是静态编译型语言,但是它却拥有脚本化的语法,支持多种编程范式(函数式和面向对象)。Go 语言最最吸...

763
来自专栏西安-晁州

nodejs图片上传

node中图片上传的中间键很多,比如formidable等,这里我们使用nodejs中的fs来实现文件上传处理: 1、安装中间键connect-multipar...

2370
来自专栏信安之路

Android组件安全

组件是一个Android程序至关重要的构建模块。Android有四种不同的应用程序组件:Activity、Service、Content Provider和Br...

852
来自专栏阮一峰的网络日志

Systemd 入门教程:命令篇

Systemd 是 Linux 系统工具,用来启动守护进程,已成为大多数发行版的标准配置。 本文介绍它的基本用法,分为上下两篇。今天介绍它的主要命令,下一篇介绍...

3356
来自专栏前端吧啦吧啦

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

4229
来自专栏JMCui

Linux 学习记录 一(安装、基本文件操作).

Linux distributions主要分为两大系统,一种是RPM方式安装软件的系统,包括Red Hat,Fedora,SuSE等都是这类;一种则是使用De...

2928
来自专栏静默虚空的博客

Tomcat 快速入门

Tomcat 快速入门 版本说明 本文使用 Tomcat 版本为 Tomcat 8.5.24。 Tomcat 8.5 要求 JDK 版本为 1.7 以上。...

3135
来自专栏云计算教程系列

如何用Molecule测试Ansible角色

Ansible中的单元测试是确保角色按预期运行的关键。通过允许您指定针对不同环境测试角色的方案,Molecule使此过程更容易。使用Ansible,Molecu...

1544
来自专栏小白安全

FreeBuf官网发布《简易Python Selenium爬虫实现歌曲免费下载》

主要思路就是爬取播放页里的播放源文件的url,程序可以读取用户输入并返回歌单,,,因为在线网站包含大量js,requests就显得很无奈,又懒得手动解析js...

3235
来自专栏HansBug's Lab

【vagrant】硬盘扩容

vagrant的好处自然不必说,只是有一天遇到了一个麻烦事——虚拟硬盘空间不!够!了!

893

扫码关注云+社区