下面我们通过创建 Create React App 介绍 React 的基本语法。

通过上一节介绍的方法创建一个新程序 my-app-1:

npx create-react-app my-app-1
cd my-app-1

关于创建新项目及可能出现的问题参考上一篇：https://blog.niekun.net/archives/2175.html

Create React App 官方教程：https://create-react-app.dev/docs/documentation-intro

项目结构

程序目录结构如下：

my-app-1
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

对于一个项目而言，下面两个文件是必须的:

  • public/index.html 是页面的模板文件;
  • src/index.js 是 JavaScript 入口文件.

其他文件可以根据需要添加，删除或重命名。

可以在 src 目录下建立子目录，为了加快 build 编译项目的速度，只有在 src 目录下的文件才会被 webpack 处理。所以需要将所有的 js 和 css 文件放在 src 目录下，否则 webpack 打包器不会识别到它们。

只有在 public 目录下的文件才会被 public/index.html 文件识别到。

所以所有的项目文件都需要放在 public 和 src 目录下，与项目无关的文件可以放在上级路径内，例如项目说明文件等。

可用脚本指令

在项目目录下，可以执行如下命令。

npm start

开发模式下运行 app：

npm start

打开 http://localhost:3000 可以查看效果。对代码作出修改后页面会自动重新加载。

npm test

交互模式下运行 test 运行器。更多介绍参考：https://create-react-app.dev/docs/running-tests

npm run build

编译项目程序到 build 目录下，会自动将 React 转换为产品模式，并优化项目结构以提高性能。代码是经过 minified 最小化处理过的，文件名都包含 hashes 以在客户端能够及时识别更新。

更多 build 参考：https://create-react-app.dev/docs/production-build

清理项目

默认使用的模板是 cra-template，包含一个基本的页面和 React component，我们先将项目清理掉不需要的内容。

打开 public 目录下的 index.html 可以看到 body 块内定义了：

<div id="root"></div>

index.html 内可以使用 %PUBLIC_URL% 表示 public 目录地址。

删除 src 目录内所有文件，并新建 index.js 文件。

运行程序：

npm start

会自动在浏览器打开项目。

hello world

最简单的 React 示例如下，将代码加入 index.js 文件：

const React = require('react')
const ReactDOM = require('react-dom')

ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('root')
);

保存文件后刷新浏览器页面查看效果。

标签：无

你的评论