用JS打造一款记账App——React基础篇项目构建

这篇内容重点介绍一个React项目的结构目录以及webpack的配置，启动webpack-dev-server并用React方式输出HelloWorld。本教程理念就是让大家不仅会用React,而且要明白为什么要这样用。

开发环境

参考开篇序内容安装

创建项目目录

npm初始化package.json

➜ mkdir kas-react-redux       #新建项目文件夹
➜ cd kas-react-redux          #进入
➜ npm init  #初始化package.json

name: (kas-react-redux) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: Asir
license: (ISC) 

根据提示输入内容，也可以直接回车，然后在package.json文件中修改

安装React，我们要学习的基础框架

➜ npm install --save react react-dom

├── react@15.4.2
├── react-dom@15.4.2

安装webpack和webpack-dev-server

➜ npm install --save webpack webpack-dev-server

├── webpack@2.3.2 #用于将代码整体打包压缩输出的工具
├── webpack-dev-server@2.4.2 #用于开发模式代码调试与热更新

安装配置webpack用到的库

• babel相关的库，用来打包编译转换为目前主流浏览器支持的JS语法

➜ npm install --save-dev babel babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-3 
├── babel@6.23.0 
├── babel-loader@6.4.1 
├── babel-preset-es2015@6.24.0  #打包编译ES6转ES5的库
├── babel-preset-react@6.23.0   #打包编译jsx语法
├── babel-preset-stage-3@6.22.0 #打包编译async|await语法

更多babel相关请查阅官方文档、中文网

• style相关库，用来打包css，编译less、sass

➜ npm install --save-dev  style-loader css-loader less-loader sass-loader less node-sass 
├── style-loader@0.16.1 
├── css-loader@0.27.3 
├── less-loader@4.0.2 
├── sass-loader@6.0.3 
├── less@2.7.2
├── node-sass@4.5.1

• path 用于拼接路径

➜ npm install --save-dev path 
├── path@0.12.7

• html-webpack-plugin 模板插件用于导出html时，可以使用模板

➜ npm install --save-dev html-webpack-plugin 
├── html-webpack-plugin@2.28.0

创建并配置webpack.config.js

➜ atom webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports= {
  entry:  path.resolve(APP_PATH, 'index.jsx'),
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //babel重要的loader在这里
  module: {
    rules: [
      {
        test: /\.(less|scss|css)$/,
        loaders: ['css-loader', 'sass-loader', 'less-loader']
      },
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        include: APP_PATH,
      }
    ]
  },

  devtool: 'eval-source-map', //开发环境

  devServer: {
   compress: true, // 启用Gzip压缩
   historyApiFallback: true, // 为404页启用多个路径
   hot: true, // 模块热更新，配置HotModuleReplacementPlugin
   https: false, // 适用于ssl安全证书网站
   noInfo: true, // 只在热加载错误和警告
   // ...
 },

 plugins: [
   new HtmlwebpackPlugin({
    title: '记账本',
    template: 'build/template/index.html'
  })
 ],
}

创建.babelrc,用于babel调用的插件配置

➜ atom .babelrc

{
  "presets": ["es2015","react", "stage-3"]
}

最终构建好的目录

kas-react-redux
├── build 
├── node_modules
├── src
├── test
├── .babelrc
├── package.json
├── webpack.config.js

使用React

用react写一个HelloWorld页面

➜ cd src & atom index.jsx

import React from 'react'
import { render } from 'react-dom'

const app = document.createElement('div')
document.body.appendChild(app)
render(<h1>Hello, world!</h1>, app)

在package.json中添加

"scripts": {
    "start": "webpack-dev-server --hot --inline --port 8080 --host 192.168.31.182",  #添加项
    "test": "echo \"Error: no test specified\" && exit 1"
  },

现在启动webpack-dev-server, 可以在浏览器中看到，输出的HelloWorld页

➜ npm start

结束

本节内容重点介绍了webpack配置与react项目目录的构建，下一节将讲解在React中引入Redux库，并构建src的目录结构。

App下载体验

• android

• ios 由于诸多限制暂未上线

  
  logo

微信每周一篇写作践行群

每周一篇写作践行群自愿加入，入群即表示同意一起写作一起成长，大家互相赞赏鼓励！