ReactJS-动手实现一个小小的组件练习

1.执行命令npm install webpack@3 -g，全局安装webpack

image.png
2.建立package.json,建立index.html(这个就是最终拖到浏览器里面展示的界面）
3.创建src/SimpleApp.tsx文件

import  * as React from 'react'
import * as ReactDOM from 'react-dom'
const SimpleApp = function({text}){
    return(
        <div>
            {
                text
            }
        </div>
    )
}
ReactDOM.render(
    <SimpleApp
        text = {'Hello World'}
    />,
    document.querySelector("#root")
)

1.这里我的理解就是从package.json文件里面，用npm把相关的库下载到工程下，然后，在这个文件下就可以引用相应的库文件
2.这里用函数的方式定义了SimpleApp这个组件，然后又调用了SimpleApp这个组件，方式就是用尖括号的形式将这个组件括起来。
3.document.querySelector("#root")又将这个组件放到了root组件后面
4.创建·webpack.config.js·文件

const path = require('path');
module.exports = ({production}={} )=>{
    return{
        context: __dirname,
        entry:'./src/SimpleAPP.tsx',
        output:{
            path:path.resolve(__dirname,'dist'),
            filename: "main.js",
        },
        resolve: {
            extensions: ['.ts','.tsx','.js','.jsx','.css']
        },
        module:{
            rules:[
                {
                    test:/\.tsx?$/,
                    loader: 'ts-loader',
                },
            ]
        },
    }
}

这里在项目下面创建了一个dist目录，下面创建了一个文件名为main.js
4.创建tsconfig.json文件
5.执⾏行行webpack命令
6.将index.html拖⼊入浏览器器预览效果
7.预览效果如下：

image.png
在src/SimpleApp.tsx里自己又动手加了几个元素

import  * as React from 'react'
import * as ReactDOM from 'react-dom'
const SimpleApp = function({text}){
    return(
        <div>
            {
                text
            }

        </div>
    )
}
const SimpleApp1 = function({text1}){
    return(
        <div>
            {
                text1
            }

        </div>
    )
}

ReactDOM.render(
    <div>
    <SimpleApp
        text = {'Hello rld'}
    />
    <SimpleApp1
        text1={"huiyt"}/>
    </div>,
    document.querySelector("#root")
)

显示结果为

image.png