推荐学习&＃xff1a;
- React 官方文档&＃xff1a;
https://react.docschina.org/ - React 菜鸟教程&＃xff1a;
https://www.runoob.com/react/react-tutorial.html
关于React
| 特点 | 描述 |
|---|
| 库 | React 是一个用于构建用户界面的 Javascript 库 |
| 声明式设计 | 采用声明范式&＃xff0c;可以轻松描述应用 |
| 高效 | 通过对 DOM 的模拟&＃xff0c;最大限度地减少与 DOM 的交互 |
| 灵活 | 可以与已知的库或框架很好地配合 |
| JSX | JSX 是 Javascript 语法的扩展&＃xff0c;建议使用 |
| 组件 | 通过 React 构建组件&＃xff0c;使得代码更加容易得到复用 |
| 单向响应的数据流 | 减少了重复代码&＃xff0c;比传统数据绑定更简单 |
安装
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;
了解各个文件的作用
| 文件 | 作用描述 |
|---|
| README.md | 项目的说明文件&＃xff0c;会在 github 上显示 |
| package.json | 第三方包管理工具和配置文件 |
| package-lock.json | 锁定安装时的版本号&＃xff0c;版本控制文件 |
| .gitignore | git 的选择性上传的配置文件 |
node_modules 文件夹
我们项目依赖的第三方包&＃xff0c;一般不用动
public 文件夹
公共文件&＃xff0c;里面有一些公用模版和图标等。
| 文件 | 作用描述 |
|---|
| favicon.ico | 标签的图标 |
| index.html | 模版文件&＃xff0c;有 title 以及 noscript 设置 |
| manifest.json | 移动端的配置 |
src 文件夹
主要工作&＃xff0c;是一个项目工程目录&＃xff0c;很重要
| 文件 | 作用描述 |
|---|
| index.js | 入口文件 |
| index.css | 是 index.js 的 CSS 文件 |
| APP.js | 相当于一个方法模块&＃xff0c;简单的模块化编程 |
| serviceWorker.js | 用于写移动端开发的&＃xff0c;PWA 相关技术&＃xff0c;实现离线浏览功能 |
| logo.svg | 图片技术 |
关于上面提到的 PWA
PWA全称Progressive Web App&＃xff0c;即渐进式WEB应用。
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用&＃xff0c;随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决的问题&＃xff1a;
- 可以添加至主屏幕&＃xff0c;点击主屏幕图标可以实现启动动画以及隐藏地址栏&＃xff1b;
- 实现离线缓存功能&＃xff0c;即使用户手机没有网络&＃xff0c;依然可以使用一些离线功能
- 实现了消息推送
它解决了上述提到的问题&＃xff0c;这些特性将使得 Web 应用渐进式接近原生 App。
京公网安备 11010802041100号