如何构建一个最简单的React应用

构建一个最简单的React应用主要分2步:

  • 环境安装
  • 通过create-react-app组件启动React应用

环境安装
https://docs.npmjs.com/cli/v8/configuring-npm/install

一个标准的React应用一般都会安装node、npm、npx等工具链:

node:javascript的运行时环境,React应用将js打包的时候,会用到webpack等打包工具,这些工具会依赖nodejs的运行时环境,所以这个必须提前安装;

npm,npx:node安装包管理工具,类似于Java应用的maven工具,主要用来管理、发布、安装依赖包;

官网也详细介绍了两种安装(包括Windows、Linux、Mac)的方式:https://docs.npmjs.com/cli/v8/configuring-npm/install

第一种:通过nvm工具来安装node/npm(个人推荐使用)

第二种:通过node installer工具来直接安装对应版本的node工具

通过create-react-app启动React应用
https://react.docschina.org/docs/create-a-new-react-app.html

// 通过create-react-app工具初始化一个React模版应用
// 应用名可以自取,这里是my-app
npx create-react-app my-app
// 进入my-app目录
cd my-app
// 启动应用
npm start

安装完第一步中环境后,就可以执行以上3步命令来成功构建第一个React应用了。

注意️:

上面的npx命令是npm 5.2+后附带一个包管理工具,如果npm版本<5.2,就需要用下面的命令启动:

// 全局安装create-react-app工具
npm install -g create-react-app
// 通过create-react-app工具初始化一个React模版应用
// 应用名可以自取,这里是my-app
create-react-app my-app
// 进入my-app目录
cd my-app
// 启动应用
npm start

构建成的第一个成功的React应用长成这样:

声明:文中观点不代表本站立场。本文传送门:http://eyangzhen.com/247218.html

联系我们
联系我们
分享本页
返回顶部