React---react的基本使用

Cirrod

已于 2022-03-21 15:58:01 修改

阅读量2.5k

点赞数 2

分类专栏： react 文章标签： javascript 前端 react.js

于 2022-03-20 22:57:49 首次发布

本文链接：https://blog.csdn.net/h18377528386/article/details/123623221

版权

react 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.React概述

1.什么是React

React是一个用于构建用户界面的JavaScript库。

用户界面:HTML页面(前端)
React主要用来写HTML页面，或构建Web应用
如果从MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。
React起源于Facebook的内部项目，后又用来架设Instagram的网站，并于2013年5月开源

2.React的特点

1.声明式

你只需要描述UI( HTML)看起来是什么样，就跟写HTML一样

React负责渲染Ul，并在数据变化时更新U

2.基于组件

组件是React最重要的内容

组件表示页面中的部分内容
组合、复用多个组件，可以实现完整的页面功能

3.学习一次，随处使用

使用React可以开发Web 应用
使用React可以开发移动端原生应用( react-native )

使用React可以开发VR(虚拟现实)应用( react 360 )

二.React的基本使用

1.React的安装

安装命令: npm i react react-dom
react包是核心，提供创建元素、组件等功能
react-dom包提供DOM相关功能等

2.React的使用

1.引入react和react-dom两个js文件

    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

2.创建React元素

3.渲染React元素到页面中

    <div id="root"></div>
    <script>
      //参数一:元素名称
      //参数二：元素属性
       //参数三:元素的子节点
        const title = React.createElement('h1', null, 'Hello React')
      //参数一：要渲染的react元素
      //参数二：挂载点
        ReactDOM.render(title, document.getElementById('root'))
    </script>

完整例子：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <div id="root"></div>
    <script>
        const title = React.createElement('h1', null, 'Hello React')
        ReactDOM.render(title, document.getElementById('root'))
    </script>
</body>

</html>

3.方法说明

React.createElement()说明(知道)

ReactDOM.render()说明

三.React脚手架的使用

1.React脚手架意义

1．脚手架是开发现代Web应用的必备。
2．充分利用Webpack、Babel、ESLint等工具辅助项目开发。

3．零配置，无需手动配置繁琐的工具即可使用。
4．关注业务，而不是工具配置。

2.使用React脚手架初始化项目

1.初始化项目，命令:npx create-react-app my-app

2.启动项目，在项目根目录执行命令：npm start

3.npx命令介绍

npm v5.2.0引入的一条命令
目的:提升包内提供的命令行工具的使用体验
原来:先安装脚手架包，再使用这个包中提供的命令
现在:无需安装脚手架包，就可以直接使用这个包提供的命令

补充说明

1．推荐使用:npx create-react-app my-app

2. npm init react-app my-app
3. yarn create react-app my-app

yarn是 Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同

yarn具有快速、可靠和安全的特点
初始化新项目: yarn init
安装包: yarn add 包名称

安装项目依赖项:yarn

其他命令，请参考yarn文档

3.在脚手架中使用React

1.导入react和react-dom两个包

import React form 'react'

import ReactDOM from 'react-dom'

2.调用React.createElement()方法创建react元素。
3.调用ReactDOM.render()方法渲染react元素到页面中。
例子：

在index,js文件书写下面代码

//1.导入react
import React from 'react'
import ReactDOM from 'react-dom'
//2.创建react元素
const title = React.createElement('h1', null, 'Hello React')
    //3.创建react元素
ReactDOM.render(title, document.getElementById('root'))

四.总结

1. React是构建用户界面的JavaScript库

2．使用react时，推荐使用脚手架方式。
3．初始化项目命令:npx create-react-app my-app。

4．启动项目命令: yarn start (或npm start )。
5. React.createElement()方法用于创建react元素（知道)。

6. ReactDOM.render()方法负责渲染react元素到页面中。

Cirrod

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
React---react的基本使用

一.React概述1.什么是ReactReact是一个用于构建用户界面的JavaScript库。用户界面:HTML页面(前端)React主要用来写HTML页面，或构建Web应用如果从MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。React起源于Facebook的内部项目，后又用来架设Instagram的网站，并于2013年5月开源2.React的特点1.声明式你只需要描述UI( HTML)看起来是什么样，就跟写..
复制链接

扫一扫