文章目錄

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

總結

以上是生活随笔為你收集整理的React学习：脚手架搭建、antd引入-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。