create-react-app 創建項目 及 配置


一、使用 create-react-app 創建項目:https://blog.csdn.net/wisherg/article/details/89685000 (推薦,react開發看下這篇文章)

  1、使用腳手架,創建好初始化的項目:https://www.runoob.com/react/react-install.html

  2、刪除 項目中 src文件夾里所有文件,並創建一個新的index.js,並拷貝如下代碼到此文件:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<div>Hello World!</div>, document.getElementById('root'));

    刷新頁面見效果

  3、ReactDOM.render里面的渲染的html判斷,可以寫成組件引入。在src目錄中創建一個 app.js 文件(即app組件),內容如下:

import React from 'react';

const App = () => (
<div>This is App</div>
);

export default App;

  

二、修改 create-react-app 配置

1、端口號修改:https://www.jianshu.com/p/80a7603dda70(親測有效)

   在 根據 package.json 的啟動,node_modules文件夾里面搜索react-scripts

2、配置 px 自動轉 rem 的適配:https://blog.csdn.net/qq_43258252/article/details/87867560(親測有效)

   注意:a、配置 config/webpack.config.js 文件,需要先運行 npm run eject 命令(默認webpack的配置文件都是沒有的,運行這個命令才能調出來)

      b、運行 npm run eject 命令(會修改package.json 文件,不可回退),要求 git 必須提交了代碼,不然會報錯。  https://blog.csdn.net/qq_38238041/article/details/85038184

3、項目 部署到非根目錄下,react配置:https://blog.csdn.net/zeroyulong/article/details/86524340

4、配置 less:https://www.jianshu.com/p/d5dd8b108461

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM