Designing and implementing React.js Fundamentals MooC for Metropolia UAS

Abstract

Tämä opinnäytetyö käsittelee aloittelijatason verkkokurssin (MOOC) suunnittelua ja toteutusta, jonka aiheena on React.js-kirjaston perusteet. Kurssi on suunnattu Metropolia Ammattikorkeakoulun opiskelijoille, ja sen tavoitteena on tarjota saavutettava ja käytännönläheinen johdanto moderniin käyttöliittymien kehittämiseen verkkosovelluksissa. Kurssi toteutettiin Metropolian virallisessa oppimisympäristössä Moodlessa. Se koostuu kahdeksasta moduulista, jotka kattavat muun muassa JavaScriptin perusteet, Reactin komponenttipohjaisen arkkitehtuurin, tilanhallinnan hookien avulla, reitityksen ja lomakkeet. Jokainen moduuli sisältää teoriaosuuden, ohjelmointitehtäviä, itsearviointikyselyitä sekä loppukokeen. Kurssi on rakennettu itsenäisesti suoritettavaksi ja etenee loogisesti yksinkertaisista aiheista kohti kokonaisvaltaista React-sovelluksen toteutusta. Moodle mahdollistaa sisällön jakamisen, opiskelijoiden etenemisen seurannan sekä automaattisten arviointien toteutuksen. Työssä osoitettiin, että ohjelmointipainotteinen MOOC voidaan integroida onnistuneesti osaksi korkeakouluopetusta olemassa olevan LMS-alustan avulla. Lopuksi työssä arvioidaan kurssin onnistumista ja esitetään jatkokehitysideoita, kuten selainpohjaisen ohjelmointiympäristön lisäämistä sekä yhteistoiminnallisten työkalujen hyödyntämistä.

This thesis presents the design and implementation of a beginner-friendly online course (MOOC) focused on teaching the fundamentals of React.js to students at Metropolia University of Applied Sciences. React.js is a widely used JavaScript library for building modern, dynamic user interfaces in web applications. The course was developed to address the growing demand for practical front-end programming skills in both academic and professional contexts. The course was delivered through Moodle, the university’s official learning management system. It was structured into eight modules covering core concepts including JavaScript foundations, React basics, component architecture, state management with hooks, routing, forms, and a final project. Each module included theoretical content, coding assignments, quizzes, and a comprehensive final exam. The course was designed for asynchronous, self-paced learning, and emphasized hands-on practice to reinforce conceptual understanding. Moodle’s modular features were used to organize content, track student progress, and provide automated assessments. The project successfully demonstrated how a technically focused MOOC can be integrated into an academic environment using existing LMS infrastructure. It also highlighted the importance of well-structured instructional design in programming education. The concluding chapter discusses limitations, evaluates student feedback, and proposes future improvements such as integrating live coding environments and enhancing interactivity through peer collaboration tools.