0.咸鱼要说的
一入前端深似海，咸鱼入海更加咸。
最近闲的蛋疼，手上年前的事也完成了7788了，借助[PG1]的话来说，我们要keep real.
咸鱼肯定不real 了，因为我们都活在梦里，所以咱们keep一下，学习一下菜鸟???是怎么给React写组件的。
咸话少说，咱们开始吧
1.搭一个React,TS的环境
作为一条咸鱼，我肯定不会一步一步给你说清楚的。
要搭？
看这篇文章，反正我是照着这篇文干的
文章链接：https://www.jianshu.com/p/71bbcdc8c1fc
然后把我的webpack贴上来，大家参考下
const webpack = require('webpack')
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//const { buildPlugins } = require('./src/keep/config/plugins')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 我们应用的入口, 在 `src` 目录 (我们添加到下面的 resolve.modules):
entry: {
index: 'index.tsx',
vendor: ['react', 'react-dom']
},
// 配置 devServer 的输出目录和 publicPath
output: {
filename: '[name].[hash:8].js',
publicPath: '/',
path: path.resolve('./dist'),
chunkFilename: "[name].[hash:8].js",
},
// 配置 devServer
devServer: {
port: 3000,
historyApiFallback: true,
inline: true,
stats: {
modules:false
}
},
// 告诉 Webpack 加载 TypeScript 文件
resolve: {
// 首先寻找模块中的 .ts(x) 文件, 然后是 .js 文件
extensions: ['.ts', '.tsx', '.js', 'css', 'less'],
// 在模块中添加 src, 当你导入文件时，可以将 src 作为相关路径
modules: ['src', 'node_modules'],
},
module: {
loaders: [
// .ts(x) 文件应该首先经过 Typescript loader 的处理, 然后是 babel 的处理
{ test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/, include: path.resolve('src') },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader"]
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
})
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),//热更
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),//是否打包,初始化参数
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),//第三方库内容打包
new CleanWebpackPlugin('dist'),//清理打包文件夹
new ExtractTextPlugin("[name].[hash:8].css", {
disable: false,
allChunks: true,
}),//样式文件配置
new HtmlWebpackPlugin({
template: './src/keep/index.html',
hash: false,
}),//模板文件配置
],
}
2.写一个啥？按钮？
对对对对，按钮最简单，就大小，类型，点击事件
先看一下项目目录结构
是不是敲简单，真的是啥都没有。
先建一个button.jsx，这个就是button组件所在的js
咱们先实现按钮可以配置简单的文字，事件，和基础样式
import React from 'react'; import classNames from 'classnames'; import './style/button.less'; export interface ButtonOption { text?: string; icon?: string; onClick?: () => void; type?: 'normal' | 'default' | 'danger'; size?: 'sm' | 'xm' | 'lg'; href?: string; target?: string; defalutCls?: string; loading?: boolean; style?: React.CSSProperties; className?: string; } export default class Button extends React.Component<ButtonOption, any>{ static defaultProps = { defalutCls: 'keep-btn', loading: false, type: 'default', size: 'xm' } constructor(props: ButtonOption) { super(props); } render() { const { defalutCls, className, size, type, onClick, text } = this.props; const isAny: any = {}; const classes = classNames({ [`${defalutCls}`]: defalutCls, [`${defalutCls}-${size}`]: size, [`${defalutCls}-${type}`]: type, '': isAny }) return <button className={classes} type='button' onClick={onClick} >{text}</button> } }
button.less如下
@import "./mixins"; @import "../../theme/theme"; .keep-btn { padding: 0 15px; cursor: pointer; border-radius: 5px; height: 30px; &-default{ background: @default-5; border: @default-3 1px solid; color:#fff; &:focus,&:active,&::selection,&:visited{ background: @default-7; border: @default-5 1px solid; } } &-normal { } &-danger{ } &-sm{ } &-xm{ } &-lg{ } }
theme.less如下
@default-1:#e6fffb; @default-2:#b5f5ec; @default-3:#87e8de; @default-4:#5cdbd3; @default-5:#36cfc9; @default-6:#13c2c2; @default-7:#08979c; @default-8:#006d75; @default-9:#00474f; @default-10:#002329;
然后index.jsx把button弄进去看看效果
import React from 'react'; import ReactDOM from 'react-dom'; import Button from './keep/button/button' const App = () => { return ( <div> <Button text={'按钮'} type={'default'} size='xm' onClick={() => { console.log('我点了！！！') }} /> </div> ) } ReactDOM.render(<App />, document.getElementById('app'))
package.json的命令我是这样配置的
"scripts": { "build": "set NODE_ENV=production&&webpack", "start": "set NODE_ENV=dev&&webpack-dev-server --progress -w --colors" },
咱们start一下看看
是不是敲简单。
接下来我们，我们来搞一下按钮大小的问题
其实在按钮拼写样式的时候
const classes = classNames({ [`${defalutCls}`]: defalutCls, [`${defalutCls}-${size}`]: size, [`${defalutCls}-${type}`]: type, '': isAny })
就已经把class写进去了，咱们只需要编写一下样式就好了
button.less
@import "./mixins"; @import "../../theme/theme"; .keep-btn { cursor: pointer; margin: 5px; &-default{ background: @default-5; border: @default-3 1px solid; color:#fff; &:focus,&:active,&::selection,&:visited{ background: @default-7; border: @default-5 1px solid; } } &-normal { } &-danger{ } &-sm{ padding: 0 13px; border-radius: 5px; height: 25px; font-size: 12px; } &-xm{ padding: 0 15px; font-size: 13px; border-radius: 5px; height: 30px; } &-lg{ font-size: 14px; padding: 0 18px; border-radius: 5px; height: 35px; } }
import React from 'react'; import ReactDOM from 'react-dom'; import Button from './keep/button/button' const App = () => { return ( <div> <Button text={'大号按钮'} type={'default'} size='lg' onClick={() => { console.log('我点了！！！') }} /> <Button text={'中号按钮'} type={'default'} size='xm' onClick={() => { console.log('我点了！！！') }} /> <Button text={'小号按钮'} type={'default'} size='sm' onClick={() => { console.log('我点了！！！') }} /> </div> ) } ReactDOM.render(<App />, document.getElementById('app'))
看看效果
嗯，满意，咸鱼的要求达到了。
咱们再搞搞他的形态
'normal' | 'default' | 'danger';
normal就是白色背景，danger就是红色背景，改下样式就OK了嘛，敲简单。
改一下button.less
@import "./mixins"; @import "../../theme/theme"; .keep-btn { cursor: pointer; margin: 5px; &-default{ background: @default-5; border: @default-3 1px solid; color:#fff; &:focus,&:active,&::selection,&:visited{ background: @default-7; border: @default-5 1px solid; } } &-normal { background: #fff; border: @default-5 1px solid; color: @default-5; &:focus,&:active,&::selection,&:visited{ border: @default-3 1px solid; color: @default-3; } } &-danger{ background: red; border: red 1px solid; color: #fff; &:focus,&:active,&::selection,&:visited{ border: red 1px solid; color: #fff; } } &-sm{ padding: 0 13px; border-radius: 5px; height: 25px; font-size: 12px; } &-xm{ padding: 0 15px; font-size: 13px; border-radius: 5px; height: 30px; } &-lg{ font-size: 14px; padding: 0 18px; border-radius: 5px; height: 35px; } }
看看效果
嗯嗯~，咸鱼表示很好。咸鱼表示，按钮做到这样就可以了。
然后下篇文章写个简单的导航？
好，就写一个简单的导航
请发表评论