在正式开始学习之前我们需要对react有一个了解,知道react是什么东西?它是用来做什么的?有什么特性?

  1. react是什么东西?

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC
框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

2.它是用来做什么的?

它是用来构建用户界面的一个JavaScript库

3.有什么特性?

  • 声明式

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React
也可以高效地更新渲染界面。以声明式编写UI,可以让你的代码更加可靠,且方便调试。

  • 组件化

创建好拥有各自状态的组件,再由组件构成更加复杂的界面。无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。

  • 一次学习,随处编写

无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。React 也可以用作开发原生应用的框架 React Native.

大体了解React之后,我们现在需要搭建能运行他的环境

React是基于Nodejs搭建的,需要使用到Nodejs的webpack对项目进行打包以及使用到Npm包管理器。所以我们第一步应该是安装Nodejs,这里可以直接去Nodejs官网下载安装
安装完成后,我们需要在CMD窗口下测试是否安装成功。

出现以上版本信息即证明已经安装成功,如果没有出现,可能是安装的时候没有进行ClassPath的添加,可以手动进行ClassPath添加,也可以重新运行Nodejs的安装包重新安装。

安装完Nodejs后,我们还需要去安装React全局环境

在合适的位置新建一个文件夹,然后按住Shift+鼠标右击,选择在此处打开命令提示行窗口,然后输入npm install create-react-app

出现以上提示即表示安装完成。

现在,我们就可以开始来搭建我们的第一个React项目了

依旧在刚刚的窗口输入create-react-app 项目名
Tips:安装和创建需要进行资源下载,具体耗时根据网络情况和设备性能而定。
看到截图内容,即代表我们的第一个React项目已经创建成功了,提示的内容意思为:

  • npm start启动开发环境服务器
  • npm run build打包项目到生产环境
  • npm test开始运行测试
  • npm run eject解包项目,启动生产环境服务器

现在我们就可以运行它了,命令号输入npm start即可启动开发环境的项目。而后会自动打开浏览器,打开地址为localhost:3000

当我们完成一个React项目的开发工作后,我们需要对项目进行打包后再投入生产环境,这里我们先搭建一个生成环境服务器

  1. 使用命令npm install serve -g安装一个全局环境的服务器

  1. 然后我们需要使用命令npm run eject对项目进行解包,让它脱离开发环境 !

  1. 完成解包工作后,我们就可以使用npm run build将项目打包为一个生产环境的项目了
  2. 现在,我们使用serve -s build启动服务器,运行上线项目看看

Tips:这里可以发现虽然地址都是使用的localhost,但是端口不一样,证明开发环境的项目和生产环境的项目是两个不一样的项目,是相互独立的。
下面再对项目生成的文件夹做一个简单的介绍

好啦,本次分享到此结束。谢谢您的阅读

Last modification:August 10th, 2019 at 10:20 pm
如果觉得我的文章对你有用,请随意赞赏