React入门二:React脚手架的使用 | 8月更文挑战
2023-06-13 09:16:41 时间
1. React脚手架的意义
- 脚手架是开发现代Web应用的必备
- 充分利用Webpack、Babel、Eslint等工具辅助项目开发
- 零配置,无需手动配置繁琐的工具即可使用
- 关注业务,而不是工具配置
2. 使用脚手架初始化项目
2.1 初始化项目,命令:
npx 命令介绍
- npm v5.2.0 引入的一条命令。
- 目的:提升包内提供的命令行工具的使用体验。
- 原来:先安装脚手架包,在使用这个包中提供的命令。 create-react-app 是脚手架的名字。
npx create-react-app my-app
2.2 运行 命令:
npm start
2.3 找到index.js文件
还是上一篇文章的三步:
- 引入文件 只不过不再是script标签引用,使用ES6中模块化语法
- 创建元素
- 渲染元素
// ES6 中模块化语法
// 1. 引入文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 2. 创建元素
const title = React.createElement('h1',null,"Hello React")
// 3 渲染元素
ReactDOM.render(title,document.getElementById('root'))
3.说明
ReactDOM 只适用于web开发 如果是手机端 react-native
相关文章
- React Hooks源码浅析
- activiti7入门_react demo
- React: Handling Events
- react的jsx和React.createElement是什么关系?面试常问
- 一步步实现React-Hooks核心原理
- react源码分析:深度理解React.Context
- React魔法堂:echarts-for-react源码略读
- 前端一面react面试题(持续更新中)_2023-02-27
- 美团前端二面常考react面试题及答案_2023-03-01
- react的组件通信
- 使用React+Electron开发 Markdown 云笔记本(1)
- 分析React源码中的合成事件
- 从react源码角度看React-Hydrate原理
- React源码之任务调度
- React源码学习入门(六)React Component是如何实现的?
- React源码学习入门(十)setState是怎么做到异步化的?
- react源码解析10.commit阶段
- React入门一:React简介及基本使用 | 8月更文挑战
- React入门七: 组件通讯
- 京东前端高频react面试题及答案_2023-03-15
- 前端经典react面试题(持续更新中)_2023-03-15
- React 许可证虽严苛,但不必过度 react