Article Directory
Create project directory
projectName="rctWpkProj"
mkdir ${projectName}
mkdir ${projectName}/src
mkdir ${projectName}/src/components
mkdir ${projectName}/dist
cd ${projectName}
Initialize the project
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
Ensure that you are currently in the project root directory
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
Write project 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
Use components
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
Create html interface
//在根目录下
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
Compile the project
webpack
Component design principles
You cannot change props, that is, you cannot change the incoming parameters
If you want to change the parameter, please store the parameter separately in state
Write a timer 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
Element cycle
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")
)
Decorator @observer
When the state of the decorated component changes, the component can be rendered in time
to implement a timer with the decorator
ant use
Installation and introduction
npm install antd --save
import * as React from "react"
import {
Button, DatePicker, version } from "antd";
import 'antd/dist/antd.css'