10月22, 2017

React项目构建和路由 免费视频教程 (共10集)

文章前言:

这套课程不是从零开始的,你需要React基础知识,在我的博客中是有写的,我会在前言最后给出链接。因为我还是一线奋战的程序员,也经常加班,所以更新不会很快,但只少会保证一周三集的更新,本教材包括视频都可以在我的博客(jspang.com)免费观看。

说明:因为学识和见识有限,文章中难免会有错误,还请大家指正,技术胖俯首拜谢。

博客采用图文教程+视频教程的形式:你可以先看视频,然后在使用时查询这篇文章,作为备忘笔记使用。文章中会讲解到一下内容:

  • React环境构建:讲解用工具构建和webapck自行构建两种方法进行。
  • React路由:大概4-5节课,全面讲解react路由的知识。

学习教程前需要一定的React和webpack基础知识,可以学习下面这三篇文章:

  • 《React免费视频教程-入门和组件》
  • 《React免费视频教程-表单的应用》
  • 《webpack3.x版 成神之路》

第01节:构建:create-react-app 快速脚手架

很高兴又跟大家见面了,其实react项目的搭建在实际工作中是很简单的,因为FaceBook官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具create-react-app。

我们可以直接访问它的官网:https://github.com/facebookincubator/create-react-app

creat-react-app优点

  • 无需配置:官方的配置堪称完美,几乎不用你再配置任何东西,就可以上手开发项目。
  • 高集成性:集成了对React,JSX,ES6和Flow的支持。
  • 自带服务:集成了开发服务器,你可以实现开发预览一体化。
  • 热更新:保存自动更新,让你的开发更简单。
  • 全兼容性:自动处理CSS的兼容问题,无需添加-webkit前缀。
  • 自动发布:集成好了发布成品功能,编译后直接发布,并且包含了sourcemaps功能。

create-react-app的安装

安装需要在命令行中进行,在安装create-react-app前,你需要安装node。然后在命令行中输入下面的命令:

windows系统下:

npm install -g create-react-app

Liunx和Mac电脑下:

sudo npm install -g create-react-app

这里的 -g 是全局安装的意思。

创建React项目

我们安装好create-react-app之后,就可以创建我们的React目录了,命令如下:

create-react-app my-app

这里是有个小坑的,就是你的目录名不要使用大写,这样作只要是为了严谨性,因为在Linux下是严格区分大小写的。

启动服务

直接在命令行中输入:

npm start

总结:在实际开发中,你使用脚手架就是这么简单,并没有什么门槛。让我们在快速搭建开发环境,上手项目。所以说React的生态还是很庞大和完美的。记住:听懂不等于学会,一定要动手作一作。

第02节:构建:generator-react-webpack

react的生态圈非常庞大,第三方的构建工具也有很多种,这节课介绍一个在业内比较流行的构建工具generator-react-webpack,它是需要yeoman的支持的。

优点介绍:

  • 基于webpack构建,可以很容易的配置自己需要的webpack。
  • 支持ES6,集成了Babel-Loader。
  • 支持不同风格的CSS(sass,less,stylus)。
  • 支持PostCSS转换样式。
  • 集成了esLint功能。
  • 可以轻松配置单元测试,比如Karma和Mocha

安装

安装还是在命令行用npm进行安装,不过在全局安装generator-react-webpack之前,你可以先安装yeoman。命令如下:

npm install -g yo
npm install -g generator-react-webpack

创建目录

我们先用命令自行创建一个文件:new-react-demo

mkdir new-react-demo

进入这个文件夹

cd new-react-demo

用生成器生成我们的项目目录

yo react-webpack

用npm start就可以查看效果了。

我们在视频中还讲解了目录结构,让你更好的掌握generator-react-webpack.

总结:generator-react-webpack更容易配置webpack,让你适应你的实际项目,并且有很强的扩展功能。一般我们团队都会使用这个脚手架来生产react的目录结构,但也有缺点,就是要依靠yeoman来生成。

第03节:构建:webpack一步一步构建01

如果你对webpack很精通,完全可以自己随心所欲的用webpack自己构建一个React的开发环境,这节从头开始自己构建一个简单的React开发环境。学习这节课前,你要会基本的webpack的开发。

安装webpack

在安装webpack之前,我们先建立一个文件夹并进入,当然你可以用其他方法,我这里就用命令了。

mkdir react-webpack
cd react-webpack

进入文件夹后对我们的webpack项目进行初始化,命令如下:

npm n init

