[Question] @using in _imports vs in each component

[ofrades]

Is it better to have the @using... we need in the component or is advised to have them all in the _imports?

Also, is it not easy to understand for beginners what is going on if you had the @using in each component?

I was trying to understand all this components inside components and for me was a bit difficult.

[skclusive]

coming from reactjs, i find the @using ... via _imports.razor is better than list of imports on the top of the file.

template side of the components are defined in respective .razor files and all the parameters and other logics are in the code behind file.

yes i agree, it would be little confusing for new comers, until they aware of _imports.razor and other advantage in blazor is if we missed to import it any component used, we would be given with compiler warnings.

could you please explain any specific part which is confusing? happy to help or fix confusing things.

[ofrades]

Button as example:

In your docs you have

App.razor

@page "/"

<Button
    Class="custom-css"
    Style="margin: 10px;"
    Variant="@ButtonVariant.Contained"
    Color="@Color.Primary">
    Hello World
</Button>

In the React version:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Is more clear where the button component is coming and what is going on. And this is the very basic example, if you go to AppBar for example, things get more complex, but in the react version we can still follow:

import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

For me the main issue was to understand what was going on and I think the way the React version docs presented the components were a bit easier.

That said, now I get what you mean and I will try to implement using the _imports.

[skclusive]

i completely agree with you on this. though it looks verbose in react version. it is easy to navigate and understand dependencies. it blazor those imports are added to the compiled razors files. i guess tooling is essential here. hope VS / VS code would provide better intelligence and navigations for razor templates