从0开始学前端 第四十五课：引入React创建第一个react项目

第四十五课：引入React创建第一个react项目

学习目标

通过本课的学习，你将能够：

1. 理解React的基本概念以及它在现代网页开发中的作用。
2. 成功设置React的开发环境。
3. 创建并运行你的第一个React应用，了解React的基础结构。

学习内容

1. 认识React和它的用途

• 概念: React是一个用于构建用户界面的JavaScript库，专注于构建组件化的前端界面。React的核心特性包括声明式编码、组件化结构和虚拟DOM等。

• 用途: React被广泛用于构建单页应用程序(SPA)，这些应用程序可以在客户端进行路由处理，动态地渲染内容，从而为用户提供流畅的体验。

2. 设置开发环境

• 安装Node.js和npm: 访问Node.js官网，下载并安装适合你操作系统的Node.js版本。npm会与Node.js一起安装。

  # 使用以下命令检查Node.js和npm是否已正确安装：
  node -v
  npm -v
  

  这些命令会输出Node.js和npm的版本号，确认它们已经安装。

• 使用npx创建React应用:

  # 在你想要创建项目的目录中运行以下命令：
  npx create-react-app my-first-react-app
  # 这会创建一个名为“my-first-react-app”的新文件夹，其中包含了启动React项目所需的所有文件和配置。
  

3. 创建第一个React应用

• 项目结构说明:

  • public/index.html - 应用的静态HTML文件，React会在这里挂载你的App组件。
  • src/index.js - 应用的入口点，引入React模块和App组件，渲染到页面上。
  • src/App.js - 一个简单的React组件，你可以在这里开始编写你的第一个React代码。

• Hello World 示例:

  // src/App.js
  import React from 'react';
  import './App.css';
  
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Hello, World!</h1>
        </header>
      </div>
    );
  }
  
  export default App;
  

  在这段代码中，你创建了一个函数组件App，它返回一个包含“Hello, World!”标题的JSX元素。

• 运行和预览应用:

  # 在项目目录中运行以下命令来启动开发服务器：
  npm start
  

  这个命令将启动一个开发服务器，并在默认的Web浏览器中打开一个新的标签页显示你的React应用。

• 预计输出: 一个包含“Hello, World!”的网页，显示了你的React应用。

课后练习

1. 安装环境: 确认你的计算机已安装Node.js和npm。
2. 创建项目: 使用create-react-app创建一个名为practice-react-app的新React项目。
3. 修改代码: 编辑src/App.js，将标题改为“Welcome to React”并添加一个你选择的段落描述文字。
4. 运行应用: 使用npm start命令运行你的项目，并在浏览器中查看变化。

练习解析

• 这个练习旨在帮助你理解React项目的基本结构，并通过简单的代码变更来实践JSX的使用。
• 当你运行npm start，你应该能看到你的更改反映在Web浏览器中。这体现了React的即时渲染能力。
• 如果在运行应用时遇到任何问题，请检查命令是否在项目的根目录中执行，以及是否正确修改了App.js文件。

通过这个练习，你将开始熟悉React的基本工作流程，包括编辑组件和实时预览更改。

---

章节目录
第四十六课：JSX深入理解