项目结构与组件拆分

React.JS是一个流行的JavaScript库，用于构建用户界面。在本教程中，我们将讨论React.JS的基础知识，并创建一个实战项目来演示如何使用React.JS构建一个简单的应用程序。

1. 项目结构

首先，让我们创建一个新的React项目。假设你已经安装了Node.js和npm，打开你的命令行工具，运行以下命令：

npx create-react-app my-app
cd my-app
npm start

这将创建一个名为my-app的新React应用程序，并启动开发服务器。现在，打开你的代码编辑器，并浏览到my-app/src目录。在这里，你将看到一个名为App.js的文件，这是React应用程序的入口文件。

2. 组件拆分

为了更好地组织我们的代码，我们将创建多个组件来构建我们的应用程序。首先，让我们创建一个名为Header.js的新组件，用于显示应用程序的标题和导航栏。在src目录下创建一个新文件Header.js，并添加以下代码：

import React from 'react';

function Header() {
  return (
    <div>
      <h1>My React App</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </nav>
    </div>
  );
}

export default Header;

接下来，让我们在App.js中引入Header组件，并在App组件中使用它。修改App.js文件如下：

import React from 'react';
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
      <h2>Welcome to my app!</h2>
    </div>
  );
}

export default App;

现在，当你在浏览器中查看应用程序时，你将看到一个包含标题和导航栏的页面。接下来，你可以继续创建其他组件来构建完整的应用程序。

结论

在本教程中，我们讨论了React.JS的基础知识，并创建了一个简单的React应用程序。我们学习了如何创建和使用组件来构建应用程序，以及如何组织项目结构。希望这对你有帮助，继续学习React.JS并构建更复杂的应用程序！