antd pro学习之react扫盲学习（二）

最新推荐文章于 2024-04-30 10:00:00 发布

五月龙马

最新推荐文章于 2024-04-30 10:00:00 发布

阅读量279

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/weixin_41973878/article/details/105991928

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现简单的页面输出

在生成的react脚手架中，

1. public/index.html

<!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>
    <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 <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>

可以看到

，div用来作为根节点实现其他组件的渲染

2. src/index.js
ReactDOM.render 为react 的渲染方法，参数1：要被渲染的组件，参数2：将参数1渲染到哪个dom节点

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';  //引用App.js中导出的App组件
import * as serviceWorker from './serviceWorker';


//ReactDOM.render 为react 的渲染方法， 参数1：要被渲染的组件，参数2：将参数1渲染到哪个dom节点
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

3. src/App.js
return中看起来和html很像的是 JSX
export default 导出组件以便在其他地方引用，如这里是在index.js中被引用了，组件名首字母必须大写

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

function App() {
//return中看起来和html很像的是 JSX 
  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 导出组件 以便在其他地方引用，如这里是在index.js中被引用了，组件名首字母必须大写
export default App;

小结：
（1）组件名首字母必须大写，如果不是大写，则引用了在页面上也不会有任何显示，且不报错；
（2）导出组件用 export default ，要引用组件用 import 组建名 from 所在路径；
（3）css文件的引用需要带.css后缀，js组件的引用不需要带.js后缀；

大致了解了这些后就可以开始写自己的组件了

五月龙马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
antd pro学习之react扫盲学习（二）

实现简单的页面输出在生成的react脚手架中，1. public/index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /&g...
复制链接

扫一扫