I am learning react native. i want to rewrite the following line using a plain javascript class.
module.exports = React.createClass({
to
export class Dashboard extends React.Component {
not sure if i am doing it right. in the original code, it just exports without giving a class name. can I do the same? or does it hurt if I give a name.
the full source code is there. the line i try to modify is line 19.
I depends on how you import the component. You are currently using named export so you need to import it by it's name - Dashboard:
export class Dashboard extends React.Component {
// and then import by name
import { Dashboard } from './myfile';
// or with require
var Dashboard = require('./myfile').Dashboard;
If you use default export you can name it however you like:
export default class Dashboard extends React.Component {
// and then import
import Dashboard from './myfile';
// or with custom name
import MyComponent from './myfile';
// or with require
var Dashboard = require('./myfile');
Related
I've noticed that classes generated with makeStyles and the use of hooks follow this nomenclature:
while the classes generated with withStyles and the use of HOC follow this one:
Is there a way to use makeStyles (I like to use hooks) but keep the nomenclature of withStyles? I'd like this because it's easier to analyze the html in the browser and pinpoint the class that generated each element.
The second (optional) argument to makeStyles is an object of options to control the behavior of makeStyles. One of the options is a name which is then used as a prefix for the class names. withStyles passes Component.displayName as the name option. You can specify whatever name you want in order to control the class name prefix, for instance in my example below the class name ends up being Hello-root-1.
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(
{
root: {
backgroundColor: "green"
}
},
{ name: "Hello" }
);
export default function App() {
const classes = useStyles();
return (
<div>
<h1 className={classes.root}>Hello CodeSandbox</h1>
</div>
);
}
I run command ionic generate pages/login but me return this error
Since you're using the React project type, this command won't work. The Ionic CLI doesn't know how to generate framework components for React
You'll have to make a new file in e.g src/pages/ (e.g. with the name xy.tsx) with the following contents:
import React from "react";
import {IonPage} from "#ionic/react";
const PageXY: React.FC = () => {
return (
<IonPage>
...
</IonPage>
);
};
export default PageXY;
and in your App.tsx aka Router you have to import it with import PageXY from "./pages/xy";
and hook it up to the Router like so: <Route path="/xy" component={PageXY} exact />
Hope this still helps someone
I was wondering if there is any possibility to add some functions to the prototype of a class in Typescript.
My situation is as this:
I've got a file with a class, e.g. image.ts:
export class Image {
b64img: string;
}
This class is generated and so I can't add methods to it. I'm using this class in other generated classes, so creating a new class with extends Image is not possible for adding functions.
Is there any option that I can add a function to my class in a separated file so I could use it on all objects of the class Image?
Thanks
You can. You can extend it by defining an extension to the module it is defined in.
Create a file called image-extension.ts or something like that.
Now, if in that file you would import Image like this:
import { Image } from `image`;
declare module 'image' { // same name than in the import!
export interface Image {
newMethod: () => void;
}
}
Image.prototype.newMethod = function() {
console.log('new method');
}
Now, wherever you import this file, you can use that method:
import { Image } from 'image';
import 'image-extension'; // import just for side-effects
Of course, you can also add the declare module to a d.ts file, so it gets loaded automatically, and in another file add the true functions to the prototype, making sure that such a file gets loaded in your application
Hey there I have this uiTypes.js file like this:
export default {
SELECT_ITEM: 'SELECT_ITEM',
DESELECT_ITEM: 'DESELECT_ITEM',
TOGGLE_ITEM: 'TOGGLE_ITEM',
}
And when I try importing its content like so, it works:
import uiTypes from './uiTypes';
console.log(uiTypes.SELECT_ITEM) // 'SELECT_ITEM'
But not like this:
import { SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM } from './uiTypes';
console.log(SELECT_ITEM) // undefined,
Am I missing something?
There is no destructuring for imports (notice also that exports and imports use the keyword as instead of a colon to avoid confusion with objects). You can either import the default export, individual named exports, or the module namespace object.
Your attempt is trying to import three named exports, while there is only a default export; that's why it's failing.
You should use named exports:
export const SELECT_ITEM = 'SELECT_ITEM';
export const DESELECT_ITEM = 'DESELECT_ITEM';
export const TOGGLE_ITEM = 'TOGGLE_ITEM';
or use "real" destructuring after importing the object:
import uiTypes from './uiTypes';
const {SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM} = uiTypes;
I am developing a React & Reflux app, which is bundled by webpack with babel-loader (v6), and I am experiencing es6 modules dependencies issues
For example, I have a component that use the reflux .connect() mixin :
import MyStore from '../stores/my-store';
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
When I import all modules individually in each file like this, everything's fine.
I then tried to improve my code by using deconstructed import statements :
...in a component :
//import One from '../js/one';
//import Two from '../js/two';
//import Three from '../js/three';
import { One, Two, Three } from '../js'; // Instead
...and in js/index.js :
import One from './one';
import Two from './two';
import Three from './three';
export { One, Two, Three };
App source code files are more concise using the above technique, because I can import all components in one import line.
But when I use this, some dependencies end up beeing undefined when I use them
If I use the same updated example...
//import MyStore from '../stores/my-store';
import { MyStore } from '../stores'; // Instead
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
...MyStore parameter ends up undefined in Reflux.connect method.
I tried to troubleshoot in the debugger, but I'm not really aware of what's going on with the __webpack_require__(xxx) statements in the generated bundle. There must be a circular dependency that babel-loader or webpack require could not figure out when there are the index.js files re-exporting individual modules.
Do you know any tool that can help me figure this out? I tried madge but it does not work with es6 modules, and I could not find anything that would tell me where anything is wrong
In order to get extended info about build, run:
webpack --profile --display-modules --display-reasons
It will give you bunch of information for optimisation/profiling.
import statement is used to import functions, objects or primitives that have been exported from an external module.
As per MDN doc, you can import the Modules not the directory.
import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
Reference URL:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
http://es6-features.org/#ValueExportImport
https://github.com/lukehoban/es6features#modules
http://www.2ality.com/2014/09/es6-modules-final.html
As a workaround keep one file as base.js and include all your 3 files.