文档章节

react笔记

扬州炒饭
 扬州炒饭
发布于 2016/05/20 18:28
字数 930
阅读 146
收藏 3
最近一段时间,在项目中使用了FaceBook的react作为基础框架,UI组件使用蚂蚁金服的Ant Design。
写个博客记录下开发过程中的一些常见问题。
(基础环境:react/es6/jsx,外加webpack/antd。之所以没有使用redux,太增加学习成本了,咱们只是想用用react而已。)

涉及内容介绍

react

react是一个通过虚拟DOM渲染HTML界面的js框架,由FaceBook开源提供,最初用于Instagram网站。
按照官方和相关社区的说法,虚拟DOM渲染界面比直接操作DOM性能更高。我只是一个java码农,高并发多线程等着我去学,就没去研究了。
真心怕了复杂的前端。

es6

es6是新一代的javascript,主要提供了一些新的特性,让代码写起来更加方便。另也叫做es2015
比如定义函数,funcName=data=>{return xxx},后面细说。

jsx

jsx是扩展版的js文件,可以让js拥有处理xml标签能力。

webpack

webpack作为前端工具,用于混合,压缩,打包,启动服务等...称为新一代前端神器。
比如:webpack-dev-server --hot(启动服务), webpack -p(混合压缩)

antd

ant design是蚂蚁金服基于react开发的UI库,简洁大气,狂拽炫酷。(官方自称:这是一个设计语言)

注:npm作为串联这一切的工具,可以使用其下载安装react及其相关的库和工具,并且管理依赖库的版本,有点像java里的maven

创建一个React项目

未完待续:周末了,祝各位休息好。(超实用笔记,绝不太监)


2016-05-23

  • 新建demo目录

    md demo & cd demo /mkdir demo & cd demo

  • 初始化生成npm配置文件package.json,并修改其内容

    npm init

    {
      "name": "demo",
      "version": "1.0.0",
      "scripts": {
        "start": "webpack-dev-server --hot",
        "build": "webpack -p"
      },
      "dependencies": {
        "antd": "^1.0.1",
        "jquery": "^2.2.3",
        "react": "0.14.x",
        "react-dom": "0.14.x",
        "react-router": "^2.3.0"
      },
      "devDependencies": {
        "babel-loader": "^6.2.4",
        "babel-preset-es2015": "^6.6.0",
        "babel-preset-react": "^6.5.0",
        "css-loader": "^0.23.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "file-loader": "^0.8.5",
        "html-webpack-plugin": "^2.15.0",
        "less": "^2.6.1",
        "less-loader": "^2.2.3",
        "postcss-loader": "^0.8.2",
        "raw-loader": "^0.5.1",
        "style-loader": "^0.13.1",
        "url-loader": "^0.5.7",
        "webpack": "^1.12.15",
        "webpack-dev-server": "^1.14.1"
      }
    }
    

    (注:如果想添加应用中使用的库,在dependencies里添加;如果是工具类的库,在devDependencies里添加。)

  • 安装依赖库,生成node_modules依赖库目录

    npm install

    (注:如果等待时间长,可以CTRL+C取消并删除生成的node_modules目录,并使用npm install --registry=http://registry.npm.taobao.org)

  • 增加几个目录,形成如下结构

    --demo
      |--dist
      |--node_modules
      |--src
          |--commons
          |--images
          |--styles
          |--views
          |--index.html
          |--index.jsx
      |--package.json
      |--webpack.config.js
    

    (注:dist是通过webpack打包后的最终文件;node_modules是所有的依赖库位置;src是真正的项目目录,其中commons作为公共组件目录,images作为图片资源目录,styles作为样式表目录,views里写系统的每个功能页面;package.json是npm配置文件;webpack.config.js是webpack配置文件)

  • 新建webpack的配置文件webpack.config.js

    //定义webpack及插件
    var path = require('path');
    var webpack = require('webpack');
    var HtmlwebpackPlugin = require('html-webpack-plugin');
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    //定义了一些文件夹的路径
    var ROOT_PATH = path.resolve(__dirname);
    var MOUDLE_PATH = path.resolve(ROOT_PATH, 'node_modules')
    var SRC_PATH = path.resolve(ROOT_PATH, 'src');
    var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
    
    //定义版本号,方便生成版本号
    var myVersion = '1.0.0';
    
    //定义公共库
    var common = [
        'react',
        'react-dom',
        'antd',
        'jquery'
    ]
    
    //定义各种加载器
    module.exports = {
        entry: {
            index: path.resolve(SRC_PATH, 'index.jsx'),
            common: common
        },
        output: {
            path: path.resolve(BUILD_PATH, myVersion),
            filename: '[name].js'
        },
        resolve: {
            extensions: ['', '.js', '.jsx'],
            modulesDirectories: [SRC_PATH, MOUDLE_PATH]
        },
        module: {
            loaders: [
                { test: /\.html$/, loader: 'raw-loader' },
                { test: /\.jsx|js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } },
                { test: /\.(less)$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") },
                { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
                { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=10000&name=./images/[name].[ext]' },
                { test: /\.(ttf|eot|woff|woff2|otf|svg)/, loader: 'file-loader?name=./font/[name].[ext]' },
            ]
        },
        plugins: [
            new ExtractTextPlugin("[name].css"),
            new HtmlwebpackPlugin({
                favicon:'./src/images/favicon.png',
                inject: true,
                template: path.resolve(SRC_PATH, 'index.html')
            }),
            new webpack.NoErrorsPlugin()
        ],
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,
            progress: true,
        }
    };
    

    未完待续:下班的时候抽空再往下写。

© 著作权归作者所有

扬州炒饭
粉丝 42
博文 93
码字总数 24585
作品 0
程序员
私信 提问
ReactNative从零开始笔记4-PropTypes使用

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、PropTypes的简介 1.自定义组件的时候暴露属性到外界时候,外界调用组件具有属性...

摸着石头过河_崖边树
01/17
0
0
ReactNative从零开始笔记3-state(状态)与props(属性)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、 props(属性) ReactNative(React)使用两种数据来控制一个组件:props 和 stat...

摸着石头过河_崖边树
01/18
0
0
ReactNative从零开始笔记6-导航页面传值(正传和逆传)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、导航使用 虽然系统有Navigator可以用,但是0.44版本后就不在推荐使用,而是让我...

摸着石头过河_崖边树
2018/12/28
0
0
webpack配置: 如何同时使用ES2015和JSX

笔记笔记,网上很多例子都是过期的啊= =因为jsx转换器整合到babel中了,根本不需要网上所说的jsx-loader

WolfX
2016/04/05
630
2
玩转 React【第02期】:恋上 React 模板 JSX

往期回顾 前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦,而且层级结构特别不清晰。今天我们来看一种优雅的编写React的代码的一种方式 ...

我的卡
2018/10/31
10
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
13
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
16
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部