一分钟启动React项目——React(1)

1,015 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情

1. React的特点

  1. 声明式UI

写UI就和写普通的HTML一样,抛弃命令式的繁琐实现

image.png

  1. 组件化

组件可以通过搭积木的方式拼成一个完整的页面,通过组件的抽象可以增加复用能力和提高可维护性

2. 脚手架的启动

  • 执行命令
npx create-react-app react-basic

说明:

  1. npx create-react-app 是固定命令,create-react-app是React脚手架的名称
  2. react-basic表示项目名称,可以自定义,保持语义化
  3. npx 命令会帮助我们临时安装create-react-app包,然后初始化项目完成之后会自自动删掉,所以不需要全局安装create-react-app

image.png

  • 启动项目
yarn start
or
npm start

浏览器会弹出这个界面,说明我们的项目已经启动了

image.png

3. 文件目录介绍

我们可以删除src下一些暂时没用的目录,只留下下面几个,梳理逻辑。

image.png

对于我们而言,最终的的是index.js这个文件

image.png

另外两个文件,都是问index.js这个文件提供服务的。 index.css文件可以用来存放我们的吃CSS样式,App.js文件可以用来存放我们的组件模板。 我们可以看到,最后我们的根组件是渲染到一个dom节点上的,其本质是渲染到一个HTML页面上,不过对于我们想再而言,暂时不需要了解其具体的过程是什么,在今后的学习中,掌握了基本的知识,再来深入了解。

到现在,我们的项目已经成功启动了,下面就可以开始探索React的使用了。