持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情
1. React的特点
- 声明式UI
写UI就和写普通的HTML一样,抛弃命令式的繁琐实现
- 组件化
组件可以通过搭积木的方式拼成一个完整的页面,通过组件的抽象可以增加复用能力和提高可维护性
2. 脚手架的启动
- 执行命令
npx create-react-app react-basic
说明:
- npx create-react-app 是固定命令,
create-react-app
是React脚手架的名称 - react-basic表示项目名称,可以自定义,保持语义化
- npx 命令会帮助我们临时安装create-react-app包,然后初始化项目完成之后会自自动删掉,所以不需要全局安装create-react-app
- 启动项目
yarn start
or
npm start
浏览器会弹出这个界面,说明我们的项目已经启动了
3. 文件目录介绍
我们可以删除src下一些暂时没用的目录,只留下下面几个,梳理逻辑。
对于我们而言,最终的的是index.js
这个文件
另外两个文件,都是问index.js
这个文件提供服务的。
index.css
文件可以用来存放我们的吃CSS样式,App.js
文件可以用来存放我们的组件模板。
我们可以看到,最后我们的根组件是渲染到一个dom节点上的,其本质是渲染到一个HTML页面上,不过对于我们想再而言,暂时不需要了解其具体的过程是什么,在今后的学习中,掌握了基本的知识,再来深入了解。
到现在,我们的项目已经成功启动了,下面就可以开始探索React的使用了。