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