郴州网站开发,网页打不开显示证书错误是怎么回事,宁波百度快照优化排名,wordpress首页文章插件本章内容 目录 1.初识 React 组件2.关于 JSX 继上一节的工程案例#xff0c;我们这一节主要了解一下 React组件和 “JSX 语法”。
前置知识点#xff1a;ES6模块化继承
1.初识 React 组件
1、打开 src/index.js文件#xff08;项目的入口文件#xff09;内容… 本章内容 目录 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 classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /pEdit codesrc/App.js/code and save to reload./paclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn 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 classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /pEdit codesrc/App.js/code and save to reload./paclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn React/a/header/div)}
}
export default App4、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.StrictModeApp //React.StrictMode
);reportWebVitals(); // 监测性能5、上面有说 App组件在 index.js文件中被挂载在 id为 root的节点上那有同学就会疑惑这个节点是哪里来的呢这就要说到 public文件夹下的 index.html文件了。在这个 HTML模版中有一个 idroot的 div它就是用于承载网页的所有内容容器。所有的这些内容是由 React生成的例如上面生成的 App组件然后通过 ReactDOM.render()将组件挂载到这个root节点上这样网页就显示出相应的内容。
!DOCTYPE html
html langenheadmeta charsetutf-8 /link relicon href%PUBLIC_URL%/favicon.ico /meta nameviewport contentwidthdevice-width, initial-scale1 /meta nametheme-color content#000000 /metanamedescriptioncontentWeb site created using create-react-app/link relapple-touch-icon href%PUBLIC_URL%/logo192.png /!--manifest.json provides metadata used when your web app is installed on ausers mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/--link relmanifest 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 willwork 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.--titleReact App/title/headbody!-- 下边这行代码意思是如果网页把这个 script 给禁掉了那么需要给用户一个提示说“你应该允许你的网页去解析 JavaScript”。这是一段容错的代码可以使代码的“健壮性”更强。--noscriptYou need to enable JavaScript to run this app./noscript!--网页的所有内容都放在这个 idroot 的div中--div idroot/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
/html6、关于 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 classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /pEdit codesrc/App.js/code and save to reload./paclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn React/a/header/div)}
}
export default App2.关于 JSX 从上面了解组件的过程中我们知道了在 React中在 JS中写 ”HTML 标签“称之为”JSX语法“。 ”JSX语法“不仅允许HTML的所有标签还可以用自己定义的标签
到此本章内容结束
