前端学习之React01:概述, 基本使用,脚手架

Posted 2022-12-03 浅弋、璃鱼

文章目录

• 一、React概述
• • 1. 什么是React：
  • 2. React的特点:
  • • 2.1 声明式:
    • 2.2 基于组件:
    • 2.3 学习一次, 随处使用;
• 二、React的基本使用
• • 1. React的安装
  • 2. React的使用:
  • • 2.1 引入reat和react-dom两个js文件
    • 2.2 创建元素并渲染到页面中;
• 三、React脚手架的使用
• • 1. React脚手架意义:
  • 2. 使用React脚手架初始化项目:
  • • 2.1 初始化项目:
    • 2.2 运行项目
  • 3. 在脚手架中使用React
  • • 3.1 导入react和react-dom两个包:
    • 3.2 调用`React.createElement()`方法创建react元素:
    • 3.3 调用`ReactDOM.render()`方法渲染react元素到页面中:

一、React概述

1. 什么是React：

React是一个用于构建用户界面的javascript库；
React主要用来写html页面，或者构建Web应用；

如果从MVC的角度看， React仅仅是视图层（V），也就是是只负责视图的渲染， 而并非提供了完整的M和C的功能；

2. React的特点:

2.1 声明式:

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

const jsx = <div classname="app">
	<h1>Hello React! 动态变化数据: count</h1>
</div>

2.2 基于组件:

• 组件是React最重要的内容;
• 组件表示页面中的部分内容;
• 组合, 复用多个组件, 可以实现完整的页面功能;

2.3 学习一次, 随处使用;

• 使用React可以开发Web应用;
• 使用React可以开发移动端原生应用(react-native);
• 使用React可以开发VR(虚拟现实)应用(React360);

二、React的基本使用

1. React的安装

安装命令: npm i react react-dom

• react包是核心, 提供创建元素, 组件等功能;
• react-dom包提供DOM相关功能等;

2. React的使用:

2.1 引入reat和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.2 创建元素并渲染到页面中;

<div id="app"></div>

<script>
     // params: 1. 元素名称; 2. 元素属性; 3~. 元素的子节点
     const title = React.createElement(
         "div", 
         class: "title", 
         "hello React",
         React.createElement(
             "h1",
             id: "hh1",
             "this is h1"
         ))
     // params: 1. 要渲染的react元素; 2. 挂载点
     ReactDOM.render(title, document.getElementById("app"))
 </script>

三、React脚手架的使用

1. React脚手架意义:

• 脚手架是开发现代Web应用的必备;
• 充分利用Webpack, Babel, eslint等工具辅助项目开发;
• 零配置, 无需手动配置繁琐的工具即可使用;
• 关注业务, 而不是工具配置;

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

2.1 初始化项目:

命令:

npx create-react-app my-app

PS:

• npx命令介绍:

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

• 推荐使用: npm create-react-app my-app来初始化项目

  • npm init react-app my-app
  • yarn create react-app my-app
    • yarn是facebook开发的包管理器, 可以看做是npm的替代品, 功能与npm相同;
    • yarn具有快速, 可靠和安全的特点;
    • 初始化新项目: yarn init;
    • 安装包: yarn add 包名称;
    • 安装项目依赖项: yarn
    • 其他命令, 参看: https://yarn.bootcss.com/docs/usage/

2.2 运行项目

npm start

3. 在脚手架中使用React

3.1 导入react和react-dom两个包:

./index.js

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

3.2 调用React.createElement()方法创建react元素:

3.3 调用ReactDOM.render()方法渲染react元素到页面中:

./index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const app = React.createElement(
  "div",
  class: "app",
  "hello React!!"
)

ReactDOM.render(
  app,
  document.getElementById('root')
);