开始前，请阅读我的其他几篇文章
《用谷歌云自建微软GitHub codespaces和VScode.dev云编译Cloud IDE是怎样一种体验？》
《谷歌云双飞微软VSCode和谷歌Android Studio云端远程开发环境云开发自己的爱啪啪APP》
《如何将 Node.js 更新到最新版本 {Linux、Windows 和 macOS}》
1.准备工作
我们将用到以下全栈技术搭建tiktok
Firebase hosting, realtime database
Material UI
CSS hacks #Flexbox #Snap functionality
3rd Party UseRefhooks
599块钱的小米手机登陆vscode开始复制粘贴我的代码
但是作为高级码农的你懂得为什么要粘贴复制我的代码原理
2.浏览器远程登陆VScode创建reactjs项目
terminal中输入以下命令行
npx create-react-app tiktok
直到看到happy coding再输入
npm start
浏览器回弹出
http://localhost:3000/
3.创建firebase项目
将firebase SDK代码
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.4/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.4/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyAWUAuIq-1oiOm06W7cTtzseXbXfilL7ZU",
authDomain: "tiktok-f4fd0.firebaseapp.com",
projectId: "tiktok-f4fd0",
storageBucket: "tiktok-f4fd0.appspot.com",
messagingSenderId: "531807740092",
appId: "1:531807740092:web:6fa520d11bd468294370b9",
measurementId: "G-2EMCNB20DX"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
添加到vscode中tiktok>src位置
bash添加firebase CLI到vscode>tiktok，代码如下
npm install -g firebase-tools
firebase login
firebase init
4.在tiktok>src>App位置输入以下代码
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<h1>卧槽你真鸡巴可爱！</h1>
</div>
);
}
export default App;
在vscode的terminal位置输入
npm start