python打造记账本_用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(

Hello, world!

, 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下载体验

ios 由于诸多限制暂未上线

logo

微信每周一篇写作践行群

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