React点阵显示当前日期时间 (A simple and

|-----------------------------------------| | | | The Current Time | | | |-----------------------------------------| TheCurrentTime | |-- node_modules | | | |-- react | | | |-- react-dom | | | |-- react-router | | | |-- react-redux => redux本身只能处理同步的Action | | | |-- react-thunk => 在我们没有加上thunk这个中间件之前， | | store的dispatch方法只能传入一个action对象， | | thunk的作用就是能够让我们可以将一个function方法传入diptach， | | 这在做异步的时候非常有用。 | | | |-- redux-promise => redux-promise支持将promise对象作为参数传入dispatch中。 | | | |-- prop-types => React.PropTypes 自 React v15.5 起已弃用。 | | 请使用 prop-types 库代替。调用方法： | | import PropTypes from 'prop-types' | | | |-- @types/react => implements method in React.Component,解决 | | Cannot resolve symbol 'Component' 的问题 | | | |-- postcss-loader => PostCSS，一款通过 JS 插件转换 styles 样式的工具。 | | 根目录下新建postcss.config.js文件。配置如下： | | module.exports = { | | parser: 'sugarss', | | plugins: { | | 'postcss-import': {}, | | 'postcss-cssnext': {}, | | 'cssnano': {} | | } | | } | | webpack配置：{ | | test: /\.css$/, | | use: ['style-loader', 'css-loader','postcss-loader'] | | } | | | |-- Autoprefixer => PostCSS插件，一个后处理程序。解析CSS并添加浏览器前缀。 | | postcss.config.js文件中配置如下： | | module.exports = { | | plugins: [ | | require('autoprefixer')({}) | | ] | | } | | | |-- extract-text-webpack-plugin => 将css单独打包成一个文件。 | | 它会将所有的入口 chunk(entry chunks)中引用的 *.css， | | 移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到JS bundle中， | | 而是会放到一个单独的 CSS 文件（即 styles.css）当中。 | | 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle | | 会跟 JS bundle 并行加载。 | | | |-- optimize-css-assets-webpack-plugin => 压缩抽离后的css代码, | | plugins: [new OptimizeCssAssetsPlugin()] | | | |-- html-webpack-plugin => 该插件将为您生成一个HTML5文件， | | 其中包括使用script标签的body中的所有webpack包。 | | | |-- copy-webpack-plugin => 在webpack中拷贝文件和文件夹。例如： | | new CopyWebpackPlugin([ | | {from: "./src/static/images", to: 'images/'} | | ]) | | 作用就是将 ./src/static/images | | 目录下的图片拷到编译目录到 images 文件夹下面 | | | |-- rimraf => 编译前清空dist目录。package.json配置： | | "scripts": {"build": "rimraf dist && ..."} | | | |-- OpenBrowserPlugin => webpack编译后自动打开浏览器 | | | |-- axios => 一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 | | | |-- babel-eslint => 一个Babel parser的包装器，这个包装器使得Babel parser可以和ESLint协调工作 | | .eslintrc.js中配置："parser": "babel-eslint", | | "parserOptions": { | | "sourceType": "module", | | "allowImportExportEverywhere": false, | | "codeFrame": false | | } | | | |-- webpack | | | |-- webpack-dev-middleware | | | |-- webpack-hot-middleware | |-- dist => 打包输出文件目录 | |-- src | | | |-- actions => Action是把数据从应用传到 store 的有效载荷。 | | 它是 store 数据的唯一来源，一般通过 | | store.dispatch() 将 action 传到 store。 | | | |-- reducers => Action只是描述了有事情发生了这一事实， | | 并没有指明应用如何更新 state。 | | reducer 用来做更新state这个动作。 | | | |-- store => 1.维持应用的state； | | 2.提供 getState() 方法获取 state； | | 3.提供 dispatch(action) 方法更新state； | | 4.通过 subscribe(listener) 注册监听器； | | 5.通过 subscribe(listener) 返回的函数注销监听器。 | |  | |-- components => 展示型组件目录 | | | |-- containers => 容器型组件目录 | | | |-- config => 配置actionType、接口 | | | |-- library => 插件库 | | | |-- service => 服务配置 | | | |-- static => 静态文件目录 | | | |-- main.js => 入口文件 | |-- webpack => webpack配置目录 | |-- .babelrc => Bable的配置文件，用来设置转码规则和插件。 | Babel是一个广泛使用的ES6转码器， | 可以将ES6代码转为ES5代码。 | |-- .gitignore => git上传忽略特殊文件配置 | |-- index.html | |-- README.md | |-- package.json => 定义了这个项目所需要的各种模块，以及项目的配置信息。 | |-- package-lock.json => npm5.0后新增。记录了整个 node_modules | 文件夹的树状结构,当重新安装模块的时候， | 速度加快。但是，生成pack-lock.json后， | 重复执行npm install时将会以其记录的版本来安装。 | 这时如果手动修改 package.json 中的版本， | 重新安装也不会生效，只能手动执行npm install | 命令指定依赖版本来进行修改。 | | |-- yarn.lock => yarn.lcok文件是自动产生的， | 和package-lock.json的功能一样， | 只不过yarn可以做到手动更改package.json后， | 重新安装并更新lockfile。