react - 从脚手架开始建立一个移动端mobile项目

react -从脚手架开始建立一个移动端mobile项目

react (脚手架)

脚手架的安装,会使用yarn的建议使用yarn

1、npm install -g create-react-app (全局下载工具)
2、create-react-app my-app (my-app)为自己的demo名称
3 、或者可以直接:npx create-react-app my-app

注:目录名不要使用大写,这样作只要是为了严谨性

成功安装之后运行npm start 即可。

react - 从脚手架开始建立一个移动端mobile项目_第1张图片

  • 假如打开页面没有出来 F12 调试器中报错
问题:用create-react-app工具生成react项目,运行时报出这个错误,刚开始以为生成项目过程中出现了什么错误,于是重新生成了很多次,一启动项目便报出错误,仔细一看错误偏向于底层代码错误,锁定报错的文件react-refresh-runtime.development.js和ReactRefreshEntry.js。

react - 从脚手架开始建立一个移动端mobile项目_第2张图片

报错原因分析

报错原因是React Developer Tools插件版本为3.x版本,版本太老不兼容最新版本的[email protected].而最新的create-react-app生成的react项目版本为17.0.2版本。

解决方案

下载最新的4.x版本的React Developer Tools插件:
点击进去下载React Developer Tools
下载好之后,直接将.crx文件拖拽到Chrome浏览器的插件扩展管理中。

基本目录如下:
react - 从脚手架开始建立一个移动端mobile项目_第3张图片

注释:然后将src目录下面的css、js都删掉 换成如下

api assets components containers utils redux index.js 入口

react - 从脚手架开始建立一个移动端mobile项目_第4张图片

然后开始导入antd mobile UI库

npm install antd-mobile --save

注意:有时候安装包的时候会丢包 如下图所示就是丢包了

react - 从脚手架开始建立一个移动端mobile项目_第5张图片

  • 进行下面 npm fund 找回包
  • 丢包可以使用yarn 重新装下

yarn add antd-mobile --save

mobile中点击停顿还有配置需要去public文件下的index.html配置

<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

手机端适配

<script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);
      }, false);
    }
    if (!window.Promise) {
      document.writeln('
                    
                    

你可能感兴趣的:(react.js,javascript,ecmascript)