笔记--React概述

最新推荐文章于 2024-07-22 19:56:06 发布

若梦丶忆流年

最新推荐文章于 2024-07-22 19:56:06 发布

阅读量402

点赞数 1

文章标签： reactjs

本文链接：https://blog.csdn.net/qq_43488583/article/details/123927346

版权

1. React概述

1.1 什么是React

在这里插入图片描述

1.2 React特点

在这里插入图片描述

2. React的基本使用

2.1 React的安装

在这里插入图片描述

2.2 React的使用

在这里插入图片描述

创建package.json文件：npm init
安装React，React-DOM：npm i react react-dom

<body>
    <div id="root"></div>

    <!-- 1. 引入js文件 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script>
        // 2. 创建React元素 
        // 参数一：元素名称 
        // 参数二：元素属性
        // 参数三以及以后的参数：元素的子节点
        const title = React.createElement('h1', {
                title: '我是标题',
                id: 'p1'
            }, 'Hello React sssss!')
            // 3. 将React元素渲染到页面中去 
            // 参数一：要渲染的React元素
            // 参数二：挂载点
        ReactDOM.render(title, document.getElementById('root'))
    </script>
</body>

方法说明

在这里插入图片描述

3. React 脚手架的使用

3.1 React 脚手架的意义

在这里插入图片描述

3.2 使用React 脚手架初始化项目

在这里插入图片描述

npx命令介绍

在这里插入图片描述

3.3 在脚手架中使用React

在这里插入图片描述

// index.js文件
// 1. 导入react，react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 调用React.createElement() 方法创建react元素
const title = React.createElement('p', null, '脚手架方便');

// 3. 调用ReactDOM.render()方法将创建的react元素渲染到页面中
ReactDOM.render(title, document.getElementById('root'))

总结

不同的项目主要体现在渲染这一部分，ReactDOM.render主要负责渲染Web项目

在这里插入图片描述

若梦丶忆流年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