Advanced Web Development

Web Development:
Types of Web Development: Front-end web dev + Back-end web dev = Full-stack dev
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 Front-end frameworks and JavaScript libraries

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
 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:
React: a JS 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
(Facebook, Instagram…). 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.
Single-page application (SPA):
Traditional Websites Single Page application
a browser would request the HTML file and all linked encapsulates the entire application in mostly JS which
files from a web server for a website. If a user happens has all the knowledge about how and what to render
to navigate from page (/home) to page (/about) within with HTML (& CSS) inside it. For the most basic usage of
the same domain (mywebsite.com), there would be a a single-page application, the browser would request
new request to the web server for every navigation. only once a HTML file with one linked JavaScript file for
a domain.

Four Basic concepts to understand: Components, JSX, State, Props

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.
Git and GitHub:
Version Control
Definition and Importance Evolution from Traditional Methods
The management of changes to documents, computer Traditional methods involved manual backups, naming
programs, large websites, and other collections of conventions, and file duplication, which were error-
information. It is essential for tracking changes, prone and inefficient. Version control systems
maintaining a history of revisions, and enabling automate and streamline these processes.
collaboration among team members.
Git: a distributed version control system that tracks changes in files and coordinates work among
multiple people.
Features:
 Distributed: Every developer has a local copy of the entire project's history.
 Branching and Merging: Easy and lightweight branching and merging workflows.
 Speed: Fast performance for both small and large projects.
 Open Source: Developed as an open-source project, enabling community contributions.
Why Use it: 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.
Basic Git Commands:
 git init: Initialize a new Git repository.
 git add: Add changes to the staging area.
 git commit: Save changes to the repository.
 git push: Upload local repository content to a remote repository.
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 youremail@example.com
Git Workflow:

GitHub: a web-based platform that provides hosting for Git repositories and collaboration features.
Features:
 Hosting: Stores your Git repositories in the cloud.
 Collaboration: Enables team collaboration through pull requests, code review, and issue tracking.
 Community: Connects developers worldwide, fostering open-source collaboration.
Why Use it: Centralized repository hosting. Collaboration features streamline team workflows. Access to a vast
community of developers and open-source projects.
Collaborating with GitHub:
 Pushing Changes: Use git push to upload local repository content to a remote repository on GitHub.
 Pull Requests: Initiate a pull request to propose changes and collaborate with others on GitHub.
Best Practices:
 Branching Strategies: Adopt a branching model (GitFlow, GitHub Flow..) to manage feature development and
releases.
 Commit Guidelines: Follow descriptive commit messages and best practices for clean, readable commit
history.
 Code Reviews: Conduct thorough code reviews to maintain code quality, share knowledge, and prevent
errors.

React Project:
Setting up a new React Project:

Project Structure:
 package.json: List of all third-party dependencies and other essential project
configurations related to Node/npm.
 package-lock.json: Indicates npm how to break down all node package
versions and their internal third-party dependencies. We’ll not touch this file.
 node_modules/: Contains all node packages that have been installed. Since
we used Vite to create our React application, there are various node modules
(e.g. React) already installed for us. We’ll not touch this folder
 .gitignore: Indicates all folders and files that shouldn’t be added to your git
repository when using git, as such files and folders should be located only on
your local machine. The node_modules/ folder is one example.
 vite.config.js: Vite configuration file. Vite’s React plugin showing up there.
 public/: Holds static assets for the project like a favicon which is used for the
browser tab’s thumbnail when starting the development server or building the
project for production.
 index.html: The HTML that is displayed in the browser when starting the
project. Contains a script tag which links to your source folder where all the
React code is located to output HTML/CSS in the browser.
 src/App.jsx: The main file. 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 or src/App.css: To style your overall application and
components, which comes with the default style when you open them.