react-基础篇

buling的小乔

已于 2024-04-17 16:10:03 修改

阅读量153

点赞数 1

文章标签：学习 react.js 前端

于 2024-04-17 10:52:36 首次发布

本文链接：https://blog.csdn.net/jianjian_19/article/details/137863610

版权

1. react：构建用户界面的javascript库

2. 使用时，推荐使用脚手架

3. 初始化项目命令：npx create-react-app 项目名

4. 启动命令：yarn start 或 npm start

5. 创建元素：React.createElement('元素标签名'，‘元素属性’，‘元素内容’) （推荐使用jsx创建元素）

6. 渲染元素：ReactDOM.render('渲染的元素'，‘渲染的节点’)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div"></div>
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  <script>
    const h1 = React.createElement('h1',null,'HELLO RREACT')
    ReactDOM.render(h1,document.getElementById('div'))
  </script>
</body>
</html>

7. jsx（JavaScript XML）创建元素

import React from 'react';
import ReactDOM from 'react-dom';

// 使用jsx创建元素
const root = (
  <h1>HELLO JSX</h1>
)
// render方法渲染
ReactDOM.render(root,document.getElementById('root'))

8.react组件的两种创建方式

<1> 函数组件：函数名字大写字母开头，有返回值，使用函数名做组件标签名

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(){
  return (
    <div>这是一个hello函数</div>
  )
}
ReactDOM.render(<Hello />,document.getElementById('root'))

<2> 使用类创建组件:类名称必须以大写字母开头，类组件应该继承React.Component父类,必须使用render方法，必须有返回值

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component{
  render(){
    return (
      <div>这是一个class类创建组件</div>
    )
  }
}
ReactDOM.render(<Hello />,document.getElementById('root'))

buling的小乔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-基础篇

5. 创建元素：React.createElement('元素标签名'，‘元素属性’，‘元素内容’) （比较繁琐）6. 渲染元素：ReactDOM.render('渲染的元素'，‘渲染的节点’)3. 初始化项目命令：npx create-react-app 项目名。4. 启动命令：yarn start 或 npm start。1. react：构建用户界面的javascript库。2. 使用时，推荐使用脚手架。
复制链接

扫一扫