基于Webpack及React技術的Scratch互動在線學習平臺設計

馮菲菲 鄒連英

摘要：在當今互聯網時代下，人人會編程已成為時下最熱門的話題之一。Scratch和STEAM等在線教育平臺的教育理念在于寓教于樂，即在娛樂中學會編程思維。以STEAM教育理念為中心，設計出一種基于Webpack和React的在線編程學習網站。該網站借助React框架的組件化開發思想，將每個單獨的組件劃分為不同邏輯的JSX單文件，再通過Webpack構建命令形成SPA單頁應用系統，從而實現模塊化開發。

關鍵詞： Webpack； React； Scratch； STEAM； 模塊化開發； 在線學習

中圖分類號：G43 文獻標識碼：A 文章編號：1009-3044（2018）20-0054-03

Design of ScratchInteractive Online Learning Platform Based on Webpack and ReactTechnology

FENG Fei-fei，ZOU Lian-ying

（Wuhan Institute of Technology， Wuhan 430205， China）

Abstract： In the Internet Age， "Everyone can program！" is nowadays the one of the hottest topics. "Teaching through lively activities" is the core philosophy of Online Education Platform， such as Scratch and STEAM， which aims at allowing users to learn programming while enjoying it. Inspired by this idea， an online programming learning website based on Webpack and React is proposed. Firstly， according to the idea of the component-based development of React， each individual component consists of JSX files which are logically different. To implement the modular development， besides， Webpack is used to create commands for the signal page application （SPA） system.

Key words： webpack； react； scratch； STEAM； modular development； online learning

1前言

在互聯網飛速發展的今天，中國教育模式也在飛速更迭，從線下轉到線上，從書本到視頻，再到互聯網平臺。美國于2009年提出了在當今時代背景下的新型教育理念：STEAM教育[1]。這個教育方式具有跨學科性[2]、趣味性、體驗性、實踐性等特點，STEAM教育是一種線上的、可視化、可操作的教育模式。在互聯網技術迅速發展的時代，廣大學生群體學習方式也越來越網絡化、信息化、多元化，越來越多的人選擇網絡在線學習，同時網絡上也出現了各種形式的在線學習網站[3]，但這些學習網站大部分都只是將書本知識進行整理和歸納，僅僅介紹了基礎知識和語法，并沒有運用形象化、多元化的實際案例進行講解和學習。

基于傳統學習方式的弊端，本文提出了一種基于市面上最火的前端庫React與谷歌提供的Scratch框架并結合Webpack項目打包工具生成的新型在線學習網站。該網站最大的亮點是推出了思維邏輯訓練，與傳統在線學習網站的單一枯燥學習相比，本網站是一個訓練思維邏輯的小游戲，每一步的操作都是利用一個個五彩繽紛和形狀各異的語法模塊，但是每一個小模塊上寫的不是具體的語法語句，而是常見的編程語法轉換成的通俗易懂的說明語句?！?br>