01｜创建一个React项目并理解 JSX 语法

拜托啦俊酱丶
603 阅读4分钟

前言

我发现很多刚刚接触 React 或很多还未接触 React 的朋友都会觉得 React 很难，是自己学习路上的一座大山，从而打算放弃学习或使用 React。老实讲，最开始我也是一样的，我一开始就想着使用 vue 就好了，后来因为工作需要，项目要使用 React，并且没有一个引路人教我如何使用 React 以及理解其中的概念，当时的我真的觉得 React 烦，怎么写起来这么难受，页面怎么不更新啊！！！明明已经 setState 了啊！！！怎么回事啊，到底要怎样啊，文档也看不明白到底怎么回事！！！我怎么这么菜啊！！！

image.png

所以这个系列我们准备这样安排：

首先我们先来学习 React 的基本用法（小的 demo 实现）

同时会帮助你理解一些 React 中的概念

进而写一些业务需求来帮助你真正的学会 React 来做项目

一、安装与使用

一般来讲项目都会使用现成的脚手架在创建，所以我这里就不从零配置一个webpack项目了，这个可以考虑以后单独出一个坑

使用 create-react-app 来创建项目即可。因为我习惯于使用 TypeScript，所以我这里在创建时加上--template typescript来创建项目，你可以根据自己的喜好来选择。

// yarn
yarn create react-app <app-name> --template typescript

// npx
npx create-react-app <app-name> --template typescript

<app-name>的内容看你想去什么样的名字，我这里就使用study-react。

这两种方式都可以，一种是安装了yarn，npx的是安装了npm，自行选择即可。

yarn create react-app study-react --template typescript

在 vscode 中打开目录如下

image.png

首先我们先看 package.json 文件，我们重点关注scripts部分，里面有如下几个命令：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

我们分别来解读这几个命令

  1. start我们本地开发时启动项目的命令，如在终端输入yarn start就会在本地构建一个服务来启动项目
  2. build打包命令，运行该命令后会将src目录下的文件进行打包，输出一个dist目录，这里就是将来部署到服务器然后运行到浏览器中的代码
  3. test进行测试的命令，运行这个命令后会执行src目录下的 xxx.test.tsx文件，测试不在我们的讨论返回内，就不多赘述了，不过值得强调的是，测试很重要。
  4. eject运行以后会将webpack的配置暴露出来，这个操作是不可逆的，如果自己对webpack特别熟悉可以使用，但我还是建议如果需要配置webpack还是使用其他方式去配置，这个我们后面会讲。

了解了这些，我们来运行一下项目

yarn start

# OR
npm run start

如果你的3000端口没有被占用的话，一般浏览器就会打开这个项目，地址为http://localhost:3000

tips：记得把 src/index.tsx 中的 React.StrictMode 组件去掉

二、JSX语法

在React中，我们一般都是以JSX语法来进行开发的，我们看一下App.tsx文件

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</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;

我们可以看到，"html标签"作为了 App 函数的返回值。实际上，你看到的"html"并不是真正的html，它其实就是JavaScript代码，只不过是它我们书写时以这种形式书写，最终它会经过Babel编译转化为JavaScript代码，我们到👉 Babel 中看一下。为了方便阅读，我把代码贴出来。 编译之前👇

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>aaa</p>
      </header>
    </div>
  );
}

function C() {
  return <App />
}

编译以后👇

"use strict";

function App() {
  return React.createElement(
    "div",
    { className: "App" },
    React.createElement(
      "header",
      { className: "App-header" },
      React.createElement("img", {
        src: logo,
        className: "App-logo",
        alt: "logo"
      }),
      React.createElement("p", null, "aaa")
    )
  );
}

function C() {
  return React.createElement(App, null);
}

我们可以发现我们写的jsx语法其实就是调用一个个的React.createELement

  1. 其中createElement的第一个参数是创建的组件类型
  2. 第二个参数是传给组件的属性，也就是 props
  3. 而第三个参数开始的后续参数就是组件的子组件，即 children

所以，看到这里，我们以后看到 JSX 语法，就要把它当成 JavaScript 来看待，并当作 JavaScript 来使用。

三、小作业

在这里，我留一个小作业，希望你能够完成。作业内容如下：

希望你能够在浏览器控制台中去查看 React.createElment 调用后的结果，也就是下面的console.log(jsx)，来理解React.createElement究竟做了什么。

function App() {
  const jsx = <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>aaa</p>
      </header>
    </div>
        
  console.log(jsx)
  
  return jsx
}

下一节，我们将会学习如何在 React 中使用状态，更新状态，如何应对状态更新的坑点。

image.png

avatar
文章
阅读
粉丝