React 开发环境搭建 以及emmet的简单语法

Posted 2020-07-30 lihfei89

1，React的开发背景

2，React的特点

3，React的开发环境搭建

3.1 下载FaceBook官方的基础代码

     下载地址：facebook.github.io/react/index.html

3.2 文本编辑器Sublime Text3安装

     3.2.1 下载sublime Text3下载 地址：http://www.sublimetext.com/3

    

             首先安装packagecontrol 详见一下地址：https://packagecontrol.io/installation

             打开Sublime Text3 快捷键ctrl+~ 打开Sublime Text3的控制台程序 将下面代码复制粘贴 按回车即可，安装完成之后 重启Sublime Text3：

             import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442‘ + ‘8bc59f460fa1548d1514676163dafc88‘; 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)

           安装完成packagecontrol之后 打开Sublime Text3的Preferences工具栏的Package Control 输入Install Package命令 这样就可以通过Package Control来安装一下插件

           

     3.2.2 安装Emmet插件

            先进入Package Control 选择Install Package 输入Emmet 安装即可 看左下角 当emmet V8引擎安装完成后即可

            重启Sublime Text3 输入 div#test 将其保存为html文件后 在按Tab键 即可自动生成:<div id="test"></div>

            

     3.2.3 安装HTML-CSS-JS Prettify插件（基于Node.js,后续继续补充）

              先进入Package Control 选择Install Package 输入HTML-CSS-JS Prettify 进行安装，但是必须要先安装好Nodejs后才会起作用

     3.2.4 安装Spacegray模板

             进入Spacegray官方网站：https://github.com/kkga/spacegray

             先进入Package Control 选择Install Package 输入Spacegray 进行安装

             安装完成后在Preferences的Settings-User中加入：

             一下下代码：

{
"font_face":"Noto Sans CJK SC",
"font_size":16,
"ignored_packages":
[
"Vintage"
],
"theme": "Spacegray Eighties.sublime-theme",
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme"
}即可

4，简单介绍下Emmet语法：

    子代：>  兄弟：+ 父代：^ 重复：* 成组：()  ID:# CLASS:.