so after installing react native using npx react-native init MyProject the project is running and open in emulator but the app file is not app.js instead app.tsx,
file strcuture
The question is i am new to react native and many tutorial i see is havgin App.js file, and the code in app.js is different between js and tsx at least that's what i see, or is it just the same if i follow tutorial like folder structure, syntax and everything.
That's because of this
New projects created by the React Native CLI or popular templates like Ignite will use TypeScript by default.
Read Using JavaScript Instead of TypeScript
You can just rename your tsx to jsx
Well, I had the same concerrns earlier today while working on the current version 0.71. This version does not create a App.js file. What I did was- I created a file App.jsx and added this code:
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
const hello = () => {
return (
<View>
<Text>App</Text>
</View>
)
}
export default hello
const styles = StyleSheet.create({})
it automatically renders the code in it instead of the default App.tsx file
You can write your JavaScript code in the Ap.jsx file
Related
I've created Vue.js 3 project, using Vite.js (no typescript).
My main.js file contains following contents:
import { createApp } from 'vue';
import App from './App.vue';
import * as BABYLON from 'babylonjs';
const app = createApp(App);
app.config.globalProperties.$BABYLON = BABYLON;
app.mount('#app');
My question is: how can I force VSCode to show me available babylon.js methods when I start writing this.$BABYLON. ?
I've already tried adding /// <reference path="../node_modules/babylonjs/babylon.module.d.ts" /> on top of the file, putting babylon.d.js in the root of the project (but as I understand that won't work until I use typescript?) and also tried with installing #types/babylon package via npm.
I would like to keep the project non-typescript and enable this autocomplete feature - unfortunately I've also couldn't find any plugin for vscode that would solve this issue.
I have a project in drive C and I need a component in some other project in some other drive D. How do I proceed?
I have a website already made without ReactJS but now I need React as it will make my work easier so I'm integrating the components this way.
Can we import components in a non-react app like this?
below is my written code
'use strict';
import App from '../../../../'; //Area of issue
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
// <App />
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#map');
ReactDOM.render(e(LikeButton), domContainer);
Yes, you can import your components from one project to another irrespective of your new project location. It's just that your project might require a little restructuring and then has to be transpiled into a ES5 package, bundled and imported into other projects like a npm package.
you can also publish it to the npm repository online and install it as a dependency in the project you want. You just need to take care of the imports and exports really well.
So, here is the basic idea..
use babel and webpack to transpile your react project and bundle into a npm package.
eg.
babel Path_of_your_c_drive_project --out-dir output_folder_path
--copy-files
Copy that npm package from the output folder and paste it in the node_modules of the new project, and then add it is as a dependency in package.json of your new project.
Import the components in the js files wherever you require in the new project, just the same way you import other packages and use them.
You might face a lot of "not found errors" if you don't give the paths correctly at all the imports and exports in the above steps.
Sadly, that is not possible.
Just store the components on the same drive, shouldn't be that much of a hassle.
Create a react project. Implement all the react components inside that with your required customizations. Then instead of directly rendering, export a function to render those components to the element reference you pass. Then build it and include the built js file in your project. Follow the links to get a better idea:
react-micro-frontends
is-it-possible-to-export-react-component-as-function-in-non-react-project
using-react-components-in-non-react-websites
add-react-to-a-website
I'm trying to use a local library downloaded using NPM (e.g. draggable-vue-directive ) and I want to use it on my project locally.
In my Vue Project I do import it by this way when it's in my node_modules project folder:
import { Draggable } from 'draggable-vue-directive'
How can I use this library if it's presented locally ?
I tried to do
import { Draggable } from '../myLibsFolder/draggable-vue-directive'
However I been getting this error ( ReferenceError: exports is not defined )
It doesn't use the library correctly. I just copied the library to a local folder and tried to import it but I couldn't...
Since you are using import, you can do the following.
const draggable = {
// Your code here
}
export default draggable
I am writing a React app with create-react-app which uses Webpack and the extract-text-plugin to generate bundled js and css files. Now I would like to know the filename of the generated CSS file in my JS file, like so:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{fileNameOfMyGeneratedCssFileHere}
</div>
);
}
}
export default App;
Is that even possible, maybe with a custom loader or Webpack plugin?
edit To clarify: create-react-app is not the problem here, I can eject it or create a custom configuration. My problem is how to know the CSS file name(s) from inside a JS script.
I'm trying to create a node module from my React Native App. The problem is, that the module is mostly a NativeModule. So my index.js looks like this:
import { NativeModules } from 'react-native';
export default NativeModules.MyNativeClass;
When i install my package to my node_modules (inserted local relative path to package.json) and import it to my JS file, it's always undefined.
I tried to export a test object, like export default {test:'test'}; and it works. So, is it possible to export the Native Module through node_modules?
If anyone is stuck to the same issue. Just link it with
react-native link
and your native modules from your node_modules get visible.