react快速入门教程

核心知识点

1. 创建新项目

2. 基本语法

3. 创建组件和引入

4. 页面路由配置

5. 创建新页面

创建新项目

https://reactjs.bootcss.com/learn/start-a-new-react-project

要安装Nodejs，18以上版本，确认node -v 和 npm -v 都能显示版本号，然后执行下面命令：

npx create-react-app my-app

// 安装成功后执行
cd my-app
npm start

引入页面内组件

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

引入外部组件

Header.js

import './Header.css'; // 引入样式文件

const Header = () => {
  return (
    <header className="header">
      <div className="logo">
        <h1>My App</h1>
      </div>
      <nav className="nav">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

App.js

import './App.css';
import Header from './Header';

function App() {
  return (
    <div className="App">
       <Header />
        <h2>内容区域</h2>
    </div>
  );
}

export default App;