CS 220

Advanced Web
Development
Tunis Business School
Sophomore – Spring 2024
Outline

Web Development
Introduction to React
Development Environment
Introduction to Git & GitHub
Setting a React Project
 Types of Web Development

Front-end Back-end
Full-stack
web web
development
development development
Front-end web development (Reminder)

Client-facing aspects of a website or web

application.
Designing and optimizing the user interface

Working on important visual aspects of web page

Front-end languages

HTML CSS JavaScript

Front-end frameworks and JavaScript libraries

AngularJS Vue.js React Backbone Ember

Web development stacks

The combination of tools and technologies

used to create a website or web application.

Include all the programming languages,

frameworks, libraries, servers, software, etc.,
that Web Developers use to complete a project
 Web development stacks
LAMP • Linux, Apache, MySQL, PHP

LEMP • Linux, Nginx, MySQL, PHP

MEAN • MongoDB, Express, AngularJS, Node.js

MERN • MongoDB, Express, React, Node.js

Django • Python, Django, MySQL

Ruby on Rails • Ruby, SQLite, Rails

Introduction to React
Single-page application (SPA)
Traditional
Websites
Single Page
application
Introduction to React
React is a JavaScript library that aims to simplify the development of visual
interfaces.

Developed at Facebook and released to the world in 2013.

It drives some of the most widely used apps, powering Facebook and
Instagram among countless other applications.

Its primary goal is to make it easy to reason about an interface and its state
at any point in time, by dividing the UI into a collection of components.
Four Basic concepts to understand

Components JSX

State Props
Development Environment
Play with React in Sandbox

CodeSandbox StackBlitz CodePen

Local Installation
NODE.JS
• JavaScript runtime which makes it possible to run JavaScript outside of the
browser: https://nodejs.org/

Node Package Manager (NPM)

• Used to install libraries, such as React, to your project on the command line
• NPM comes automatically with Node.js

VS Code
• Editor to write code
• Integrate terminal to execute code
Vite

Next-generation frontend build tool that aims to

provide a faster and leaner development experience.

Designed to address the limitations of traditional

frontend build tools by leveraging modern JavaScript
features and optimizing the development workflow.
Version Control: Definition and Importance

Version control is the management of changes

to documents, computer programs, large
websites, and other collections of information.
It is essential for tracking changes, maintaining
a history of revisions, and enabling
collaboration among team members.
Version Control: Evolution from Traditional Methods

Version control is the management of changes

to documents, computer programs, large
websites, and other collections of information.
It is essential for tracking changes, maintaining
a history of revisions, and enabling
collaboration among team members.
Version Control: Evolution from Traditional Methods

Traditional methods involved manual backups,

naming conventions, and file duplication,
which were error-prone and inefficient.
Version control systems automate and
streamline these processes.
What is Git?

Git is a distributed version

control system that tracks
changes in files and coordinates
work among multiple people.
Git : Features
• Every developer has a local copy of the entire
Distributed project's history.

Branching and • Easy and lightweight branching and merging

Merging workflows.

Speed • Fast performance for both small and large projects.

• Developed as an open-source project, enabling

Open Source community contributions.
Why Use Git?

Enables collaboration among developers.

Maintains a history of changes for accountability

and troubleshooting.
Facilitates branching and merging for parallel
development
Basic Git Concepts

Repository • A repository, or repo, is a directory that contains

your project work.

Commit • A commit is a snapshot of your repository at a

specific point in time.

Branch • A branch is an independent line of development in

Git.

Merge • Merging combines changes from different branches

into a single branch.
Getting Started with Git

Installing Git • Download and install Git from git-scm.com.

Configuring Git • Set up your username and email globally using git config --global.

Basic Git • git init: Initialize a new Git repository.

• git add: Add changes to the staging area.
• git commit: Save changes to the repository.
Commands • git push: Upload local repository content to a remote repository.
Activity: Git configuration
• Installing Git
• Download and install Git from Git (git-scm.com).
• Configuring Git
• Set up your username and email globally using git config --
global.
git config --global user.name "Your Name"
git config --global user.email "[email protected]"
Git Workflow

