React 腳手架應用以及注意事項

構建 react 開發環境 ,

執行以下命令建立專案： $

$$ npm start

在安裝成功後開始使用腳手架

在使用react之前需要注意以下三點:

一 .  關於 class 的問題

在 react 中元素的 class 需要換成 classname

二 . 路徑的問題

1 . 如果要使用相對路徑引入有兩種方法:( 相對路徑用於請求 src 下面的)

每個元件類中引入當使用相對路徑的時候，這個必須放在src中。

a . 直接在元件類的模板中通過 require("檔案的相對路徑") 引入

<

img 
src= 
alt=""
/>

// 引入並定義

// 在模板中使用
<
div 
classname
>
<
img 
src= 
alt=""
/>
div>

因此,我們的 ajax 請求和 鉤子函式 的路徑就相對於 index.html , 下面是 ajax請求本地檔案 aa.txt 例項

import react,  from 'react';

import axios from "axios";
// 建立類元件 元件類的建立方法
//　　　　第一 react.createclass()  最開始的
//　　　　第二 class heads extend component{}
//　　　　第三 建構函式

class slide extends component 

}render() 
alt=""
/>
div>
div>
); }
componentdidmount())
}.bind(this))
.catch(function (err) )
}}export default slide;

// title 與上面元件中的值對應 

事件通常和 this  有關,下面是關於事件的例子

import react,  from 'react';

class heads extends component 
this.fn=this.fn.bind(this)
}fn())
} render() 
>
h3>
div>
); }
}export default heads;

ajax請求和鉤子函式 路徑就要相對index.html，所以資源需要放在public下,因為public是靜態資源。

React腳手架配置less

安裝完react腳手架以後，是不支援less的，也不支援less的巢狀樣式，需要我們在webpack.config.js中配置一下。解決的問題 1 全域性安裝 3 進入專案資料夾並啟動 npm start npm i less less loader安裝完腳手架之後，我們在目錄結構中看不到webpa...

react腳手架打包的坑

首先看一下打包後的build檔案 相當於靜態資源的根目錄就是public檔案，開發中所需要的或其他資源就放在public資料夾下，比如這裡img檔案中的，在任何元件中可以直接通過 img 1.jpg來獲取1.jpg這張，但是如果通過cnpm run build打包後，用本地路徑就訪問不到該路徑資源了...

react腳手架解決跨域

配置 方法一.axios proxy 找檔案 node modules react scripts config webpackdevserver.config.js 通過正向 去獲取資料，解決跨域問題 proxy 2.改package.json scripts 3.專案根目錄下建立 config ...