React笔记-1

第一节

下载、安装node.js和VSCode，搭建web应用开发环境和工具，并完成相应配置。

• node.js：https://nodejs.org/zh-cn
  • 国内镜像：npm config set registry http://registry.npm.taobao.org
• VSCode: https://code.visualstudio.com/
• VSCode插件：
  • Prettier-Code formatter
  • Reactjs code snippets
  • ES7+ React/Redux/React-Native snippets
  • Chinese (Simplified)

利用脚手架创建一个React项目，项目名为“你的姓名全拼学号后两位”，成功后截图命令行提示的成功信息，然后通过VSCode打开该项目，并截图指出目录中的哪一个文件是项目的宿主文件、哪一个是入口程序。

• 控制台输入npx create-react-app yangguang30
• 宿主文件：public/index.html
• 入口程序：src/index.js

运行该初始项目，并截图运行指令、以及成功运行后显示的整个网页页面。

• 控制台输入 npm start

对该项目进行简单修改，使得页面上显示的内容包含你的完整姓名和学号，并再次截图网页页面。

• 把 src 中的测试相关文件和样式相关文件可以先全部删除掉，最后在 src 文件夹中只保留 App.js 和 index.js（入口文件）两个文件即可。
• 修改 index.js 文件内容,删掉或注释掉多余导入和方法调用。
• 修改 App.js 文件内容,删掉或注释掉多余导入和组件、样式设置。

1
2
3
4
5
6
7
8
9
10
11

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

1
2
3
4
5
6
7
8
9
10

// App.js
function App() {
  return (
    <h1>
      杨光221305030
    </h1>
  );
}

export default App;

实验报告

下载链接在评论区

参考课件

React 入门