How to import the folder as Vue component - javascript

I want to display different Vue component for the mobile device. And I found this solution (https://stackoverflow.com/a/48515205/11079653) via mixin.
And, for example, I have the component - Card.vue. But for the mobile device, I have created CardMovile.Vue.
Now I want to put these components in the folder Card which will contain index.js
-Card
--Card.vue
--CardMobile.vue
--index.js
After that, I just want import Card in my App.vue and index.js should decide what component needed (Card.vue or Card.mobile.vue)
<template>
<Card></Card>
</template>
<script>
import Card from './Card'
</script>
is it possible?

You could try to write the following in the Card/index.js file:
import isMobile from 'is-mobile'
import Card from './Card.vue'
import CardMobile from './CardMobile.vue'
export default isMobile() ? CardMobile : Card

Related

Rows, Cols, and Tables in React JS

I'm a React JS Beginner and I'm trying to create a table (or grid) by React Js. I've searched through different sites and tried different ways. I've used react-row, react-bootstrap, react-table, and followed the instructions step by step. However, none of them works. I tried to display a row with 3 cells but all of them displayed 3 rows :<<. Please, can you guys give me other ways or show me how to use the 3 mentioned libraries clearly. Thanks
Here is one of my case,
import React, {useState, useEffect, Component} from 'react';
import AppNavBar from './AppNavBar.js';
import {Container, Row, Col} from 'react-bootstrap';
const RestaurantReview = (props) => {
return(
<>
<AppNavBar />
<Row>
<Col>1</Col>
<Col>2</Col>
<Col>3</Col>
</Row>
</>
)
}
export default RestaurantReview
If you have a stylesheet that you're referencing in this component you can add the below line at the top of it to ensure you pull in the default bootstrap styles.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css");
Then you can import that stylesheet in your App.js component or into RestaurantReview.js whichever you prefer. Preferably in App.js that way you can use the bootstrap styles in other components.
App.js
import React from "react";
import RestaurantReview from "./components/RestarauntReview";
import "./styles.css"; // this is where you import the bootstrap styles
function App() {
return (
<div className="App">
<RestaurantReview />
</div>
);
}
export default App;
This way you won't have to change any of your code in RestaurantReview.js
Here is a codesandbox with all of the code.

How can I create a new portal in react js?

I'm trying to create a new portal with an id .
This is the index html file in the public folder :
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="other"></div>
</body>
And here I tell react to render this component inside the div with the id of root :
import React from 'react';
import ReactDOM from 'react-dom';
function New() {
return ReactDOM.createPortal(<h1>DEMO</h1>, document.getElementById('other'));
}
export default New;
But when I npm start I dont see anything inside the div with the id of other .
How can I create a new portal in react js properly ?
I solved the problem by including the New component inside App.js file :
import React from 'react';
import logo from './logo.svg';
import './App.css';
import New from './New';
function App() {
return (
<div className="App">
<New />
</div>
);
}
export default App;
And when I inspect it , the New component is actually inside the div with the id of other .

How I can Highlight the code line in page with React.js in file .jsx?

I try some library but nothing done the job.
I try:
react-syntax-highlighter
(https://www.npmjs.com/package/react-syntax-highlighter)
after install and following the documentation the module always not found in my file .jsx. The dependency is in my package.json but the module is not found. (paranormal activity)
react-highlight
(https://github.com/akiran/react-highlight)
the module is found but don't work, the coloration of the line stay always dark
react-highlight
(https://www.npmjs.com/package/react-highlight)
... and more
If someone have any solution for color my text ^^
the code is :
import React, { useState, useEffect } from "react";
import Highlight from "react-highlight";
export const ButtonLib = () => {
return (
<div>
<pre>
<code id="foo" ref={myRef}>
<Highlight language="javascript">
import React from "react";
import { Button } from "Antd";
export const Button = () => {
return (
<span>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<JumboButton>Jumbo</JumboButton> <AuthenticationButton>Authentication</AuthenticationButton>
</span>
);
}
</Highlight>
</code>
</pre>
</div>
);
};
As Per the official documentation of react-highlight
Visit Adding Styles In React Highlight
From my perspective Adding a import statement in your component should work .
import 'highlight.js/styles/github.css';
react-highlight only converts your code in HTML with CSS classes. Without any CSS definitions, you won't see much of a difference.
You have to include CSS/styles from highlight.js, which are already included in the node package, so you can import one of them right away.
There is no need to add highlight.js as a dependency.
Instead of
import 'highlight.js/styles/github.css'
you could write:
import 'react-highlight.js/node_modules/highlight.js/styles/github.css'
You can preview all styles at https://highlightjs.org/static/demo/.

Rendering the component in the react as variable vs jsx component

The following code is taken from crate react app
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.register()
The below code i have written
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine
ReactDOM.render(a,document.getElementById('app'));
render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed
2)i tryied with {a} also i failed a is also javascript method why it failed
You have two issues.
First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.
Second one: you are not rendering any component. The root of a react application must be a component.
So change your code to something like:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));

How to separate <v-navigation-drawer> in vuetify vue.js app?

I'm trying to create a component out of my app's <v-navigation-drawer>, and I'm seeing an error:
Unknown custom element: <app-navigation-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Being new to vue.js, I've figured out components to be used within a specific route, but can't figure out using a custom component in the main App.vue file.
I've tried importing and adding it as a component in the Vue instance, I've also tried importing it within App.vue and exporting a default component with that as a component.
Q: Can someone please help me understand where I would need to register this component, or what I'm doing wrong?
App.vue
<template>
<div id="app">
<v-app>
<app-navigation-drawer/>
</v-toolbar>
<v-content>
<v-container class="grey lighten-5" fluid="fluid" fill-height="fill-height">
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</div>
</template>
main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Vuetify from 'vuetify';
import NavigationDrawer from './views/NavigationDrawer.vue';
Vue.use(Vuetify);
new Vue({
router,
store,
components: { NavigationDrawer },
render: h => h(App)
}).$mount('#app');
NavigationDrawer.vue
<template>
<v-navigation-drawer app stateless value="true">Drawer</v-navigation-drawer>
</template>
<script>
export default {
name: 'app-navigation-drawer'
}
</script>
It is recomended you declare your component like this:
components: { 'app-navigation-drawer': NavigationDrawer }
That should work.
If you want to do it directly, use the name as declared:
<NavigationDrawer></NavigationDrawer>
Reference: https://v2.vuejs.org/v2/guide/components-registration.html

Categories