要在React上使用Github Pages而不使用Create React App (CRA),可以按照以下步骤进行操作:
首先,确保您已经在本地安装了Node.js和npm。
在您的项目根目录中初始化npm,运行以下命令:
npm init -y
npm install react react-dom
index.html
的文件,并将以下代码复制到文件中:
React App
index.js
的文件,并将以下代码复制到文件中:import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( , document.getElementById('root'));
App.js
的文件,并将以下代码复制到文件中:import React from 'react';
function App() {
return (
Hello, World!
);
}
export default App;
webpack.config.js
的文件,并将以下代码复制到文件中:const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
],
},
};
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
package.json
文件中添加以下脚本:"scripts": {
"build": "webpack",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
npm install gh-pages --save-dev
npm run build
npm run deploy
这样就可以将React应用程序部署到Github Pages,您可以通过访问 https://your-username.github.io/your-repo-name
来查看部署的应用程序。
请确保将 "your-username"
替换为您的Github用户名,"your-repo-name"
替换为您的仓库名称。