文章目录
创建工程目录
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'