React学习笔记(一)：基础

最新推荐文章于 2025-06-16 17:23:23 发布

weixin_43943881

最新推荐文章于 2025-06-16 17:23:23 发布

阅读量967

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_43943881/article/details/86913529

React学习笔记(一)：基础

创建react项目

1、安装react的脚手架，全局安装一次即可 cnpm install -g create-react-app
2、使用手脚架创建项目，在要创建项目的目录下输入 create-react-app 你的项目名
3、cd到项目中运行 npm start

项目结构

favicon是打开网页时标签上显示的icon。
index.html就是唯一一个页面，所以也叫单页面应用。不用管。
manifest.json是允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段，Chrome 和 Firefox 已经实现了这个功能，微软正努力在 Edge 浏览器上实现，Apple 目前仍在考虑中。不用管。
assets放静态资源，比如images和css。
components放我们自己写的组件。
APP.js是根组件。
APP.test.js是测试文件。不用管。
index.js是入口文件。
serviceWorker.js是加快react渲染速度的服务文件，不用管。
.gitignore是提交git是要忽略的文件，手脚架已经帮我们写好，不用管。
package.json是显示我们项目所需的依赖，还可以配置运行命令和服务。
README.md就是项目说明书。

组件的格式、使用、JSX语法

在这里插入图片描述
这是根组件，一般根组件不写内容，只挂载子组件。
这里展示了组件的基本写法：
1、引入react，import React, { Component } from ‘react’
2、写一个class去继承Component，然后内部使用render函数，return一个模板，在模板中写html内容。创建class，如果安装了插件，可按cccs快速创建。
3、对外暴露该组件，export default App。