网站建设的企业目标,贸易公司寮步网站建设极致发烧,网易云播放器做网站播放,义乌开锁做网站哪个好react脚手架的使用
目标#xff1a;掌握如何使用react脚手架创建react项目
内容
create react app#xff08;CRA#xff09;是FaceBook的React团队官方出的一个构建React应用的脚手架工具命令#xff1a;npx create-react-app react-basic react-basic 表示项目名称掌握如何使用react脚手架创建react项目
内容
create react appCRA是FaceBook的React团队官方出的一个构建React应用的脚手架工具命令npx create-react-app react-basic react-basic 表示项目名称可以修改 启动项目yarn startor npm start
npx是 npm v5.2 版本新添加的命令用来简化 npm 中工具包的使用 原始1 全局安装npm i -g create-react-app 2 在通过脚手架的命令来创建 React 项目现在npx 调用最新的 create-react-app 直接创建 React 项目
总结
create-react-app是react官方提供一个脚手架工具用于创建react项目通过npx create-react-app react-basic命令可以快速创建一个react项目
react 的基本使用
目标掌握react的基本使用功能步骤
内容
导入react和react-dom创建react元素(虚拟DOM)渲染react元素到页面中
核心代码
//第一步 导入react和react-dom两个包
import React from react
import ReactDOM from react-dom//第二步 创建 react元素
//参数1 要创建标签名称 参数2 元素自身的属性 没有null 有则传对象
//参数3 表示元素的子节点
const h1 React.createElement(h1, { title: 我是标题 }, hello react)//第三步 渲染 react元素
ReactDOM.createRoot(document.querySelector(#root)).render(h1)总结
react脚手架已经安装了react和react-dom的依赖包不需要额外安装依赖包