初始化成功后可以在项目根目录下看到package.json文件。如果你一路按回车感觉有些麻烦,你可以直接加一个-y参数,这样npm就直接给我们生成了。

npm n init -y

package.json文件建立好以后,你可以安装webpack了

npm install --save-dev webpack

建议使用cnpm来进行安装,这样速度会快很多。安装好后,你会在package.json里看到你安装的版本号。这样我们webpack就安装好了。

配置webpack.config.js

在项目根目录建立webpack.config.js文件,这个文件是进行webpack配置的,先建立基本的入口和出口文件。

var path =require('path');
module.exports = {
    //入口文件
    entry:'./app/index.js',
    //出口文件
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    }
}

上边的代码只定义了入口文件和出口文件,如果你对这些还看不懂,那请学习我的《webpack3.x版 成神之路》 。文件配置好后,我们要根据文件的结构改造我们的项目目录,我们在根目录下新建app和dist文件夹,然后进入app文件夹,新建一个index.js文件。

新建index.html文件

在根目录新建index.html文件,并引入webpack设置中的出口文件,代码如下。

<!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>React全家桶-jspang</title>
</head>
<body>

</body>
<!--引入出口文件-->
<script src="./dist/index.js"></script>
</html>

测试webpack配置

通过上面的步骤,配置好了wbpack,现在可以测试一下我们webpack配置是否有问题。在路口文件中写入下面的代码,并进行打包测试。

/app/index.js文件

function component(){
    var element = document.createElement('div');
    element.innerHTML = ('Hello JSPang');
    return element;
}

document.body.appendChild(component());

这段代码非常简单,不作过多的解释。如果你对这个代码看不懂,再去啃两边犀牛或者红宝书。

加入打包命令

打开package.json文件,在scripts属性中加入build命令。

"scripts": {
    "build": "webpack"
  },

在终端中输入npm run build ,就可以看到打包结果了。如果没有出现错误,在浏览器中打开,可以看到我们的编写结果。到这部为止,我们正确安装了webpack,并进行了出入口的配置,也看到了webpack的输出结果。

开发服务器配置

你会很容易的发现,我们现在缺少一个实时更新的服务,那动手马上配置一个。

在命令行安装webpack-dev-server,在终端中输入下面的命令。

cnpm install --save-dev webpack-dev-server

安装完成后,配置webpack.config.js文件。

devServer:{
    contentBase:'./',
    host:'localhost',
    compress:true,
    port:1717
}

配置好后再packeage.json里增加一个scripts命令,我们起名叫server。

"scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open"
  },

这里的–open是直接打开浏览器的意思。这些都配置完成后,就可以在终端输入npm run server 看到结果了。

自动刷新浏览器

在我们修改代码时,现在并不能自动刷新浏览器,不会立即呈现我们编写的代码结果,而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。

output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'temp/'
},

index.html文件引入JS

<script src="./temp/index.js"></script>

总结:这节课主要是先设置好webpack的基本配置,这些配置其实在以前的课程中都已经讲过,但是我们还是需要重新配置一遍,因为如果你不配置,你下面的课程将没办法继续操作。

第04节:构建:webpack一步一步构建02

节已经对webpack进行了基本配置,而且已经能打包到页面中了,这节主要针对我们的ES6和React进行配置。在学习之前,请保证你上节课的内容已经配置完成,如果你没有配置完成,这节课将不能继续下去。

Babel安装配置

在webpack中配置Babel需要先加入babel-loader,这里我们继续使用npm来进行安装,但是我们一般还需要支持es2015和React,所以要安装四个包。

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

这里安装四个包的安装,这个四个包不能省略。安装后你会在package.json里看到这些包的版本。

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "webpack": "^3.8.1",
  "webpack-dev-server": "^2.9.3"
}

配置module

在安装完成后,可以到webpack.config.js里配置module,也就是配置我们常说的loader。

module:{
    loaders:[
        {
            test:/\.js$/,
            exclude:/node_modules/,
            loaders:"babel-loader",
            query:{
                presets:['es2015','react']
            }
        }
    ]
}

具体每项参数的作用,请观看视频讲解,这里不作过多介绍。

编写React

webpack通过上边的步骤,基本已经配置完成了,这里我们写一个React文件来进行测试一下。在进行编写React文件前,要记得安装React和React-dom这两个包。

安装React和React-dom

cnpm install --save react  react-dom

安装完成后,我们改写app/index.js文件,把原来原生的JavaScript代码改成React代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>Hello JSPang</div>,
    document.getElementById("app")
);

