React & webpack &ant 学习

简介: React & webpack &ant 学习

创建工程目录

projectName="rctWpkProj"
mkdir ${projectName}
mkdir ${projectName}/src
mkdir ${projectName}/src/components
mkdir ${projectName}/dist
cd ${projectName}

初始化工程

package.json
npm init -y 
//-g 全局的依赖包
sudo npm install -g webpack
// --save 表明部署时候的依赖包
npm install --save react react-dom @types/react @types/react-dom
//--save-dev 开发时的依赖吧
npm install --save-dev typescript awesome-typescript-loader source-map-loader
// 安装 ui 组件
 npm install antd --save
npm install style-loader  css-loader --save

+tsconfig.json

保证当前位于项目根目录

cd ${projectName}
cat <<EOF > tsconfig.json
{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react",
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
    },
    "include": [
        "./src/**/*"
    ]}
EOF

编写项目 demo1

编写组件
cd src/components/
//创建组件文件
cat <<EOF >Hello.tsx
import * as React from "react"
export interface HelloProps {
  compiler :string;
  framework :string;
}
export const Hello = (props : HelloProps)=> <h1>Hello from {props.compiler} and {props.framework}!</h1>
EOF

使用组件

cd src/
cat <<EOF >index.tsx
import * as React from "react"
import * as ReactDOM from "react-dom"
import { Hello } from "./components/Hello"
ReactDOM.render(
  <Hello compiler="typeScript" framework="React"></Hello>,
  document.getElementById("example")
)
EOF

创建html界面

//在根目录下
cd %projectName
//创建可以让react 挂载的 html 文件
cat <<EOF >index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>
        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <!-- Main -->
        <script src="./dist/bundle.js"></script>
    </body>
</html>
EOF

+webpack.config.js

//cd到项目目录
//cd到项目目录
cd $projectName
//创建 webpack 打包配置文件
cat <<EOF >webpack.config.js
module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },};
EOF

编译项目

webpack

组件设计原则

不可以改变 props ,即 不可以改变 传入 参数

如果要改变参数 请单独在 state 中存储参数


编写计时器demo

cd src/components
//创建计时器组件
cat <<EOF >Clock1.tsx
import * as React from "react"
import ReactDOM = require("react-dom")
export class Clock1 extends React.Component<{name:string}> {
  getMilliTime =()=>{
    let time1=new Date()
    let timeString=`${time1.toLocaleString()} 毫秒:${time1.getMilliseconds().toString()} `
    return timeString
  }
  state ={
    // date:new Date().toLocaleTimeString(),
    date:this.getMilliTime(),
    interval1 : 0,
    name :''
  }
  constructor(props:any){
    super(props);
  }
  cancelIntval = (e:any )=> {
    clearInterval( this.state.interval1);
  }
  creatIntval =(e:any) =>{
    this.setState({
      date:this.getMilliTime()
    })
    var  val1= setInterval(()=>{
      this.setState({
        date:this.getMilliTime(),
      })
    } , 10)
    this.setState({ interval1:val1 })
  }
  componentDidMount(){
    this.creatIntval(event)
  }
  render(){
    const divStyle = {
      display : 'flex',
      border: '1px solid',
    }
    const outerDivStyle={
      padding :'10px'
    }
    return (
      <div style={outerDivStyle}> 
      <div style={divStyle}>
        <h2>clock.NO{this.props.name}</h2>
        <h2>now time is {this.state.date}</h2>
        <button onClick={this.cancelIntval}>暂停计时</button>
        <button onClick={this.creatIntval}>开始计时</button>
      </div>
      </div>
    )
  }
}
EOF

元素循环

import * as React from "react"
import * as ReactDOM from "react-dom"
import { Hello } from "./components/Hello"
import { ClassHello } from "./components/ClassHello"
import { Clock1 } from "./components/Clock1"
function ManyClock(){
  //主要代码, 
    // 生成 连续自然数数组
  var arrays= Array.from(Array(6).keys()) 
//把数组元素变换成标签
  var elemlists =arrays.map((item1)=>{
    let item=item1+1
    return (<Clock1 key={item.toString()}  name={item.toString()}></Clock1>)
  })
  return (
    <div>
      {elemlists}
    </div>
  )
}
ReactDOM.render(
  // <Hello compiler="typeScript" framework="React"></Hello>,
  // <ClassHello name="12" compiler="tpc" framework="react"></ClassHello>,
  // <Clock1 ></Clock1>,
  <ManyClock></ManyClock>,
  document.getElementById("example")
)

装饰器 @observer

被装饰的组件中的state 发生变化时,可以及时的渲染组件

来用装饰器实现一个 定时器


ant使用

安装与引入

npm install antd --save

import * as React from "react"
import { Button, DatePicker, version } from "antd";
import 'antd/dist/antd.css'

组件地址

https://ant-design.gitee.io/components/overview-cn/

相关文章
|
8天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
1月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
41 2
|
24天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
34 0
|
24天前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
30 0
|
1月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
44 0
|
5天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
24天前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
21 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
1月前
|
前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(上)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
27 2
|
1月前
|
Web App开发 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
20 0

相关产品

  • 云迁移中心