React入门 - 03(初识 React 组件和 JSX)

最新推荐文章于 2024-08-15 16:27:19 发布

w-somebody

最新推荐文章于 2024-08-15 16:27:19 发布

阅读量761

点赞数 10

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/qq_37600506/article/details/135479664

版权

React 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了React组件的基础概念，包括如何在index.js中导入和挂载App组件，以及从函数组件到类组件的转换。重点讲解了JSX语法在React中的应用，展示了如何在JSX中嵌套HTML标签和自定义标签。

摘要由CSDN通过智能技术生成

本章内容

目录

1.初识 React 组件
2.关于 JSX

继上一节的工程案例，我们这一节主要了解一下 React组件和 “JSX 语法”。

前置知识点：ES6模块化&继承

1.初识 React 组件

1、打开 src/index.js文件（项目的入口文件）内容，我们可以看见 import App from './App',这个App其实就是 React中的一个组件。

2、接着我们点开 App.js文件，详细看看里面怎么定义 App这个组件。下面的代码是最新一版 React的组件定义的写法

import logo from './logo.svg'; // 引入一个logo图片
import './App.css'; // 引入 App 的样式文件

function App() {
  return (
    <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;

3、为了更好的了解学习 React语法，我们将 App.js的代码改为之前版本的类组件写法。运行后效果是一样的。

// 1、引入 React
// 2、引入 Component，用于创建的组件继承于Component
import React, { Component } from "react"; 

import logo from './logo.svg'; // 3、引入一个logo图片
import './App.css'; // 4、引入 App 的样式文件

// 5、使用 ES6 继承，创建一个 App继承于 Component
class App extends Component {
 // 6、给这个 App组件添加一个 render 方法
  render() {
  // 7、这个render 方法需要返回一个内容，内容多行的话可以使用 括号() 括起来
    return (
   // 8、这里返回的东西就是该组件想在界面展示的内容
      <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、App组件定义好了后，回到入口文件 index.js中

import React from 'react'; // 1、引入 react
import ReactDOM from 'react-dom/client';// 2、引入 react-dom 
import './index.css'; // 3、引入样式文件。在react可以通过这样的方式进行 css和js的分离，然后通过“模块”的方式嵌入到 js中
import App from './App'; // 4、后边的 ./App 其实是 ./App.js 的缩写。后缀可以省略，因为“脚手架工具”本身就会去当前目录下优先寻找后缀为 .js 的 App 文件并引入
import reportWebVitals from './reportWebVitals';// 5、测量应用程序中的性能时，用于记录其结果


// 6、通过 ReactDOM 的render 方法将 App 组件挂载到一个 DOM 节点上（这里是挂载到 id 为 root 的 DOM 节点上）
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


reportWebVitals(); // 监测性能

5、上面有说 App组件在 index.js文件中被挂载在 id为 root的节点上，那有同学就会疑惑这个节点是哪里来的呢？这就要说到 public文件夹下的 index.html文件了。在这个 HTML模版中，有一个 id="root"的 div，它就是用于承载网页的所有内容容器。所有的这些内容是由 React生成的（例如上面生成的 App组件，然后通过 ReactDOM.render()将组件挂载到这个root节点上，这样网页就显示出相应的内容。）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <!-- 下边这行代码意思是：
    如果网页把这个 script 给禁掉了，那么需要给用户一个提示说，
    “你应该允许你的网页去解析 JavaScript”。
    这是一段容错的代码，可以使代码的“健壮性”更强。
    -->
    <noscript>You need to enable JavaScript to run this app.</noscript>

  	<!--网页的所有内容都放在这个 id="root" 的div中-->
    <div id="root"></div>

    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

6、关于 index.js 和 App.js 文件中为什么有 import React form 'react'这段代码，是否有其必要性？答案是肯定的！！！

首先在 index.js文件中，因为我们需要挂载 App组件: ReactDOM.render(<App />, document.getElementById('root')),我们并没有直接写 App，而是使用像 HTML标签方式去使用 <App />,这是一种 “JSX 语法”，因此需要 import React from 'react'去引入 React,以便顺利的解析编译 JSX 语法。
同理，在 App.js文件中，render方法中 return返回的也是 ”JSX语法“，因此也需要引入 React

// App.js 文件

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

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