React小白初入门

推荐学习&＃xff1a;

• React 官方文档&＃xff1a;
  https://react.docschina.org/
• React 菜鸟教程&＃xff1a;
  https://www.runoob.com/react/react-tutorial.html

关于React

安装

npm install -g create-react-app


Create React App 是来自于 Facebook的一个用于学习 React 的舒适环境&＃xff0c;也是用 React 创建新的单页应用的最佳方式&＃xff0c;通过该命令我们无需配置就能快速构建 React 开发环境。

它会配置你的开发环境&＃xff0c;以便使你能够使用最新的 Javascript 特性&＃xff0c;提供良好的开发体验&＃xff0c;并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >&＃61; 8.10 和 npm >&＃61; 5.6。

create-react-app 自动创建的项目是基于 Webpack &＃43; ES6。
执行以下命令创建项目&＃xff1a;

npx create-react-app my-app
cd my-app
npm start


创建完成是这样的&＃xff1a;

我们的大部分操作都将会在 src 文件夹中进行&＃xff1b;

了解各个文件的作用

node_modules 文件夹

我们项目依赖的第三方包&＃xff0c;一般不用动

public 文件夹

公共文件&＃xff0c;里面有一些公用模版和图标等。

src 文件夹

主要工作&＃xff0c;是一个项目工程目录&＃xff0c;很重要

关于上面提到的 PWA

PWA全称Progressive Web App&＃xff0c;即渐进式WEB应用。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用&＃xff0c;随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能

解决的问题&＃xff1a;

• 可以添加至主屏幕&＃xff0c;点击主屏幕图标可以实现启动动画以及隐藏地址栏&＃xff1b;
• 实现离线缓存功能&＃xff0c;即使用户手机没有网络&＃xff0c;依然可以使用一些离线功能
• 实现了消息推送

它解决了上述提到的问题&＃xff0c;这些特性将使得 Web 应用渐进式接近原生 App。