React 从入门到实战一一开发环境基础搭建(小白篇)
- React 介绍
- 什么是 react ?
- react 主要功能
- react 框架特点
- 开发工具
- 渲染测试
React 介绍
最近两年,react 也愈来愈火热,想要在里面分一杯羹,那肯定逃不过 react 技术,不管是职场人士提升自己的硬实力还是毕业生找工作,都可以跟着本文章一步一步从入门到实战。
什么是 react ?
React是Facebook开发的一款JS库,那么Facebook为什么要建造React呢,主要为了解决什么问题,通过这个又是如何解决的?
从这几个问题出发我就在网上搜查了一下,有这样的解释。
Facebook认为MVC无法满足他们的扩展需求,由于他们非常巨大的代码库和庞大的组织,使得MVC很快变得非常复复杂,每当需要添加一项新的功能或特性时,系统的复杂度就成级数增长,致使代码变得脆弱和不可预测,结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用,当系统中有很多的模型和相应的视图时,其复杂度就会迅速扩大,非常难以理解和调试,特别是模型和视图间可能存在的双向数据流动。
react 主要功能
React主要用于构建UI。可以在React里传递多种类型的参数,如声明代码,帮助开发者渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
react 框架特点
- 1.声明式设计:React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图,当数据变动时 React能高效更新并渲染合适的组件。
- 2.组件化: 构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。
- 3.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
- 4.灵活:无论使用什么技术栈,在无需重写现有代码的前提下,通过引入React来开发新功能。
开发工具
这里,我们就使用 VSCode 开发工具,简单方便。
如果还没安装的,可以去官网上 https://code.visualstudio.com/Download 安装。选择自己电脑的版本系统即可。
安装完成后,我们先在本地创建一个 名为 react 的文件夹。
然后,双击打开安装的 vscode ,找到 File ,点击 选择 Open Folder ,选择刚刚创建好的 react 文件夹
然后会出现一个空项目界面,如下图所示:
这时候,我们需要在终端利用命令行的方式,创建项目,npx create-react-app
然后等待它创建成功。
当创建成功后,我们打开我们的项目文件夹,看一下文件夹目录
如果出现·一下这些内容,就代表着项目创建成功。
大家可以看到,文件夹内容也很多哈,对于0基础的小白来说,看着有点复杂,那我们可以把 src 文件夹下的内容,除了标红的给大家圈出来的俩外,全删了就行。只保留,index.js 和 app.js 俩文件就行,如图所示,这样就干净整洁多了。
项目创建成功后,我们需要把终端目录切换到项目文件下,,不然后续启动的时候会报错,找不到文件。如图所示:
然后我们打开 package.json
文件 ,点击deug,选择第一个start 就可以启动项目了,也可以在命令行了里输入,npm run start
启动后如果出现以下界面,代表着项目创建成功了,我们就可以在里面写业务了!。
渲染测试
既然项目创建成功了,那我们就稍作修改,改一下页面数据看看能不能展现出来。
如图所示,修改下,app.js 内 div里的内容,看下页面效果:
至此第一步,项目的开发环境的基础搭建已经完成,不管是做过开发的还是0基础未开发过的,都可以利用教程,单独创建一个react 项目。