Frontend Flashcards

Question

What is the difference between class based components and anonymous components?

Answer 1

An anonymous component only has a Blade template and does not include a class, which the class based component does have.

Answer 2

the x- always has to be put in front of the components name and if you don't want to put anything into the component, you can close it right away and just have the one line given here to fully implement the component.

Answer 3

If you would like to disable double encoding, call the Blade::withoutDoubleEncoding method from the boot method of your AppServiceProvider: ``` class AppServiceProvider extends ServiceProvider { public function boot(): void { Blade::withoutDoubleEncoding(); } } ```

Answer 4

You may use the following syntax: `Hello, {!! $name !!}` Be very careful when echoing content that is supplied by users of your application. You should typically use the escaped, double curly brace syntax to prevent XSS attacks when displaying user supplied data.

Answer 5

``` @if (count($records) ===1) I have one record! @elseif (count($records) > 1) I have multiple records! @else I don't have any records! @endif ``` For convenience, Blade also provides an @unless directive: ``` @unless (Auth::check()) You are not signed in. @endunless ```

Answer 6

``` @auth // The user is authenticated... @endauth @guest // The user is not authenticated... @endguest ```

Answer 7

You may specify the authentication guard that should be checked when using the @auth and @guest directives: ``` @auth('admin') // The user is authenticated... @endauth ``` ``` @guest('admin') // The user is not authenticated... @endguest ```

Answer 8

``` @while (true)

I'm looping forever.

@endwhile ```

Answer 9

``` @forelse ($users as $user)

@empty

No users

@endforelse ```

Answer 10

``` @for ($i = 0; $i < INSERT VALUE; i++) The current value is {{ $i }} @endfor ```

Answer 11

``` @foreach ($users as $user)

This is {{ $user->name }}

@endforeach ```

Answer 12

While iterating through a foreach loop, a $loop variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop: ``` @if ($loop->first) This is the first iteration. @endif ``` If you are in a nested loop, you may access the parent loop's $loop variable via the parent property: ``` @foreach ($users as $user) @foreach ($user->posts as $post) @if (loop->parent->first) This is the first iteration of the parent loop. @endif @endforeach @endforeach ```

Answer 13

`$loop->remaining`

Answer 14

`@checked(old('active', $user->active)) ` This directive will echo checked if the provided condition evaluates to true.

Answer 15

You may use Blade's @include directive. All variables that are available to the parent view will be made available to the included view: `@include('shared.errors')` Even though the included view will inherit all data available in the parent view, you may also pass an array of additional data that should be made available to the included view: `@include('view.name', ['status' => 'complete'])`

Answer 16

If you try to `@include` a view which does not exist, Laravel will throw an error. To prevent this, use `@includeIf` instead of `@include`, which uses the same syntax.

Answer 17

``` @includeWhen($boolean, ... @includeUnless($boolean, ... ``` after the first argument, which is the condition that is being passed, you can just include whatever you want to using the normal syntax.

Answer 18

Unlike HTML comments, Blade comments are not included in the HTML returned by your application: `{{-- This comment will not be present in the rendered HTML --}}`

Answer 19

In the boot method of your package's service provider: ``` public function boot(): void { Blade::component('package-alert', Alert::class); } ``` Once your component has been registered. it may be rendered using its tag alias: ``

Answer 20

Blade components are written in kebab-casing and to access components out of subfolders you use dot notation, for example let's access a component called Button.php that is in the Inputs subfolder of the components directory:

Answer 21

You may pass data to Blade components using HTML attributes. Hard-coded,primitive values may be passed to the component using simple HTML attribute strings. PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix: ``

Answer 22

``` {{-- Short attribute syntax... --}} {{-- Is equivalent to.. --}} ``` This works if the passed attributes have the same name in camelCasing, as the HTML / PHP tags have in kebab-casing

Answer 23

You may use a double colon (::) prefix. For example, given the following component: ` ` The following HTML will be rendered in Blade: `

Answer 24

You may add them to an $except array property on your component: ``` class Example extends Component { protected $except = ['type']; } ```

Answer 25

Similar to inline components, anonymous components provide a mechanism for managing a component via a single file. However, anonymous components utilize a single view file and have no associated class, while inline components don't have a dedicated view file and just have their one class in which they use the render method to define their view. To define an anonymous component, you only need to place a Blade template within your resources/views/components directory.

Answer 26

You may do so by using the @props directive at the top of your component's Blade template. All other attributes on the component will be available via the component's attribute bag. If you wish to give a data variable a default value, you may specify the variable's name as an array key and the default value as the array value: ``` @props(['type' => 'info', 'message'])

merge(['class' => 'alert alert-'.$type]) }}> {{ $message }}

```

Answer 27

The @aware directive will make every prop passed to the parent also available to the child component.

Answer 28

We might define a layout component (resources/views/components/layout.blade.php for this example. but it could have any other name) that includes our basic layout, to oversimplify for the sake of an example: ``` {{ $title ?? 'Example Page }}

Examples

{{ $slot }} ``` Once the layout component has been defined, we may create a Blade view that utilizes the component. In this example we could do something like this: ``` @foreach ($examples as $example)

@endforeach ```

Answer 29

When defining a child view, use the @extends Blade directive to specify which layout the child view should "inherit". Views which extend a Blade layout may inject content into the layout's sections using @section directives. ``` @extends('layouts.app') @section('title', 'Page Title') @section('sidebar') @parent

This is appended to the master sidebar.

@endsection ```

Answer 30

The @method Blade directive can create this field for you: ``` ```

Answer 31

``` @push('NAME OF STACK') @endpush or if you want it to be conditional @pushif($condition, 'NAME OF STACK') @endPushIf ```

Answer 32

``` @push('scripts') This will be second... @endpush // Later... @prepend('scripts') This will be first... @endprepend ```

Answer 33

Blade allows you to define your own custom directives using the directive method. When the Blade compiler encounters the custom directive, it will call the provided callback with the expression that the directive contains. The following example creates a @datetime($var) directive which formats a given $var, which should be an instance of DateTime: ``` class AppServiceProvider extends ServiceProvider { public function boot(): void { Blade::directive('datetime', function (string $expression) { return "format('m/d/Y H:i'); ?>"; }); } } ``` After updating the logic of a Blade directive, you will need to delete all of the cached Blade views. The cached Blade views may be removed using the view:clear Artisan command.

Frontend Flashcards

(58 cards)

Examples