react学习笔记---(1) 创建react应用，类式组件和函数式组件

最新推荐文章于 2024-08-15 16:27:19 发布

Tomcat20

最新推荐文章于 2024-08-15 16:27:19 发布

阅读量123

点赞数

分类专栏： react 文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/Tomcat20/article/details/127209531

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

创建一个最基础的react应用

创建一个新的单页面应用 --- react
npx create-react-app test(文件夹名字)

// 本地运行
npm start
// 生成对应的生产版本文件
npm run build

最基本的目录结构显示(删除一些非必要文件之后)

%PUBLIC_URL%/ — public文件夹

创建组件的两种方式

普通组件一般放在src/components文件夹内部
路由组件一般放在src/pages文件夹内部

函数式组件
- 组件名字的首字母大写
- 必须要有返回值，返回值为组件的结构

src/components/Demo1

import React from 'react'

export default function Demo1() {
  return (
    <div>函数式组件</div>
  )
}

类式组件
- 组件名字首字母大写
- 必须有render方法，方法中返回组件的结构

src/components/Demo2

import React, { Component } from 'react'

export default class Demo2 extends Component {
  render() {
    return (
      <div>类式组件</div>
    )
  }
}

src/App

注册Demo1和Demo2组件

import React from 'react'
import Demo1 from './components/Demo1'
import Demo2 from './components/Demo2'

export default function App() {
  return (
    <div>
      <Demo1></Demo1>
      <hr />
      <Demo2></Demo2>
    </div>
  )
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
  <link rel="stylesheet" href="%PUBLIC_URL%/favicon.ico">
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/index.js

渲染App组件, 挂载到root组件标签上面

import React from "react";
import ReactDOM from 'react-dom/client'
import App from "./App";

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(
  <App></App>
)