I am playing around with https://reactjs.net/ , and want to setup an application inside my existing ASP.NET MVC application.
I have made a couple of simple React applications using the "default installation template" inside Visual Studio, but not based on ReactJS.net and where the content is only a subpage.
However, if I take the tutorial template used as examples:
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
There are no importing React like: import * as React from 'react'; , which I am used to.
So my question is: why not? And when are you supposed to import React?
Because import React from 'react'; is required when you are trying to import npm packages. Reactjs.Net doesn't use npm dependency and you're required to put the CDNs in your view using <script src="">. Basically, you're importing React automatically when you use the CDNs
Related
I'm using vue-docgen-cli to document my components. These are Vue3 using composition API and script setup under Vite.
Few of my components use some other component like this (filename: MyComponent.vue):
<script setup lang="ts">
import SearchField from "#/components/SearchField.vue";
import SearchFieldTags from "#/components/SearchFieldTags.vue";
import Pager from "#/widgets/Pager.vue";
import FragmentWithContext from "#/components/FragmentWithContext.vue";
. . .
How is it possible to add in the MyComponent documentation that it is using these four components?
In the function set in template.component of docgen.config.js there are isSubComponent and hasSubComponents arguments, but how to set them?
Thanks for enlighten me!
mario
I have an issue with Next.js. When I'm trying to import a node module,
the module uses the window object and Next.js is throwing an error: window is not defined.
The module is imported like this:
import * as widgets from 'survey-widgets';
widgets.autocomplete(Survey);
I guess Next.js dynamic imports will not work in my case. Is there any way of doing it?
Try deferring all the code that uses window or any other api that is restricted to the browser, in useEffect, because the code in useEffect only runs in the browser.
If you can't do that, then make an intermediary module which you will use to import survey-widgets and re-export what you need. So in the end, you import that intermediary module dynamically.
import * as widgets from 'survey-widgets
export default widgets
For anyone looking for the solution for this, I solved it with NextJs Dynamic imports with no SSR.
What I did instead is importing my top level component using dynamic import like this:
const MyComponent= dynamic(
() => import('../components/hello3'),
{ ssr: false }
)
So the hello3 component will no longer be used in server side rendering and instead it will render on client side.
Then just use it like this:
<MyComponent/>
I am using Meteor with React and Semantic-ui-react. I needed a toast function so I wanted to change to Fomantic UI. Everything related is loaded by NPM.
I removed semantic-ui-css and added fomantic-ui-css.
I removed the
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" /> from the head.
I changed all import 'semantic-ui-css/semantic.min.css'; to import 'fomantic-ui-css/semantic.css';
When I try to execute a
$('body')
.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'bottom'
})
;
I get TypeError: $(...).toast is not a function
I can't find anything on it over various searches through SO and repository issues.
Thanks for any help you can give!!
Phil
You basically need to import the semantic.js file, which will add the functionality to your jquery instances:
import 'fomantic-ui-css/semantic.js'
import 'fomantic-ui-css/semantic.css'
However, there is no need to import the .min.* minified files, because Meteor will use a js and css minifier when you build your app for production / deployment later.
According to the documentation found here
To import a css file I can do the following in 'pages/_app.js':
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Easy enough.
From my understanding this over rides the App component with the global css.
The documentation says:
Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:
However when I first initialize an app with Next Js I get a root page of pages/index.js
This contains my start up page. There is no app.js file or App component anywhere here.
I'm confused as to how the App component is integrated into the regular index.js file.
My question is:
Is the pages/_app.js automatically some how wrapped around pages/index.js?
Or do I have to import the myApp component into the pages/index.js file?
My question is: Is the pages/_app.js automatically some how wrapped around pages/index.js? Or do I have to import the myApp component into the pages/index.js file?
Yes, next.js automatically wraps your application with the component defined in _app.js. If you don't have that file, next.js uses its default.
You need to follow a specific pattern when defining your App component in _app.js. You can check here to see how you should set a custom App component: https://nextjs.org/docs/advanced-features/custom-app
I am currently working in a new version of a Dashboard application in React with an API in the back. The old one is a site that was made with ASP.NET WebForms technology.
We are not going to migrate all the sections at once, so we are working on phases. We need to achieve navigation between both systems without problems.
Our main issue was cross-site authentication but we were able to solve it pretty fast. Then we started working on navigation, going from the new system to the old one works fine but the problem is when you are at old system and you want to go a new section of the React App. It always redirects you to the last page you visited instead of redirecting to the one you are pointing. I think its something related to the history of React, based on what I was reading.
I'm pretty much new with React so I don't know where to start. We are currently using "connected-react-router" for Routing and here there is code from the App.js file (I dont know if it is useful but I have characters limitation while adding content to the body):
import React from "react";
import { ConnectedRouter } from "connected-react-router";
import numeral from "numeral";
import "core-js/stable";
import "regenerator-runtime/runtime";
import routes from "./routes";
import Layout from "./components/layout";
import Notifications from "./components/globalNotifications";
import es_locale from "../configs/es_locale";
numeral.register("locale", "es", es_locale);
numeral.locale("es");
const App = ({ history }) => {
return (
<ConnectedRouter history={history}>
<Layout>
<Notifications></Notifications>
{routes}
</Layout>
</ConnectedRouter>
);
};
export default App;
Let me know if you need more code to guide me.
Thank you.