1. 程式人生 > >【ReactJS】一、手把手搭建ReactJS開發環境(Sublime)

【ReactJS】一、手把手搭建ReactJS開發環境(Sublime)

React的介紹我就不多說了,總之最近很火。

最近打算學一下react(其實是預謀已久),所以對於我這個高度強迫症患者來說,開發環境是我第一步要解決的事情。

這裡我以Sublime作為編輯器。

為什麼選擇sublime?因為他外掛太多了。。所以資源很豐富,恰好也有對ReactJS支援的外掛。好了進入正題。

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)

其實就是把上面這段程式碼複製到Sublime的Console中,按回車就ok了。

不知道怎麼撥出Console的話,就按 Ctrl+~

ps:可以在sublime介面的左下角看到一個等於符號在移動,當他消失的時候就是安裝成功了。

三、安裝、配置 Babel外掛(GitHub):JSX的高亮工具

在Preferences中找到上一步安裝的 Package Control:


打上“Babel”,點選安裝


安裝完了之後

勾選 View->Syntax->Babel->JavaScript(Babel)


重啟sublime

就可以看到


sublime已經對支援jsx語法高亮了。

四、安裝ReactJS程式碼補全工具(GitHub


同第三步一樣,先開啟packagecontrol,搜尋ReactJS

點選安裝


這樣以來就有ReactJS的程式碼補全了。

相關推薦

ReactJS手把手搭建ReactJS開發環境Sublime

React的介紹我就不多說了,總之最近很火。 最近打算學一下react(其實是預謀已久),所以對於我這個高度強迫症患者來說,開發環境是我第一步要解決的事情。 這裡我以Sublime作為編輯器。 為什麼選擇sublime?因為他外掛太多了。。所以資源很豐富,恰好也有對Reac

Python學習記錄——從入門到放棄變數和簡單資料型別

本文使用的書籍是《Python程式設計:從入門到實踐》 本文使用的是Python3.6 一、執行hello_world.py 這裡主要是演示了一下print函式的使用,新手主要是在Python版本與print函式上有出入,導致出錯。 還有就是在“中文雙引號”和"英文雙

Python學習記錄——從入門到放棄變數和簡單資料型別

本文使用的書籍是《Python程式設計:從入門到實踐》 本文使用的是Python3.6 四、數字 在Python中,數字分為整數型和浮點型,不管是整數型還是浮點型都適用於加(+)減(-)乘(*)除(/)。 並且,在Python中,乘方是使用符號**來表示的,求餘數使用

Windows10下Eclipse搭建Hadoop3開發環境

Windows10下Eclipse搭建Hadoop3開發環境 前言 由於筆記本配置限制,虛擬機器CentOs-7關閉了圖形介面,作者在Windows端編寫mapreduce程式然後在linux上執行。

JuliaLinux下配置Julia互動開發環境Julia notebook

0x00 前言 近期Julia這門語言突然被拉入了大眾視野,我也是被一句 “Walk as Python,Run as C” 深深的吸引住了, 如果它沒有在吹牛,那麼這門語言說不定確實是我所想要的,那麼,學學看吧? 本篇文章主要用於介紹如何搭建便於學習與測

重拾Python(1):使用Anaconda搭建Python開發環境Windows7

pip -m class 路徑 下載地址 命令 http body linux 1.為什麽選擇Anaconda? Anaconda解決Python使用痛點 Python好用但是令人頭疼的就是包管理與Python不同版本的問題,特別是Windows環境下。 2.什麽是Anac

在Visual Studio2015中搭建OpenGL開發環境win10

一、下載OpenGL的GLUT庫 Windows環境下的GLUT官方下載地址:(蘋果機不需要安裝,自帶) OpenGL全部標頭檔案和庫檔案(不包括顯示卡自帶的) 連結: http://pan.baidu.com/s/1i3YKhBv  密碼:5x5t 二、O

Windows下搭建ReactNative開發環境Android

學習了一段時間ReactNative,最近有空總結一下,同時給正在學習ReactNative的夥伴提供參考,少走彎路。現在網上大部分的教程都是不怎麼完善,或者是Mac下的實現,然很多人對ReactNative望而卻步,官方的文件也是過於簡單,很多問題都沒有記錄,

使用vagrant鍵部署本地php開發環境製作自己的vagrant box

在上篇的基礎上 ,我們已經安裝好了virtualbox和vagrant,沒有安裝的話,參照上篇 使用vagrant一鍵部署本地php開發環境(一) 1.從網易映象或阿里等等映象下載Centos7 http://mirrors.163.com/centos/7/isos/x86_64/Ce

晒我的嵌入式開發環境軟體

主機windows+ubuntu虛擬機器 檔案傳輸用 主機與虛擬機器傳輸檔案告別命令列 ubuntu控制檯用 開發板控制檯用 開發板和主機windows用網線間接連線虛擬機器,可以從虛擬機器TF

Sublime Text 2搭建Go開發環境Windows

1. 安裝Sublime Text 3 Sublime Text 3(以下簡稱ST)的下載與安裝我就不說啦,目前還是一個測試版,不過據說比ST2增加了好多新功能,下載地址: ST3的破解還是挺方便的(ST你不仁,79刀還是多少刀啊,就別怪我不義啦),推薦朽木部落格的方

快速搭建OpenStack開發環境DevStack

官方參考文件:https://docs.openstack.org/developer/devstack/ 基本環境: 1. VMware+Ubuntu16.04-server.x86_64 2. DevStack應該使用非root使用者來執行,所以首先需要建立一個

Mac自帶Apache搭建PHP開發環境PHP和MySQL統一utf8卻亂碼

1.新建查詢: 通過資料庫命令列或視覺化介面新建查詢: show variables like '%char%'; 如果看到查詢結果的value均為latin1,則繼續進行下面操作,否則繼續排查其它原因 2.檔案拷貝: 關閉資料庫服務 命令列open /usr/local/

ubuntu下搭建android開發環境ubuntu安裝搜狗輸入法by 星空武哥

      剛安裝完的ubuntu系統預設的鍵盤輸入方式是IBus,但是作為android開發的ubuntu“系統鍵盤輸入方式系統”是不支援Ibus的,所以我們要安裝搜狗輸入法。 安裝搜狗

Muduo庫baseTimestamp類

second 一個 macro fin ftime mac cat gap base 一、Timestamp類 1、類圖如下: 2、 知識點 (1) 這個類繼承了 muduo::copyable, 以及 boost::less_than_comparable.

JDBCJDBC連接數據庫

connect cti close 一個數據庫 odin forname pass lock catch 1 package com.jdbc; 2 3 import java.sql.Connection; 4 import java.sql.DriverMa

kafkakafka框架介紹生產者篇

嗯,菜雞是我,驕傲在敗壞以先,狂心在跌倒之前。所以有什麼說錯的地方,還請大家指出批評! 繼爬蟲之後,kafka的介紹。 該系列文章暫時更新兩篇: 【kafka】一、kafka框架介紹(消費者篇):https://blog.csdn.net/lsr40/article/details/84

架構服務單元化

轉載:https://mp.weixin.qq.com/s/jfbHvEMSZtgXis3AtSOZyw 一、為什麼要做單元化 決策一個系統的整體架構方向,將對這個系統的未來產生深遠影響,並且會有實際的技術改造方面的人力投入。這樣的的決策必須是謹慎的,有依據的。所以,對於要不要單元化這個問題,這裡最想告訴

springboot零基礎快速入門springboot2.0.6

1、springboot2.X 課程全套介紹和高手系列知識點 簡介:介紹Springboot2.x課程大綱章節 java基礎,jdk環境,maven基礎 2、Springboot2.x依賴環境和版本新特性說明 簡介:講解新版本依賴環境和Springboot2.x新特性概述 1、依賴版

Redis簡單介紹及操作

一、什麼是Redis Redis 是一個高效能的開源的、C語言寫的Nosql(非關係型資料庫),資料儲存在記憶體中。 Redis 是以key-value形式儲存,和傳統的關係型資料庫不一樣。不一定遵循傳統資料庫的一些基本要求,比如說,不遵循sql標準,事務,表結構等等,非關係型資料庫嚴格