本章内容
目录
- 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><aclassName="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，用于创建的组件继承于Componentimport React, { Component } from "react"; import logo from './logo.svg'; // 3、引入一个logo图片import './App.css'; // 4、引入 App 的样式文件// 5、使用 ES6 继承，创建一个 App继承于 Componentclass 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><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>)}}export default App4、App组件定义好了后，回到入口文件 index.js中
import React from 'react'; // 1、引入 reactimport 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" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><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 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(, document.getElementById('root')),我们并没有直接写App，而是使用像HTML标签方式去使用,这是一种 “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><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>)}}export default App2.关于 JSX
从上面了解组件的过程中，我们知道了，在
React中，在JS中写 ”HTML 标签“称之为”JSX语法“。”JSX语法“不仅允许
HTML的所有标签，还可以用自己定义的标签
到此，本章内容结束！