LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

Reast自学篇-1

2022/4/21 开发 开发 React 前端 学习

Reast自学篇-1

想不到吧，鸢月又开始学前端框架啦

[scode type=”yellow”]警告:鸢月没有系统学习过HTML&CSS&JS，学习的一切目的皆为快速构建一个前端，而并非用于生产环境，鸢月的商业项目都是专门前端来写的，请注意[/scode]

简介

这将是一个连续的系列，记录我学习Reast框架的过程，这一定会很有意思

[1.0]Reast到底是啥

本质就是一个构建界面的js库

但是他采用了声明式的语法，让创建前端变得高效可用

同时支持组件库的功能可以让他快速进行开发

同时APP的形式让他可以几乎在全平台分发。这都是React的优势

[1.1]初始化一个React项目

官方给的方式特别简单，就用官方的方式来

安装条件

  • 一个比较新的Node.js（我是16版本）
  • 一个空路径

安装命令

找到一个空文件夹，在空文件夹下打开你的终端，输入以下命令

[scode type=”info”]请注意my-app可以自定义名称，但是不要用中文[/scode]

[scode type=”info”]这里不是拼写错误，就是npx[/scode]

npx create-react-app my-app

这里可能会卡一会，取决于网速

初始化中

完成后你的本地将会有一个和 my-app一样名称的文件夹，他就是你的React项目的路径了

这里就成功了

文件位置

我们进入目录后输入下面这个命令就可以看到我们创建好的项目了

cd my-app #这里自行平替为你设置的名称
npm start

按照常理来说，这里你就能看到启动成功的信息了

启动成功

这时，打开下面那个url，就可以看到初始化页面了

主界面

看到这里就说明OK了

[1.2]React目录结构体

React与传统的webpack的目录结构非常相似，一般长这样

image-20220422094958162

只需要记住 index.css是全局引入的一个css文件

index.js是用来存放渲染和节点引入的，在里面需要导入 React这个包，同时也需要引入我们的根组件，具体如下

// React 核心包
// ReactDOM 专门做渲染的（两个都要）
import React from 'react';
import ReactDOM from 'react-dom/client';
// 全局样式文件
import './index.css';
// 引入根组件
import App from './App';

// 渲染根组件APP 到一个id为root的Dom界面,这个页面在Public文件夹下的index.html下
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

app.js就是我们 index.js所引入的那些组件了

[1.3]启动一个HelloWorld

是时候来一个快乐的HelloWorld了

首先我们先清理下目录，清理来和我上面那个样子一样

然后我们开始编写App.js

// 声明一个常规变量变量
const name = "kitemoon"
function App() {
  return (
    <div>	<div>HelloWorld</div>
      <p>名字叫:{name}</p>
    </div>
  );
};
export default App;

保存后，不出意外你的网页会出现这样

我们这样就创建了一个HelloWorld了，非常简单吧，我们这边可以简单解析下

const name = "kitemoon"

有过编程基础的我都不想讲了。。。。const常量 name变量名 kitemoon变量值 对了，我试了下字符串需要双引号哦

function App() {
  return (
    <div>	<div>HelloWorld</div>
      <p>名字叫:{name}</p>
    </div>
  );
};

这一串代表一个函数，该函数为会被注册为一个组件(可以理解为是一个页面中的一部分)，这个组件会在 index.js 被导入并且渲染到对应的DOM

别说你们，我看着都懵逼，画张图

这样来看，首先index.js导入了App.js那个函数所创建的组件，然后根据注册要求注册到对应index.html的一个标签。

其实本质上，那个组件里面的内容就是 return内的内容，我们在return中写入了一些 div标签，这样在组件被导入并注册到页面后，注册的标签所对应的内容就是return的html代码。

但是大家可能注意到了，我们用到了一个很神奇的东西 {name}，这种大家可以理解为vue的模板语法，但是其实更高级些，他叫做jsx，一种把js和xml合在一起的神奇玩意，既然他有js，那就可以跑js语法。

同时jsx不止是 {name}这样的，他也是长成这样的 const name = "kitemoon"，你要是无聊，甚至可以写个这个 const ss = alert("hihi")。

但是你光是这样可不能运行，在React中，创建常量后还是需要调用下，才能触发，也就是说，你需要把它任意渲染一下，才能触发里面的js。

export default App;

就是es6模块系统，导出的就是组件，不导出的话没法调用

[1.4]列表渲染

列表渲染很简单，但是vue的朋友们可不要直接套v-for，没这玩意，React中用的是map来导出列表并处理信息。具体代码如下

const todo = [
  {
    "ID": 1,
    "title": "洗衣服"
  },
  {
    "ID": 2,
    "title": "买裤子"
  },
  {
    "ID": 3,
    "title": "打游戏服"
  }
]
function App() {
  return (
    <div>
      <ul>
        {
          todo.map(item => <li key={item.ID}>{item.title}</li>)
        }
      </ul>
    </div>
  );
};

我们来看看

首先建立一个列表，列表内是一个个对象

然后我们开始对外返回值，返回的时候我们添加标签 <ul>，现在就是重点了

我们要使用JSX来实现循环

{ todo.map(item => <li key={item.ID}>{item.title}</li>) }

首先，todo是我们那个列表对象，通过map将其导出，导出后使用箭头函数渲染到一个 li标签，<li key={item.ID}>是需要提高diff性能所采用的索引，li标签被的则是我们需要导出得到值，循环导出后，我们就实现了列表循环

这样就完成了列表渲染
img_show