Adding Files Branching

• Use git init to • Use git commit to • Use git merge to
initialize a new Git save changes to the integrate changes
repository in your • Use git add to stage repository with a • Use git branch to list, from one branch into
project directory. changes for commit. descriptive message. create, or delete another.
branches.

Initializing a Committing
Merging
Repository Changes
What is GitHub?

GitHub is a web-based
platform that provides
hosting for Git repositories
and collaboration features.
GitHub: Features

Hosting • Stores your Git repositories in the cloud.

• Enables team collaboration through pull

Collaboration requests, code review, and issue tracking.

• Connects developers worldwide, fostering

Community open-source collaboration.
Why Use GitHub?

Centralized repository hosting.

Collaboration features streamline team

workflows.
Access to a vast community of developers and
open-source projects.
Collaborating with GitHub
Creating a GitHub • Sign up for a free GitHub account at github.com.
Account
• Click the "+" sign and select "New repository" to
Creating a Repository create a new repository on GitHub.

• Use git push to upload local repository content to a

Pushing Changes remote repository on GitHub.

• Initiate a pull request to propose changes and

Pull Requests collaborate with others on GitHub.
Best Practices

Branching • Adopt a branching model like GitFlow or GitHub

Flow to manage feature development and releases.
Strategies
Commit • Follow descriptive commit messages and best
practices for clean, readable commit history.
Guidelines
• Conduct thorough code reviews to maintain code
Code Reviews quality, share knowledge, and prevent errors.
Activity: GitHub account creation

Sign up for a free GitHub

account at GitHub
Activity : Git & GitHub Demo

Check Instructions (UVT)

Activity: Get stated using GitHub

GitHub Skills

To Do: Get started using GitHub

in less than an hour.
Resources
GitHub Training Manual

GitHub Git Cheat Sheet - GitHub Cheatsheets

Git and GitHub for Beginners - Crash Course (youtube.com)

Git vs. GitHub: What's the difference? (youtube.com)

CS50W - Lecture 1 - Git (youtube.com)

Git and GitHub Tutorial – Version Control for Beginners (freecodecamp.org)

React Project
Setting up a new React Project

# Create a React Project

npm create vite@latest hacker-stories -- --template react

# Runs the application

cd hacker-stories npm install npm run dev
Activity: React Project Demo

Check Instructions (UVT)

 hacker-stories/
--node_modules/
--public/
----vite.svg
--src/
----assets/
------react.svg
----App.css
Project Structure ----App.jsx
----index.css
----main.jsx
--.gitignore
--index.html
--package-lock.json
--package.json
--vite.config.js
Project Structure

• List of all third-party dependencies and other

package.json essential project configurations related to
Node/npm.

• Indicates npm how to break down all node

package- package versions and their internal third-party
dependencies.
lock.json • We’ll not touch this file.
Project Structure

• Contains all node packages that have

been installed.
• Since we used Vite to create our React
node_modules/ application, there are various node
modules (e.g. React) already installed
for us.
• We’ll not touch this folder
Project Structure

• Indicates all folders and files that

shouldn’t be added to your git
repository when using git, as such files
.gitignore and folders should be located only on
your local machine.
• The node_modules/ folder is one
example.
Project Structure

•Vite configuration file.

vite.config.js •Vite’s React plugin
showing up there.
Project Structure

• Holds static assets for the project like a favicon which is used
public/ for the browser tab’s thumbnail when starting the
development server or building the project for production.

• The HTML that is displayed in the browser when starting the

project.
index.html • Contains a script tag which links to your source folder where
all the React code is located to output HTML/CSS in the
browser.
Project Structure
• The main file.
src/App.jsx • It is used to implement React components. It will be used
to implement your application.

src/main.jsx • An entry point to the React world.

src/index.css • To style your overall application and components, which

comes with the default style when you open them.
src/App.css
Wrap-up

Single page application VS Traditional application

React JavaScript library for front-end development
Development Environment
Git & GitHub
Setting a React Project