React.js学习初探02

最新推荐文章于 2023-08-21 01:20:21 发布

人傻要多学点

最新推荐文章于 2023-08-21 01:20:21 发布

阅读量405

点赞数

分类专栏：前端文章标签： react.js

本文链接：https://blog.csdn.net/weixin_36985768/article/details/89840530

版权

本文是React.js学习系列的第二篇，涵盖了React的介绍、开发环境搭建、项目目录解析、React组件的基础知识，以及JSX语法要点。文章比较了React与Vue的适用场景，并详细介绍了如何创建React项目，包括安装create-react-app和项目启动步骤。此外，还解析了项目目录中的关键文件，如package.json和src文件夹，强调了serviceWorker在PWA中的作用。最后，讲解了React组件的定义和JSX的基本用法。

摘要由CSDN通过智能技术生成

知识点
1、介绍
2、开发环境搭建
3、项目目录介绍
4、react组件
5、react中基础JSX语法

1、介绍

在这里插入图片描述
React JS ：用react语法编写网页交互效果
React Native：用react语法编写原生APP应用
React VR（360）：在react基础上开发VR或全景应用

简介：Facebook推出、2013年开源、函数式编程、使用人数最多的前端框架、健全的文档与完善的社区、React Fiber（指React16版本或React16版本的底层实现，因为react底层在事件循环过程中加入了优先级的概念，可以利用时间循环的碎片时间，执行一些高优先级的用户交互，提高用户体验）

ReactJS和VueJS对比
1、react.js的灵活性更大，对于处理一些复杂业务时，技术方案有更多的选择；
2、vue.js拥有更丰富的API，实现功能会更简单，但由于API多，其灵活性会受到限制；

复杂度高优选react.js，面向用户复杂度低选vue.js。

2、开发环境搭建

具体操作内容，查看 react项目搭建和react devtools安装（https://blog.csdn.net/weixin_36985768/article/details/89355863）

安装node.js — 打开cmd — 输入npm install -g create-react-app 和 create-react-app learn-react — 输入cd learn-react 和 npm start — 打开浏览器http://localhost:3000/可查看项目页面在这里插入图片描述

3、项目目录介绍

在这里插入图片描述
package-lock.json：记录项目依赖安装包的版本号限制。
README.md：记录项目的说明，可删除全部代码，自己使用markdown语法进行记录项目的相关信息。
package.json：记录一些项目介绍，包括项目名、版本号、依赖第三方包、可调用命令，该文件使得项目成为一个node包。
.gitignore：使用git管理代码时，对于不需要上传的文件可以定义到此文件上。
node_modules：存放一些第三方模块。
favicon.ico：用于浏览器最顶的标签页的左边小icon。
index.html：项目首页的html模板，其中<noscript>you need to enable JavaScript to run this app.</noscript>标签容错代码，当用户将浏览器的javascript内容禁用了，提示用户开启网页javascript适配项，即允许网页去加载javascript。
src：存放所有源代码。
index.js：

所有代码的入口，css文件可以像模块一样被引入js import './index.css';；
import App from './App';脚手架会自动补全./App.js，优先寻找js文件；
import * as serviceWorker from './serviceWorker';，先了解一个概念PWA（progressive web application）通过写网页的形式，写一些AP