React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念

前端之家收集整理的这篇文章主要介绍了React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念

React 入门系列教程导航

React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念
React + webpack 开发单页面应用简明中文文档教程(二)创建项目
React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件
React + webpack 开发单页面应用简明中文文档教程(四)调整项目文件以及项目配置
React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件
React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件
React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件、父组件给子组件传值
React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面
React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值
React + webpack 开发单页面应用简明中文文档教程(十)在 jsx 和 scss 中使用图片
React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行


我之前写了一系列的 vue 相关的入门博文,深受大家的欢迎。现在开发了几个 reactjs 的小项目,略有心得,因此,想与大家分享

由于之前有了 vue 开发的一些经验,因此,这个系列的博文会相对比较简单。

如果你是有过一些经验的开发者,可以略过这篇博文,直接阅读下一篇。如果你只是掌握了 jquery 这种原始开发模式的初级前端工程师,那么请先从本文开始阅读。

开发环境以及生产环境

我尝试用后端的概念来解释。

当我们使用某种编译型的语言来开发项目,例如 golang 这种语言。我们写好程序脚本,然后在命令行中可以直接执行,不需要编译。这就是开发环境。

当我们把程序开发好了,编译成二进制文件,然后直接运行这个二进制文件,这就属于生产环境。

@H_301_41@

简单理解一下,不要和公司中的开发服务器环境、测试环境、预发布环境、以及生产环境等服务器环境搞混。

也就是说,我们在开发模式下编写代码,无需编译,则我们称之为开发环境。我们把我们开发的代码进行编译,将编译之后的代码放在某种其他的环境下运行,则称之为生产环境。

我们前端本来是没有所谓的这两种差异的,因为无论是 htmlcss 还是 js 都是脚本型的语言,也就是说,是不需要编译的,也就无所谓开发还是生产了。

但是,前端的发展日新月异,无论 htmlcss 还是 js 都有一些先天的缺陷,比如,css 不支持逻辑编写,因此写起来非常不便,于是我们发明了 lesssass 等预编译语言,又比如 js 是弱类型语言,因此又搞了 typescript 这种强类型的脚本。等等等等。

但这还是不是最重要的,最最重要的是,我们的浏览器不随着这些语言的发布或者更新就立即得到更新,因此,有很多很多牛逼的特性,在浏览器中都得不到支持

所以,我们需要编译,将我们写的如 es6 的一些箭头函数,以及其他等等各种东西,编译成当前浏览器能够运行的代码

因此,本来明明不需要编译的前端,也需要编译了。

既然是需要编译,那么干脆来得狠点,就有了 Nodejs 环境。

事实上,无论是 vue 还是 react 亦或是其他的前端现代框架,都是以 node 为开发环境的了。

我们在 Nodejs 中开发项目,写代码,跑起来看效果,等等,这些都是在所谓的开发环境中。只有最终把整个项目编译打包,将输出静态文件,放到服务器的 Nginx 或者 apache 中运行,才算放到了生产环境。

@H_301_41@

目前我们前端开发的大多数时候,都是在 node 下面开发的。

所以,我们需要安装 nodejs。安装方法请查看 Installing Node.js via package manager

开发操作系统的选择

对于大多数前端开发者,都是在 windows 环境下开发的。我可以理解,但是,实际情况是 nodejs 的运行,在不同的系统下面还是有差异的,更多的时候,在类 unix 环境中,运行得更好。

所以,为了不必要的麻烦,最好将开发操作系统更换为其他操作系统。

首推 MACOS 系统环境

MacOS 是苹果公司基于 unix 开发的一套图形界面的操作系统。在图形界面上无可挑剔,是大量设计师以及视频工作者,亦或是咖啡馆中装逼的文青的必备操作系统。

但是,如果你仅仅认为它只是一个漂亮的操作系统的话,那就大错特错了。基于 unix 的核心,使得 MacOS 命令行无比强大。再配合 brew 这样的神器,简直就是简直了。

本人常年在 mac 下开发,已经无法自拔。

