Lecture Notes on React, Git, and Tooling

React, Whitescript, Frontend

  • The lecture starts with React, Whitescript and Frontend.

  • Emphasis on Bartpack pro.

AI

  • Some participants wrote about less AI, others mentioned using AI.

  • Understanding and implementing concepts is crucial; just mentioning AI might not be sufficient.

Handelskompetenzen (Trading Competencies)

  • Participants should develop trading competencies during the course.

  • The task is for them to work on their tasks for a few hours and then discuss the outcomes in teams.

Project Overview

  • Administrative tasks will be clarified.

  • Theoretical aspects and the necessary data environment will be covered.

  • A written exam and a practical discussion will be conducted.

  • The official exam will be on the last day, followed by an unofficial sixth day for review.

  • Students have 5 days for the course, with the final exam happening after this period.

Brüche (Breaks) & Project Assignment

  • Brüche (Backend) will be used in the project.

  • Each participant will have a project assignment.

  • Administratively, a new repository on GitHub is expected, following a specific naming scheme.

  • A basic application with search functionalities should be implemented.

  • Implementing basic functionalities first is recommended.

  • Extra features can be experimented with on a new branch after completing the basic functionalities.

  • Focus on essential aspects during the practical phase.

Entitäten (Entities)

  • Each participant will have their workspace managed independently for their project.

  • Logging will be implemented later.

Coding Guidelines

  • Avoid using String Codelines.

  • Adhere to coding guidelines, including aspects like code structure and spacing (2 or 4 spaces).

  • These are examples of coding guidelines.

Tooling

  • A presentation on tooling will be provided, followed by a Git demo.

  • After the demo, participants can experiment with their projects.

Tool Installation

  • Install tools like Tiroler.

  • Use Visual Studio Code as the source code editor.

  • Online Logat is available for those who prefer it.

Extensions

  • Extensions can add functionalities.

  • Extensions allow additional features and performing various tasks.

Teams

  • Teams can be created.

  • Posts can be customized, including dark mode.

Air Sling & UpTraven Teams

  • Node JS Upload Four is used, with the v8 Engine.

  • Node.js is integrated with JavaScript.

  • Node.js is essential for backend tasks.

Speicherplatz (Storage Space)

  • Each project, particularly in JavaScript or Stripes Endmodus, requires significant storage space.

  • The node_modules folder is large and can be deleted to save space.

  • It can be reinstalled when needed.

  • Avoid committing node_modules folder to save space.

Package.json

  • The package.json file is essential for installing packages.

  • It contains data about the project and its dependencies (libraries).

  • Dependencies are listed in the node_modules folder.

  • The package.json file is updated automatically when installing or updating packages.

Version Numbers

  • Version numbers follow a format:

    • Major.Minor.Patch.

  • Major number: Indicates API-incompatible changes.

  • Minor number: Indicates smaller, backward-compatible changes and new functionalities.

  • Patch number: Indicates bug fixes.

  • Left side indicates the minimum version.

    • You can go up to just before version 12.0.0, but it does not include 12.0.0.

Interfaces

  • To avoid manually creating interfaces, use the provided website to generate interfaces.

Git

  • Use Git for version control.

  • Two main concepts: one that represents a part and one that represents the whole.

Git Workflow Explained

  • Local Folder (your Folder).

  • git init to initialize a repository.

  • After initializing, commit the changes.

  • Link a remote repository through Git Hub.

  • Use git commit -m to add a commit message.

Branching Explained

  • Hellblau (light blue) represents features.

  • Orange represents.

  • Create a branch for each feature, make commits, and then merge into development.

  • Create a release branch when a new version is ready.

Git Commands

  • Repository: A Folder.

    • .git after intializing with git init.

  • Using git status to check the changes.

  • git add (or git add .) to add files to staging, marked as green.

  • git commit to commit the changes with a message.

  • Switch between branches using the commands shown in the sewing example.

  • Use git push after git commit to upload the changes to the remote repository.

Conflict Resolution

  • Command to check conflicts.

  • Merging a branch into the main branch.

  • Keyword: Sorry

Getting Changes

  • git fetch get from another branch.

Branch Merging

  • The feature brand must be on current branch.

  • Now, let's say previously, we had 3 unresolved items. Now, the other 3 pages have been added after integrating the branch on current branch.

Reset Commits

  • Go back to the point where you were at the remote with:

    • gitreset−−hardorigin/maingit reset --hard origin/main

  • Resetting will erase everything.

  • There may be manual merges.

Git & Desktop

  • By clicking up in the right-hand corner, you can clone by taking the clone link from Github using:

    • gitclone[link]git clone [link]

  • If you're cloning, you know where you cloned it.

  • Using set upstream to make a Remote connection.

  • Establish a clear connection with the created project and Remote.

  • Visualize what is where.