React基础

React基础

1. 介绍

React脚手架是一个预配置的项目结构,它可以帮助开发者快速启动新的React项目,而无需手动设置和配置所有必要的工具和依赖项。在本教程中,我们将使用Create React App (CRA),这是最流行的React脚手架工具之一。

2. 安装必要的工具

在开始之前,确保你的系统上安装了以下工具:

1. Node.js (推荐使用最新的LTS版本)
2. npm (通常随Node.js一起安装)

你可以通过在终端中运行以下命令来检查是否已安装这些工具:

node --version
npm --version

3. 创建新的React项目

使用Create React App创建一个新的React项目非常简单。打开你的终端,导航到你想创建项目的目录,然后运行以下命令:

npx create-react-app my-react-app

这个命令将创建一个名为"my-react-app"的新目录,其中包含一个基本的React项目结构。

4. 项目结构

进入新创建的项目目录:

cd my-react-app

让我们看一下CRA创建的项目结构:

my-react-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

• README.md: 项目说明文件
• node_modules/: 包含所有npm包的目录
• package.json: 定义项目依赖和脚本的文件
• public/: 包含静态资产的目录
• src/: 包含React源代码的目录

5. 启动开发服务器

要启动开发服务器并运行你的React应用,使用以下命令:

npm start

这将在 http://localhost:3000 启动开发服务器。

6. 修改应用

打开 src/App.js 文件,你会看到默认的App组件。让我们修改它:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My React App</h1>
        <p>This is a custom message in our modified App component.</p>
      </header>
    </div>
  );
}

export default App;

保存文件后,你应该能在浏览器中看到更改。

7. 添加新组件

在 src 目录中创建一个新文件 Greeting.js:

import React from 'react';

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

然后,在 App.js 中使用这个新组件:

import React from 'react';
import './App.css';
import Greeting from './Greeting';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My React App</h1>
        <Greeting name="React Developer" />
        <p>This is a custom message in our modified App component.</p>
      </header>
    </div>
  );
}

export default App;

8. 使用状态

让我们创建一个简单的计数器组件来演示如何使用状态。创建一个新文件 src/Counter.js:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

将这个组件添加到 App.js:

import React from 'react';
import './App.css';
import Greeting from './Greeting';
import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My React App</h1>
        <Greeting name="React Developer" />
        <Counter />
        <p>This is a custom message in our modified App component.</p>
      </header>
    </div>
  );
}

export default App;

9. 添加样式

你可以在 src/App.css 文件中添加自定义样式。例如:

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

button {
  font-size: 1rem;
  padding: 10px 20px;
  margin: 10px;
  background-color: #61dafb;
  color: #282c34;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #21a1c1;
}

10. 构建生产版本

当你准备部署你的应用时,运行以下命令来创建一个优化的生产构建:

npm run build

这将在 build/ 目录中创建一个可以部署到任何静态文件主机的生产就绪版本。