Category: Workshop

Git Commands: How to Remove Local Git Branches that are Merged or Nonexistent

Over time, your local git branches list can become overwhelming, particularly if you develop on a single branch, generate a pull request, merge it into the main branch, and then remove the remote git branch once it has been merged. After the branch is removed from the remote repository, there is no need to keep it on your local machine.

The following command will delete all local branches that have been merged into the main branch. If your git trunk branch is not named main or you wish to remove all branches that have been merged into a branch other than main, simply modify the two instances of the word main in the command to reflect the name of your branch.

Remove local merged git branches

To remove all the local branches, which are merged into the main branch, navigate to the root of the repository and run the following git commands,

  • Fetch the latest updates from the git repository
git fetch
  • See the list of local branches available in the repository
git branch
  • Delete all local branches that have been merged to main branch 
git branch --merged main | grep -v "^\* main" | xargs -n 1 -r git branch -d

The above steps will remove all the branches from the local computer, which are already merged in main branch.

Remove local noexistent git branches

Similarly, to remove all the branches from the local computer, which are deleted or not exists on the remote repository, navigate to the root of the repository and run the following git commands,

  • Fetch the latest updates from the git repository
git fetch
  • See the list of local branches available in the repository
git branch
  • Delete all local branches that have been merged to main branch 
git branch -vv | grep ': gone]' | grep -v '\*' | awk '{ print $1; }' | xargs -r git branch -D

How to upload file code using Laravel

To upload a file using Laravel, you can follow these steps:

Create a new form in your Laravel view with an input field for the file:

<form method="POST" action="{{ route('file.upload') }}" enctype="multipart/form-data">
    @csrf

    <input type="file" name="file">

    <button type="submit">Upload</button>
</form>

Define a new route in your routes/web.php file that points to a controller method that will handle the file upload:

Route::post('/file/upload', [App\Http\Controllers\FileController::class, 'upload'])->name('file.upload');

Create a new controller method in FileController that will handle the file upload:

public function upload(Request $request)
{
    // Validate the uploaded file
    $request->validate([
        'file' => 'required|file|max:1024', // limit file size to 1 MB
    ]);

    // Store the uploaded file in the storage/app/public directory
    $path = $request->file('file')->store('public');

    // Generate a URL for the uploaded file
    $url = Storage::url($path);

    // Redirect back with a success message
    return back()->with('success', 'File uploaded successfully: ' . $url);
}

In the upload() method, we first validate that the uploaded file meets our requirements (in this case, it must be a file and not exceed 1 MB in size). We then use the store() method on the uploaded file to store it in the storage/app/public directory. This directory is publicly accessible, so we can generate a URL for the file using the url() method on the Storage facade. Finally, we redirect back to the form with a success message that includes the URL of the uploaded file.

You can now test the file upload functionality by navigating to the form and selecting a file to upload. If the file meets the validation requirements, it will be uploaded and a success message will be displayed. You can then access the uploaded file at the generated URL.

Getting started with ReactJS

Setting up a local environment is recommended way to learn ReactJS because the local setup allows you to complete the tutorial using your choice of editor, use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Let’s start with creating a new ReactJS application.

Create React App

Creating React App is a comfortable environment for learning and building an application in React.

There are few prerequisites for creating a React app as follows,

  • Node.js >= 14.0.0
  • npm >= 5.6

If above requirements are satisfied, you can run the following command to create a new react application,

npx create-react-app my-react-app

You can change my-react-app to anything you want to name your app.

The create-react-app command will set up everything you need to run a React application. Now you are ready to run your first real React application! Go to your application directory using the following command,

cd my-react-app

Now, run the following command inside your application directory to run your application,

npm start

It will compile your application and open it in the new browser window or tab. If not, you can open your browser and write localhost:3000 in the address bar. Your application will look like screenshot below,

If you check your command window, it will show the following output,

You can see that command window is also providing command to create a production build for your application.

Using ReactJS in the HTML File

Now that we know what ReactJS is, we can start with different usage of ReactJS. If you don’t know what ReactJS is, read the ReactJS introduction.

In this article, we will learn to use ReactJS directly in the HTML file. There are some prerequisites to adding ReactJS script inside the HTML code. We need to include the following three javascript in the head section of the HTML file.

  • ReactJS
  • ReactDom
  • Babel

The first two allow us to write ReactJS code in our JavaScripts, and Babel will allow to write JSX syntax and ES6 in older browsers.

Example

Let’s see an example of using ReactJS in the HTML file,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }
      ReactDOM.render(<Hello />, document.getElementById('example'))
    </script>
  </body>
</html>

This way, we can use ReactJS for testing purposes. But for production use, we have to set up a React environment.

ReactJS Introduction

ReactJS is one of the most popular JavaScript front-end libraries for building user interfaces with a strong foundation. It has a robust and rapidly growing developer community and a declarative, efficient, and flexible library for building reusable UI components. It is an open-source, component-based front-end library responsible only for the application view layer. 

ReactJS is one of the most popular JavaScript front-end libraries for building user interfaces with a strong foundation. It has a robust and rapidly growing developer community and a declarative, efficient, and flexible library for building reusable UI components. It is an open-source, component-based front-end library responsible only for the application view layer. 

Initially, it was developed by Jordan Walke, a software engineer at Facebook and maintained by Facebook. Later, it was used in other Facebook products like WhatsApp & Instagram. Facebook implemented ReactJS in its newsfeed section in 2011, but it was released to the public in May 2013.

The main objective of ReactJS is to develop interactive User Interfaces (UI) with the help of virtual DOM (JavaScript object) to improve application performance because the JavaScript virtual DOM is faster than the regular DOM because, it only changes individual DOM elements instead of reloading complete DOM every time. It uses component and data patterns that improve readability and helps to maintain larger apps.

The components are the heart of all React applications. These component are used to make a React application. Each component is responsible for outputting a small, reusable piece of HTML code and can be nested with other components to allow complicated applications.