Directorio de artículos
- Crear directorio de proyectos
- Inicializar el proyecto
- + tsconfig.json
- Escribir demostración del proyecto1
- Utilizar componentes
- Crear interfaz html
- + webpack.config.js
- Compila el proyecto
- Principios de diseño de componentes
- Escribe una demostración de temporizador
- Ciclo de elementos
- Decorador @observador
- uso de hormigas
- Dirección de componente
Crear directorio de proyectos
projectName="rctWpkProj"
mkdir ${projectName}
mkdir ${projectName}/src
mkdir ${projectName}/src/components
mkdir ${projectName}/dist
cd ${projectName}
Inicializar el proyecto
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
Asegúrese de estar actualmente en el directorio raíz del proyecto.
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
Escribir demostración del proyecto1
编写组件
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
Utilizar componentes
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
Crear interfaz 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
Compila el proyecto
webpack
Principios de diseño de componentes
No puede cambiar los accesorios, es decir, no puede cambiar los parámetros entrantes
Si desea cambiar el parámetro, almacene el parámetro por separado en el estado
Escribe una demostración de temporizador
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
Ciclo de elementos
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")
)
Decorador @observador
Cuando el estado del componente decorado cambia, el componente se puede renderizar a tiempo
para implementar un temporizador con el decorador.
uso de hormigas
Instalación e introducción
npm install antd --save
import * as React from "react"
import {
Button, DatePicker, version } from "antd";
import 'antd/dist/antd.css'