React基础入门 - 技术栈

文章目录

react是目前最流行的前端框架，几乎也不用太介绍了。

创建项目

首先下载node.js，安装成功后，最好换成国内的源

复制代码

npm config set registry https://registry.npm.taobao.org

然后就可以使用脚手架创建一个项目了

复制代码

npx create-react-app hello-world

然后进入新建的目录，就可以运行并体验这个项目了

复制代码

>cd hello-world
>npm start

服务开启后，会自动在浏览器中弹出项目地址localhost:3000，就可以看到这个示例了。

打开项目文件，将App.js中的App函数改成下面这种最简单的形式

js 复制代码

function App() {
  return (
    <p>微小冷</p>
  );
}

则网页内容变为

由此可知，App.js文件中，App函数的返回值，最终呈现在了网页中。但网页的标题以及图标显然不是我们自行设计的，说明React的逻辑是，把App的返回值嵌入到了某个网页之中。

在浏览器中按下F12，可以查看html代码，这个网页对应的html文件，实则是public文件夹下的index.html文件。将其删至最简

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>微小冷</title>
  </head>
  <body>
    <noscript>这里可以放js语句</noscript>
    <div id="root"></div>
  </body>
</html>

这样网页标题也变成了微小冷。

组件和事件

React提供了一系列UI组件，这些组件都以大写字母开头，有了这些，就可以创建一个用户友好的应用程序。接下来在页面中添加一个按钮，首先创建一个按钮函数

js 复制代码

function OneButton(){
  function handleClick(){
    alert("你好！")
  }
  return (
    <button onClick={handleClick}>微小冷</button>
  )
}

其中嵌套的handleClick就是按钮点击事件，其返回值则是一个携带了点击事件的按钮。然后更改一下主函数

js 复制代码

function App(){
  return (
    <OneButton/>
  );  
}

export default App;

效果如下

更新状态

当App返回一个按钮后，这个按钮的属性往往是已经确定了的，如果想更改按钮显示的内容，就需要引入useState。

js 复制代码

import {useState} from 'react';

然后通过useState更新按钮组件

js 复制代码

function OneButton(){
  const [count, setCount] = useState(0);
  function handleClick(){
    setCount(count + 1);
  }
  return (
    <button onClick={handleClick} 
      style={{width:100, height:40, fontSize:20}}> 
      点了{count}次
    </button>
  )
}

效果如下

导出组件

上述代码将按钮写在了App.js中，当代码量较少的时候当然没有问题，但随着组件越来越多，这种写法会让整个项目变得混乱起来，为此，可将组件写到单独的文件里。

在App.js的同级目录下新建Btn.js，内容如下

js 复制代码

import { useState } from 'react';

export default function OneButton(){
    const [count, setCount] = useState(0);
    function handleClick(){
      setCount(count + 1);
    }
    return (
      <button onClick={handleClick} 
        style={{width:100, height:40, fontSize:20}}>
        点了{count}次
      </button>
    )
}

函数OneButton和在App.js中相比，多了一个export default的修饰，表示该函数可以导出给其他组件调用。

然后修改App.js的内容，在挪走了OneButton之后，还要通过import的方式将其导入进来，如下所示。由于这个改动并未引起功能上的变化，效果与上面相同。

js 复制代码

import Btn from './Btn.js';

function App(){
  return (
    <OneButton/>
  );  
}

export default App;

jsx

jsx相当于把html装入了js，使得前后封闭的html标签可以嵌入js代码中，很多js库都支持这种扩展语法，react亦然。例如上面的OnButton函数便是典型的jsx语法，在return后面的括号里，出现了html特有的封闭尖括号。

这段代码体现出jsx中花括号的两个用法

单花括号，可调用js中的变量
双花括号，可用于设置css样式

由于要嵌入一门编程语言，所以jsx的语法要比html更加严格，主要体现在

每个组件只能返回一个根元素
标签必须闭合
命名避免与js发生冲突