It sounds like a weird question. It is. But is it possible to do something like this in a react app that I instantiated with create-react-app?
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
...
i.e. even if I can't actually build the mobile view, I want to include it in my code to do something else with it
I only ask because I can't get around a
"Module not found: Can't resolve 'react-native' in '/Users/...' error, even with react-native in my package.json
well... the thing is that react-native will only work for native apps, if you need to use those components, you will have to use an alternative such as react-native-web.
https://github.com/necolas/react-native-web
This might be what you are looking for.
What you are looking for is react-primitives.
This library attempts to propose an ideal set of primitives around
building React applications, regardless of Platform. In the future,
this could be used as a shared interface among React and React Native
components that don't use platform-specific APIs.
Then, you import certain primitives from this package. They will render in native and/or DOM.
import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-primitives';
export function CrossplatformComponent() {
return <Text>Hello world</Text>
}
Related
I just trying to work with react-native-svg in my ionic react project and I was able to make it successful with react-native-web. But then if I do import like
import {StyleSheet, View} from 'react-native';
it says
cannot find module react-native.
how can i solve this?
I have a Next.js app with several pages in it. All of the pages look similar.
import React, { Component } from "react";
import from "components/Wrapper";
export default class About extends Component {
render() {
return <Wrapper />;
}
}
I would like to refactor it using functional component.
I read here that you don't have to import react package here in a page due to next.js routing system. Next.js docs also show examples without react import on a page component, but no explanation given.
Can you clarify please. Is it necessary to import React at all in this case? Can I remove the import React line?
Well, actually it is still a complicated issue for all of us to realise when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:
Next.js automatically adds the React import when JSX is used indeed. However, keep in mind that we still need to import React from 'react' when the React variable is used.
So this will show us, that whenever we want to use the JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case, we have to do that.
Update
Since the release of react v17.*.*, there is no need to import React from 'react' to use only JSX in the React and CRA apps, but you still need to import it for the usage of the hooks and other compartments that React offers with destructured named imports.
NPM libraries/packages
Though you will still need it if you want to create an npm package with react because under the hood it is the react-scripts job to do the automatic imports and babel or rollup won't do this on their own and they've just transpile the provided code. Keep in mind even in this case the usage of import React from 'react' is discouraged because the support will be dropped in the upcoming versions, so it is highly recommended to use import * as React from 'react' in these cases.
My application needs to have two pages, one landing page and one admin page. Both pages use different themes. I could not integrate css and js files of these two pages in a single page application.
const jquery = require('mdbootstrap/js/jquery-1.11.3.min.js');
window.jQuery = jquery;
window.$ = jquery;
require('mdbootstrap/css/bootstrap.min.css');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.css');
require('template/homePage/js/plugins/owl-carousel/owl.theme.css');
require('template/homePage/js/plugins/owl-carousel/owl.transitions.css');
require('template/homePage/css/animate.css');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.css');
require('template/homePage/css/preloader.css');
require('template/homePage/css/style.css');
require('mdbootstrap/js/popper.min.js');
require('mdbootstrap/js/bootstrap.min');
require('template/homePage/js/plugins/vivid-icons');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.js');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.jquery.js');
require('template/homePage/js/plugins/wow/wow.js');
require('template/homePage/js/plugins/jquery.easing.min.js');
require('template/homePage/js/main');
this sample import not good work. And I need outside link css and js.
I have two problem one of them is $(...).scrollspy is not a function
other WOW is not a function.
None of them work in sequence.
When you want to import resources into your React app, you use imports like this:
// Import with variable assignation
import logo from './logo.png';
// Import without variable assignation
import './css/index.css'
You can read more about this in the create-react-app documentation:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
You can read more about ES7 imports here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
I see what you're trying to do is to add libraries and resources to your app component, like if were a common html file, you can't do that in React , you need to find an implementation.
It is not recommended to use jQuery with React, because you use jQuery to write code in a simple and fast way to create complex implementations, now those complex implementations can be made with just React and JS, that is what React is designed for.
Now I understand that you might want to use jQuery even do is not that recommendend, so here is a link where you can get jQuery to install it as a plugin for your React app
https://www.npmjs.com/package/jquery
You would be able to import it to your component like this:
import $ from "jquery";
To use Bootstrap in your React app you check out the documentation of an implementation of Bootstrap for React, react-bootstrap:
https://react-bootstrap.github.io/getting-started/introduction
Well, recently I've started using the React.js library, and now I'm trying to use it with Firebase Hosting, with the TypeScript language. But, every time I try to write some code using tsx it just doesn't work, for example:
import * as React from "react"; //red underline under "react"
import "./App.css";
import logo from "./logo.svg";
class App extends React.Component {
render() {
return <h1>Hello</h1>; //red underline under <h1> and </h1>
}
}
export default App;
that way I just can't write any jsx code here, because it always appears the issue:
test.tsx(1,1): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists
Can somebody please help me with this?
How did you create your react application? If you used create-react-app you'll need to use react-scripts-ts as your --scripts-version flag. This should install the #types packages along side React's dependencies, eliminating your problem.
Also, it should get you started with an App.tsx file as the one provided in your snippet is not a valid typescript react component (i.e. the your render() method is not public).
Happy hacking!
I solved this issue by reloading VSCode.
ctrl+shift+P > Developer: Reload Window
I want to selectively use semantic-ui-css classes in my components. The problem is that I use PostCSS modules option which scopes locally all the class names for a specific component. When I use semantic-ui-react components, for example a button, it renders element button with classes ui button, but the included css gets scoped locally so instead of button i get button-min_ui__14RRq
I need to do one of two things:
Import Semantic-ui css without the classes being scoped locally
Make Semantic-ui components to use classes that are being scoped locally
For now I see that I have only one option:
import React from 'react';
import { Button } from 'semantic-ui-react'
import semantic from 'semantic-ui-css/components/button.min.css'
export default class Test extends React.Component {
render(){
return (
<Button className={[semantic.ui, semantic.button]}>Click Here</Button>
)
}
}
I'm explicitly stating what classes the button is to use. It works, but I have to do that for every element and it keeps the default classes. So I get ui button button-min_ui__14RRq button-min_button__Uio9b
Is there a way of doing this without it keeping the default classes?
I'm not sure I fully understand the question, but will give it a shot. Should you try excluding the semantic/global styles from PostCSS?
eg. If you are using webpack use 'exclude' in the loader definition.
(it's something we do in one of our the projects where I work)
Laura
you are having similar problem to me.
Making External Library(Semantic ui React) and CSS module work with webpack css-loader
From my understanding,you want to exclude semantic-ui-react-library styling from css module so that it work with your application. You can create multiple rules for css loader to resolve this.
Take a look at this Using Semantic UI With CSS Modules in Webpack
I always use css of a library not the components they provide, I write my own.
So install only semantic-ui-css. Now import like below in your react application.
import ReactDOM from 'react-dom'
import 'semantic-ui-css/semantic.min.css'
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))