新人全栈工程师的React练习（1） - 创建React项目并上传Github工作了好几年之后，才发现，好像自己从来没有

工作了好几年之后，才发现，好像自己从来没有记录自己做过的事情的习惯，所以现在尽量把自己的练习、自己做过的项目都记录下来吧。

我原本是Java工程师，最开始做的是Spring这一套。

后来留学，重新找工作，第一份工作偏向于前端，做了JavaScript、CSS、HTML这些基础的东西，用它们在一个叫AEM的平台上写网页组件（component），然后把一个一个组件拼接成完整的网页和网站。

后来公司效益下滑，经历了人生第一次裁员。也是从这时候开始，知道“居安”是真的要“思危”的。于是想把自己的技术提升一下。

我的目标应该是一个Full Stack Developer，现在找工作阶段，准备以React+Java+PostgreSQL作为我的技术栈做一个项目，用来找工作。（不过好像React很多时候和Nodejs联系在一起的，不知道为什么，没去查过这个问题）

=======

好了，开始记录自己做的React的练习吧。

真的是超小的练习了。

在Github上创建一个仓库（Repository）

将创建的仓库clone到本地（复制仓库地址->在vscode中用git clone 地址）

在这个仓库中创建React项目。使用这个命令：

npx create-react-app my-first-step

进入这个项目中，运行它

cd my-first-step
npm start

这会自动在浏览器中打开 http://localhost:3000/，显示 React 默认首页。

我们找到src/APP.js这个文件，替换成以下内容（这是chatgpt生成的）：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [showMessage, setShowMessage] = useState(false);

  const handleClick = () => {
    setShowMessage(true);
  };

  return (
    <div className="App" style={styles.container}>
      <h1 style={styles.title}>我今天完成了第一件小事：我整理了书桌。</h1>
      <button onClick={handleClick} style={styles.button}>我准备开始下一步</button>
      {showMessage && <p style={styles.message}>你已经走在进步的路上！继续加油 💪</p>}
    </div>
  );
}

const styles = {
  container: {
    textAlign: 'center',
    marginTop: '20vh',
    fontFamily: 'Arial',
    padding: '20px',
  },
  title: {
    color: '#333',
  },
  button: {
    padding: '12px 24px',
    fontSize: '16px',
    marginTop: '20px',
    cursor: 'pointer',
    backgroundColor: '#222',
    color: '#fff',
    border: '2px solid white',
    borderRadius: '50px',
  },
  message: {
    marginTop: '20px',
    fontSize: '18px',
    color: '#006400',
  },
};

export default App;

点击保存，网页就会自动刷新成新的内容了。

=====

这就是我今天做的内容了。至少有了一个开始，不错不错。