React学习：脚手架搭建、antd引入-学习笔记

╰+攻爆jí腚メ 2022-08-29 05:42 128阅读 0赞

### 文章目录 ###

*   *  React学习：脚手架搭建、antd引入-学习笔记
     *   *  脚手架搭建
         *  项目目录结构
         *  antd引入
         *  antd附加：数据可放置的三个位置

## React学习：脚手架搭建、antd引入-学习笔记 ##

### 脚手架搭建 ###

`npm install -g create-react-app` //安装  
`create-react-app react-demo` // react-demo 项目的名称  
`cd react-demo` //cd 进入下一级  
`npm start` //npm run start  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]  
**可能会出现的问题1：**  
![在这里插入图片描述][a24874ffe7fd4327848f058b41b59f16.png]  
端口占用  
解决：结束进程

**可能会出现的问题2：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]  
出现类似这样的问题，请查询一下npm的版本是否在5以上：  
![在这里插入图片描述][084afe25f6744b08a49ebfee51f02acf.png]  
若版本在5以上，解决方法如下：  
1.`npm i npm@5 –g`，将npm降级，重复上面安装步骤  
2.不降级npm，在cmd中输入 `npx create-react-app my-app`，当前目录下创建一个名为my-app的工程，命令行窗口中将会显示依赖库的一些日志，然后cd 项目文件名称 再`npm start`

### 项目目录结构 ###

![在这里插入图片描述][834f5146a8f148b9a7bd260cf0fb2481.png]  
`Node_modules` 用来存放用包管理工具下载安装的包的文件夹

`Public` 公共资源  
![在这里插入图片描述][6fd5070862e1402384e38f677ca2a51c.png]  
`Favicon.ico` 图标  
`Index.html` 项目首页的html模板

`Src` 源文件  
![在这里插入图片描述][1e37862f5eba4f798ec7c1a260de9bd1.png]  
src目录,项目开发最重要的文件，放置所有源代码

App.css
    App.js
    App.test.js 自动化测试文件
    index.css
    index.js     整个工程入口
    logo.svg
    serviceWorker.js

在https协议的服务器上，当用户第一次访问的时候需要联网才能看到网页，但是一旦用户访 问完网页然后断网，并且引用了下面的文件，即使断网，第二次访问的时候，依然可以看到之前访问的页面。serviceWorker协助将之前的网页存储在浏览器之内。

.gitignore  git配置
    Package.json   项目依赖文件
    README.md   说明文档
    Yarn.lock     文件备件及避免意外修改

`Yarn.lock`此文件会锁定你安装的每个依赖项的版本，这可以确保你不会意外获得不良依赖；并且会避免由于开发人员意外更改或则更新版本，而导致糟糕的情况。

### antd引入 ###

Ant Design网址：[https://ant.design/index-cn][https_ant.design_index-cn]

//import React from 'react';
    import React,{ Component} from 'react';
    import logo from './logo.svg';
    import './App.css';
    import {  Button } from 'antd';
    import 'antd/dist/antd.css'
    //导入组件
    import Home from './project/index'
    
    //组件定义二种方式 
    // function App() { 
    // return (
    // <div className="App">
    // <header className="App-header">
    // <img src={logo} className="App-logo" alt="logo" />
    // <p>123456
    // 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;
    
    //几种不同的定义组件方式
    //一、es6箭头函数
    // const App =()=> (
    // <div className="App">
    // 123456
    // </div>
    // );
    
    // export default App;
    
    //二、es6 class类
    // class App extends React.Component { 
    // constructor(){ 
    // super();
    // this.state ={ }
    // }
    // render(){ 
    // return (
    // <div className="App">
    // 99999
    // </div>
    // )
    // }
    // }
    // export default App;
    //二、es6 class类 简洁
    class App extends Component { 
      render(){ 
        return (
          <div className="App">
                { /* <Button type="primary">Button</Button> */}
                <Home />
          </div>
        )
      }
    }
    export default App;

### antd附加：数据可放置的三个位置 ###

**1、constructor()\{\}内，如下图中this.dataSource；**  
**2、Component\{\}内，如下图中的columns；**  
**3、render()\{\}内，return之前。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20220829/cf9885a76e2b484bb7dd47b339a1d131.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/5cb60468fce542a9be5c1a5b753d7bd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/9d549213cc1240cab7073dac89e1a291.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/43dcf5b1a03040c1b4cd1ee901cb2541.png
[a24874ffe7fd4327848f058b41b59f16.png]: /images/20220829/55f71b3b308f449eabf06827eed3edde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/b3352f9c313d4a46a08411ac01944d20.png
[084afe25f6744b08a49ebfee51f02acf.png]: /images/20220829/f9b5fd55aa364fff98ba6ee819452397.png
[834f5146a8f148b9a7bd260cf0fb2481.png]: /images/20220829/256366cafab64566bc9f4f0c522d883b.png
[6fd5070862e1402384e38f677ca2a51c.png]: /images/20220829/bc88d697e7434cfb93f177892dedabc2.png
[1e37862f5eba4f798ec7c1a260de9bd1.png]: /images/20220829/c1b720ba91fd41218c9fbc1aca28c96f.png
[https_ant.design_index-cn]: https://ant.design/index-cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/7013271a539843faa1b88401d32225ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/7ebf47a026664085877fd6f5f15ea20f.png