React笔记

最新推荐文章于 2024-07-26 00:11:05 发布

风雅-

最新推荐文章于 2024-07-26 00:11:05 发布

阅读量192

点赞数 1

文章标签： React笔记个人心得

本文链接：https://blog.csdn.net/qq_42312930/article/details/84799444

版权

本文详细介绍了如何创建一个基于webpack4的React项目，包括设置基本项目结构、安装React和ReactDOM、理解JSX语法以及两种创建React组件的方法。通过实例展示了如何在JSX中混合编写JS表达式、添加注释、绑定类名等，并探讨了class关键字在ES6中的应用。

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

1. 创建基本的webpack4.X项目

运行 npm init y快速初始化项目
在项目根目录下创建src源代码目录和dist产品目录
在src目录下创建index.html
使用npm安装webpack，运行npm i webpack webpack-cli -D
- 全局运行npm i cnpm -g安装cnpm
注意：webpack4.X提供了预定大于配置的概念；目的是为了减少配置
- 默认约定了
  - 打包入口文件是src->index.js
  - 打包输出文件dist->main.js
  - 4.X中新增了mode选项，可选值为development(开发环境打包后不压缩)和`production(生产环境打包后会压缩)

2. 在项目中使用react

运行npm i react react-dom -S安装包
- react：创建组件、虚拟DOM元素、生命周期
- react-dom：把创建好的组件和虚拟DOM放到页面展示

在index.html页面中，创建容器

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible

最低0.47元/天解锁文章

风雅-

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React笔记

1. 创建基本的webpack4.X项目运行 npm init y快速初始化项目在项目根目录下创建src源代码目录和dist产品目录在src目录下创建index.html使用npm安装webpack，运行npm i webpack webpack-cli -D全局运行npm i cnpm -g安装cnpm注意：webpack4.X提供了预定大于配置的概念；目的是为了减少配置...
复制链接

扫一扫