React入门

Q.ZHA

已于 2024-04-04 21:37:34 修改

阅读量752

点赞数 21

分类专栏：前端技术文章标签： react.js 前端前端框架

于 2024-04-03 23:17:09 首次发布

本文链接：https://blog.csdn.net/qq_21886255/article/details/137360136

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注意：阅读本文需要有一定的js，html，css基础。

1 简介

官网：React

React是目前前端届非常流行的框架，围绕React有三大技术：

1、react JS 用于编写网页应用（本文就是介绍此技术）

2、React Native 用于编写原生应用

3、React VR 用于编写Vr（全景视图应用）

React是在2013年由Facebook被开源，是使用人数最多的前端框架，有健全的文档和完善的社区，React16之后的版本被称为React Fiber,对底层的核心算法进行了很大的改良，引入了优先级、分片等概念。

2 环境搭建

1) 下载安装Node.js

2) 使用脚手架工具，在命令窗口依次执行以下命令：

npx crate-react-app appname
cd appname
npm start

为了下载速度更快，建议切换npm镜像源，执行下面的命令：

npm set registry http://registry.npmmirror.com

建议使用VsCode作为开发工具，完全免费，这里推荐几个代码补全的插件：

1、Reactjs code snippets 代码补全插件

2、React Redux ES6 Snippets

3、JavaScript (ES6) code snippets(es6代码片段)

4、Typescript React code snippets(这是tsx的react组件片段)

5、Path Intellisense（可自动提示补全引入的文件名）；

6、Prettier -JavaScript formatter（格式化）；

7、npm Intellisense（自动补全依赖包名）。

工程初始文件结构：

入口文件是index.js:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3 新增组件

组件名约定以大写开头

index.js中的App就是一个组件

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      //这种直接使用标签的语法叫jsx语法
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    )
  };
}

export default App;

4 列表的新增和删除

4.1 新增列表项：

list: [...this.state.list, 'hello']

4.2 删除列表项：

使用splice函数

delItem(index) {
    //不建议直接修改原列表，拷贝副本再赋值会有更好的性能和维护性，方便调试
    const list = [...this.state.list];
    list.splice(index, 1);
    //如果键与值参数名一致，则可直接写这么写就能赋值
    this.setstate({ list })
  }

5 组件之间的传参通信

5.1 父组件向子组件传参

父组件通过属性传参：

<Todoltem content={item}/>

子组件通过props接收参数：

<div>{this.props.content}</div>

5.2 子组件向父组件传参

通过调用父组件的方法来通信

父组件传递方法：

子组件调用方法：

6 引用样式

6.1 第一种：通过style属性

6.2 第二种：通过className

a.新增样式文件：

b.引入样式文件：

c 使用className引用样式：

7 UI库

常用的有三种：

Ant Design：这是一个由阿里巴巴团队开发的基于 React 的 UI 组件库，它提供了大量与 Element UI 类似的组件。
Material-UI：这是一个基于 Google 的 Material Design 规范的 React 组件库。
React Bootstrap：如果你喜欢 Bootstrap 的设计风格，那么可以使用这个基于 Bootstrap 的 React 组件库。

建议安装Ant Design库：

Step 1：npm 安装

npm install antd

Step 2：引入Ant Design的样式

Ant Design的组件依赖于它的样式文件，所以你需要在你的项目中引入Ant Design的CSS样式。在你的主要入口文件（通常是index.js或App.js）中，添加以下代码：

import 'antd/dist/antd.css'; // 引入Ant Design的CSS样式

Step 3：使用Ant Design组件

现在你可以在你的React组件中使用Ant Design提供的组件了。以下是一个简单的例子，展示了如何在React组件中使用Ant Design的Button组件：

import React from 'react';
import { Button } from 'antd'; // 从Ant Design中引入Button组件

const App = () => {
  return (
    <div>
      <Button type="primary">主要按钮</Button>
    </div>
  );
}

export default App;

8 按需加载

为了减小你的应用程序的体积，你可以使用babel-plugin-import插件来按需加载Ant Design的组件。首先，你需要安装这个插件：

npm install babel-plugin-import --save-dev
# 或者
yarn add babel-plugin-import --dev

然后，在你的.babelrc文件（或者babel.config.js）中配置这个插件：

{
  "plugins": [
    ["import", { "libraryName": "antd", "style": "css" }] // `style: true` for less
  ]
}

现在，当你从antd中引入组件时，babel-plugin-import插件会自动按需加载组件和样式。

其他更深入的用法请查看官网指引文档：React Reference Overview – React

（也有中文文档，但不建议看中文文档，一是因为可能翻译不准确，二是可能不能及时更新。）

参考资源：项目工程代码精简_React16.4 快速上手-慕课网