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; } }
看看效果
嗯嗯~,咸魚表示很好。咸魚表示,按鈕做到這樣就可以了。
然后下篇文章寫個簡單的導航?
好,就寫一個簡單的導航