因为上边我们加了一个app的选择器,所以在index.html中增加一个div标签,并把id设置成app。

index.html

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

都配置完了,我们可以用之前配置好的npm run server 命令进行预览了。如果在浏览器中看到了Hello JSPang 这段文字,说明我们的配置成功了,以后就可以愉快的进行开发了。

总结:其实自己配置React开发环境在实际工作中也并不多,因为我们的配置毕竟不是很成熟,而且支持较少。这里学习只是为了你更好的掌握React构建过程和设置参数,实际工作中尽量使用合适的脚手架工具。

第05节:路由:Hello React路由

通过四节课的学习,相信你已经可以顺利构建React的基本开发环境了,这节课开始我们将用几节课时间,全面了解一下React Router。路由在开发中时刻都会用到,它是SPA(单页应用)的基础,可以说不会路由系统基本就无法用React进行编程。其实路由可以简单的看作我们平时访问的网址或者路径,这样看有助于你的理解,但是并不正确。

Router包安装:

安装包还是要打开命令行工具,使用npm来进行安装。

npm install --save react-router react-router-dom
  • react-router:是基本的router包,里边函的内容较多,但是在网页开发中有很多用不到,现在的市面上的课程讲的基本都是这个包的教程。

  • react-router-dom:随着react生态环境的壮大,后出现的包,这个包比react-router包轻巧了很多。

注意:其实安装了react-router包就不用安装了react-router-dom包了,这里我们只是为了讲课方便所以安装了两个包。在实际开发中,请根据需要进行安装。安装时使用 – -save,因为这是要在生产环境中使用的。

复习component

以前学习过React的组件如何编写,这里简单复习一下。我们作一个A页面的组件(还是接着上节课的程序继续作),我们在/app文件夹下新建一个jspang.js页面。然后引进React包,并编写一个A页面的组件。请看下面的代码。

jspang.js

import React from 'react';
export default class jspang extends React.Component{
    render(){
        return(
            <div>A默认页面</div>
        );
    }
}

这里我们采用了ES6的类语法,这也是现在React推荐使用的,如果使用老语法会有一条黄色的警告。

写好组件后,引入index.js页面,在头部加入引入语句,并改写渲染代码。

import React from 'react';
import ReactDOM from 'react-dom';
import Jspang from './jspang';

ReactDOM.render(
    <Jspang/>,
    document.getElementById("app")
);

引入完成后,预览可以看到我们写的A页面的组件。通过上边基本的练习,我们有了一定经验,那么接下来我们仿照上面的方法制作两个新组件,Jspangb和JSPangc。代码如下:

jspangb.js

import React from 'react';
export default class jspangb extends React.Component{
    render(){
        return(
            <div>B页面</div>
        );
    }
}

jspangc.js

import React from 'react';
export default class jspangc extends React.Component{
    render(){
        return(
            <div>C页面</div>
        );
    }
}

写完三个页面组件以后,我们把这三个页面都引入到index.js文件里边。

import Jspang from './jspang';
import Jspangb from './jspangb';
import Jspangc from './jspangc';

引入和书写路由

三个页面都已经作好,现在就需要路由来切换他们了,先用import引入我们的路由包,这里我们用两个模块,一个是Router(我自己叫它路由器),另一个是Route(我自己叫它路由)。

importi {BrowserRouter as Router , Route} from 'react-router-dom';

然后我们改写文件,增加路由设置。

ReactDOM.render(
    <Router>
        <div>

            <Route exact path="/" component={Jspang} />
            <Route  path="/Jspangb" component={Jspangb} />
            <Route  path="/Jspangc" component={Jspangc} />
        </div>
    </Router>,
    document.getElementById("app")
);

注意:这里的exact是精确匹配的意思,比如我们有多层路由进行嵌套时,exact可以帮助我们精确匹配到你想跳转的路由。

我们路由已经设置完毕了,但是我们现在还不能进行切换,那我们就做个切换的组件,命名为

本文链接:http://jspang.com/post/react-all.html

-- EOF --

Comments

加入学习
QQ群1:364140450 (4900/5000满) web/前端(云宇科技)
QQ群2:524520566 (1900/2000人) 技术胖的前端技术2群
广告
打赏特权
打赏获得4项特权
1.免费视频离线高清版下载(共210集);
2.纯金网站15元代金券,可购买收费课程;
3.加入微信群,享有更多互动和人脉资源;
4.和11年程序老兵成为微信好友;