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

文章目录

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

可能会出现的问题1：

端口占用
解决：结束进程

可能会出现的问题2：

出现类似这样的问题，请查询一下npm的版本是否在5以上：

若版本在5以上，解决方法如下：
1.npm i npm@5 –g，将npm降级，重复上面安装步骤
2.不降级npm，在cmd中输入 npx create-react-app my-app，当前目录下创建一个名为my-app的工程，命令行窗口中将会显示依赖库的一些日志，然后cd 项目文件名称再npm start

项目目录结构

Node_modules 用来存放用包管理工具下载安装的包的文件夹

Public 公共资源

Favicon.ico 图标
Index.html 项目首页的html模板

Src 源文件

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

//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之前。