使用苹果操作系统,最简单的方法是去购买一台苹果笔记本。如果你不愿意购买苹果电脑,也是可以使用苹果系统的。大家可以参考我的黑苹果系列专题博文 https://blog.csdn.net/fungleo/article/details/57572537

其次 Deepin 深度 linux 操作系统

在众多的 linux 操作系统之中,原先深深折服我的是 archlinux 操作系统。其滚动更新的特性,可以让我最先体验到最新的软件以及系统核心。其灵活的系统配置,可以让我打造全世界独一无二的系统环境。但是人过三十,懒得折腾。蓦然回首,发现 Deepin 就在那灯火阑珊处。

这款操作系统最牛逼的特性就是,基本不用啥配置,装上就能用。输入法,浏览器,办公软件……深度致力打造一个开箱即用的系统环境。

对于我这个颜值控来说,最最最重要的是,深度操作系统非常非常的漂亮。

而对于大量 windows 用户来说,切换 mac 系统最头疼的事情是快捷键的不一致。而深度这点做得非常优秀,其大量的快捷键直接兼容 windows,因此,你基本可以零疼痛的切换操作系统。

@H_301_41@

深度核心开发者老王已经离开深度开发团队。对于此事,我一直没有发表看法。在这里小小的说两句,这是一个好事。一个操作系统的发展,应该由大量的开发者顺应用户的需求进行开发,而不是一个英雄。英雄落幕固然可叹,但大树底下不长草却也是真正的道理。希望深度借此机会,继续深耕操作系统开发,为我们带来更好的 linux 系统。

前端工程师如何使用深度作为开发系统,请参考我的系列博文 《Deepin Linux & 前端工程师》 https://blog.csdn.net/column/details/17970.html

其他 linux 操作系统

如果你选择其他操作系统,我相信你一定对你使用的系统有所了解,我就不说啥了。

最后,如果您再 windows 下开发遇到了一些其特有的问题,请尽量自己尝试解决,因为,本人是绝对帮不了你的。不是别的,真不会……

命令行的重要性

作为一个开发者,很多人并没有意识到命令行的重要性。在一个前端都需要跑命令的时代,不掌握一些命令行操作,简直对不起工程师的头衔。

没什么特殊的要说的,只是强调,要认识到命令行的重要性,要从心底里不要排斥命令行,甚至拥抱它。

不要畏惧,勇敢尝试,你就会发现,很多你用鼠标操作了很多年的事情,简直是太蠢了。

Unix 思想

  1. 没有消息就是最好的消息。
  2. 一个工具只干一件事情。

嗯,第一个不说不行。但第二个才是我想说的。一个工具只干一件事情,所以开发项目最重要的是统筹能力,而不是代码的开发能力。

也就是说,代码的组织能力的重要性远远大于你写代码的能力。

什么是 react

前面扯了半天,终于唠到点正题了。

这个和 jquery 是完全不一样的概念,jquery 只是一个工具,而 react 是一个前端框架。

最最重要的是 react 只是 react 开发生态的其中一个小项目而已,其负责 UI 视图的渲染。

在开发的时候,我们会用到很多围绕 react 的其他工具,他们各司其职,各自完成各自的事情。

嗯。

javaScript es6 语法

你需要对 es6 语法有一个大概的了解,比如 let 取代 var,箭头函数等。如果对这些一无所知,可能在接下来的学习中会感到比较困难。

阮一峰大哥电子书是一个很好的学习资料,其地址是: http://es6.ruanyifeng.com/ 不需要精通,一定要大概的看一遍,有一个大概的了解即可。

其他你该了解的事情

其他还有很多你该了解的事情,有时间请阅读我写的 vue 的前言博文 《vue基础知识概述》https://blog.csdn.net/fungleo/article/details/77575077

github 这是代码托管网站,几乎所有的开源项目以及组件,全部托管在 github包括我这篇文章

npm 它是 node 的包管理器

唠叨这么多,下面我们开车了。

本文由 FungLeo 原创,允许转载,但转载必须保留首发链接

猜你在找的React相关文章