React开发环境搭建

Posted 2020-10-02

　　零：react开发环境搭建非常简单，只需要下载facebook官方的基础代码即可。

　　下载地址 https://github.com/facebook/react/releases

 

　　一：常用的编辑器及插件配置

　　1）Sublime Text 3 下载地址 http://www.sublimetext.com/3　　

　   2）插件安装

　　因为Sublime没有管理插件的功能所以要安装Package Control

　　地址 https://packagecontrol.io/installation

　　复制网页中 sublime Text 3 下的代码即

import urllib.request,os,hashlib; h = ‘df21e130d211cfc94d9b0905775a7c0f‘ + ‘1e3d39e33b79698005270310898eea76‘; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/‘ + pf.replace(‘ ‘, ‘%20‘)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install‘ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb‘ ).write(by)

　　在sublime Text 3 中使用快捷键ctrl+顿号或者用点击菜单view-show console，在mac中菜单在左下角路径为console，输入代码回车执行，重启编辑器就完成了安装。

　　接下来就是安装我们常用的插件，windows下点击preferences-package control mac下点击菜单栏sublime text-preferences-package control  选择install Package（安装插件，选择后会加载所有插件）

　　1：Emmet 其是用来编写html和css的插件 使用Emmet可以用特殊语法，加快开发速度。

　　2：HTML-CSS-JSPrettify 作用是将html和css还有js的格式标准化，使代码更易维护规范。

　　3：Spacegray 作用是为代码着色，使代码更易读。

　　1：下载完成后，安装Emmet 其是用来编写html和css的插件 使用Emmet可以用特殊语法，加快开发速度。在输入框中输入Emmet，选择即可安装。当左下角的安装提示不在显示即为安装成功，重启编辑器。如何使用Emmet，重启后需要保存一个css文件或html文件，在文件格式明确的情况下sublime才能知道是否启用Emmet，在html和css文件中就可以使用Emmet。

　　2：HTML-CSS-JSPrettify的安装方法同上，并且还需要安装nodejs，使用方法右键-HTML/CSS/JSPrettify-Prettify Code，点击就可以整理代码格式。也需要在html和css还有js文件中才能使用。

　　3：Spacegray 安装方法同上，安装完成后需要进行配置，首先mac打开preference-Setting windows下 preference-Setting-User ，Spacegray提供三种主题，你可以在在Spacegray官网上复制你所选择的主题的代码。我选择的是 Settings for Spacegray Eighties。保存后主题启用。

{
  "theme": "Spacegray Eighties.sublime-theme",
  "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme"
}

修改后配置代码

{
    "ignored_packages":
    [
        "Vintage"
    ],
    "theme": "Spacegray Eighties.sublime-theme",
    "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme"

}

 

　 官网地址　https://github.com/kkga/spacegray

　　Emmet语法

　　子代：>

　　div>ul>li

　　<div><ul><li><li/></ul></div>

　　兄弟：+

　　div+p

　　<div></div><p></p>

　　父代：^

　　div>div^p

　　<div><p></p></div>

　　<div></div>

　　重复：*

　　div*2

　　<div></div>

　　<div></div>

　　成组：()　

　　(div+p)*2

　　<div></div><p></p>

　　<div></div><p></p>

 　  ID：#

　　div#head

　　<div id="head"></div>

　　CLASS：.

　　div.head.clas1

　　<div class="head clas1"></div>

　　属性：[]

　　div [name="name1" title="title1"]　　

　　<div name="name1" title="title1"></div>