React w1
React w1
Advanced Web
Development
Tunis Business School
Sophomore – Spring 2025
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
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
VS Code
• Editor to write code
• Integrate terminal to execute code
Vite
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
Configuring Git • Set up your username and email globally using git config --global.
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
GitHub Skills
To Do:
Get started using GitHub in less
than an hour.
Resources
GitHub Training Manual
Structure ----App.jsx
----index.css
----main.jsx
--.gitignore
--index.html
--package-lock.json
--package.json
--vite.config.js
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.