TÜRKÇE
ENGLISH
Information
| Unit | |
| Code | SD0784 |
| Name | Front-End Development With React JS |
| Term | 2026-2027 Academic Year |
| Term | Fall and Spring |
| Duration (T+A) | 2-0 (T-A) (17 Week) |
| ECTS | 3 ECTS |
| National Credit | 2 National Credit |
| Teaching Language | Türkçe |
| Level | Üniversite Dersi |
| Label | UCC University Common Course |
| Mode of study | Yüz Yüze Öğretim |
| Catalog Information Coordinator | Öğr. Gör. ERKAN KAYNAK |
| Course Instructor |
Öğr. Gör. ERKAN KAYNAK
(Güz)
(A Group)
(Ins. in Charge)
|
Course Goal / Objective
The objective of this course is to provide students with the ability to develop modern web interfaces using React, introduce the component-based software development approach, and enable them to create basic interactive web applications.
Course Content
This course examines the fundamental structure of the React JS library, which is widely used in the development of modern web applications. Students learn the working principles of React, component-based architecture, JSX syntax, the concepts of Props and State, event handling, conditional rendering, list rendering, Hooks, and React Router. Throughout the course, theoretical knowledge is reinforced through the development of small-scale Single Page Applications (SPA).
Course Precondition
Resources
https://enformatik.cu.edu.tr
Notes
https://react.dev
Course Learning Outcomes
| Order | Course Learning Outcomes |
|---|---|
| LO01 | Explain the working principles of modern web applications. |
| LO02 | Install and configure the React JS development environment. |
| LO03 | Create and manage a React application project. |
| LO04 | Develop user interfaces using JSX syntax. |
| LO05 | Create reusable React components. |
| LO06 | Transfer data between components using Props. |
| LO07 | Build dynamic user interfaces using the State concept. |
| LO08 | Implement event handling in React applications. |
| LO09 | Apply conditional rendering and list rendering techniques. |
| LO10 | Use React Hooks at a fundamental level. |
| LO11 | Develop forms and manage user input. |
| LO12 | Create multi-page application structures using React Router. |
| LO13 | Retrieve and display data from external APIs. |
| LO14 | Develop a basic Single Page Application (SPA). |
Week Plan
| Week | Topic | Preparation | Methods |
|---|---|---|---|
| 1 | Introduction to Modern Web Technologies, SPA concept, history of React, and application areas | Literature review. | Öğretim Yöntemleri: Anlatım |
| 2 | Installing Node.js, npm, Visual Studio Code, and creating the first React project with Vite | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 3 | React project structure, JSX syntax, and the Component concept | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 4 | Functional Components, Props, and Component hierarchy | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 5 | State concept and the useState Hook | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 6 | Event Handling, Forms, and User Interactions | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 7 | Conditional Rendering, List Rendering using map(), and the key property | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 8 | Mid-Term Exam | Ölçme Yöntemleri: Yazılı Sınav |
|
| 9 | useEffect Hook and the React component lifecycle concept | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 10 | Fetching data from APIs using the Fetch API and working with JSON data | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 11 | Navigation and Routing with React Router | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 12 | Developing a basic CRUD application (Create, Read, Update, Delete) | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 13 | Mini Project Development (To-Do List, Notes Application, Movie Search, etc.) | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 14 | Project Presentations | Reading material. | Öğretim Yöntemleri: Gösterip Yaptırma |
| 15 | Course Review, and Evaluation | Reading material. | Öğretim Yöntemleri: Alıştırma ve Uygulama |
| 16 | Term Exams | Ölçme Yöntemleri: Yazılı Sınav |
|
| 17 | Term Exams | Ölçme Yöntemleri: Yazılı Sınav |
Student Workload - ECTS
| Works | Number | Time (Hour) | Workload (Hour) |
|---|---|---|---|
| Course Related Works | |||
| Class Time (Exam weeks are excluded) | 14 | 2 | 28 |
| Out of Class Study (Preliminary Work, Practice) | 14 | 2 | 28 |
| Assesment Related Works | |||
| Homeworks, Projects, Others | 0 | 0 | 0 |
| Mid-term Exams (Written, Oral, etc.) | 1 | 8 | 8 |
| Final Exam | 1 | 16 | 16 |
| Total Workload (Hour) | 80 | ||
| Total Workload / 25 (h) | 3,20 | ||
| ECTS | 3 ECTS | ||