hello react

最新推荐文章于 2024-05-24 09:15:22 发布

qq_46037248

最新推荐文章于 2024-05-24 09:15:22 发布

阅读量59

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_46037248/article/details/119460111

版权

1、搭建脚手架

2、创建项目结构：

public

index.html

src

App.js
index.js

3、编写index.html

引入图标和容器“root”用于存放组件

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>react</title>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

</head>

<body>
    <!-- 主页面节点存放组件 -->
    <div id="root"></div>
</body>

</html>

4、编写项目入口文件 index.js

//引入react核心库
import React from 'react'
//引入ReactDOM用于渲染
import ReactDOM from 'react-dom'
//引入App文件
import App from './App.js'
//渲染APP到页面
ReactDOM.render(<App />, document.getElementById('root'))

5、编写App.js

//创建外壳组件App
//引入React才能继承
import React from 'react'
class App extends React.Component {
    render() {
        return (
            <div>
                hello!!!
            </div>
        )

    }

}

//暴露App组件
export default App

好了这里到终端启动可以正常显示出来

规范一点引入react和继承组件…App.js文件

//创建外壳组件App
//引入React才能继承，
//原 import React from 'react'
//class App extends React.Component 

import React, { Component } from 'react'
import Hello from './hello'
//创建并暴露App组件,这里也优化了
export default class App extends Component {
    render() {
        return (
            <div>
                <Hello />//还将文字写成一个组件引入进来！新增了Hello.js
            </div>
        )
    }
}

Hello.js

import React, { Component } from 'react'

export default class Hello extends Component {
    render() {
        return (
            <h1>Hello!!!</h1>
        )
    }
}

目录结构

文件形式1
文件形式2

在这里插入图片描述

文件形式3

安装react插件，使用快捷编码，减少工作重复率

在这里插入图片描述

代码片段	效果
rcc + Tab	用类定义组件
rfc	使用函数定义组件

qq_46037248

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hello react

1、搭建脚手架2、创建项目结构：publicindex.htmlsrcApp.jsindex.js3、编写index.html引入图标和容器“root”用于存放组件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>react</title> <link rel="
复制链接

扫一扫