I am new to React Native, I'm following a video tutorial for beginners. I'm developing on windows 10 and using React Native version 0.49.1 . In the tutorial I'm following there are two index files: index.android.js & index.ios.js.
As I understand those file are untied now to index.js file,
I got it from this question that was asked.
Nevertheless, I still want to work with two separate index files, but I don't know how to do so - do I have to delete App.js file and index.js files?
And if so, what should be the content of index.android.js & ios files?
I would appreciate an explanation or a quick guide on how to do it.
Thanks in advance :)
For projects created with react-native init, an index.js file is still generated, and looks something like this initially:
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('YourProjectName', () => App);
Manually adding App.ios.js and App.android.js in the same directory will allow you to include unique code for each platform, as it follows the pattern for platform-specific extensions. However, it won't be enough to have either one or the other. You need to include both otherwise the code splitting won't take effect (and will default to whatever is present in App.js).
So to answer your question, yes you need to delete App.js and replace it with android.App.js and ios.App.js. Then restart the React Native packager terminal window for your simulator or device to detect the change.
Related
First of all I know Laravel is a PHP framework and has nothing to do with the frontend(JavaScript) of my application. BUT laravel provides the possibility of using webpack which if I got things right is for node modules and other javascript stuff..
What I've done so far:
Installed ThreeJS with command:
npm install three
than executed
npm run dev
After that I included the Libary in my app.js file in the resources folder of Laravel like this:
var THREE = require('three');
(I tried including it whitout assinging it to a variable but that seemed not to work so I just did what some google research told me)
Again I ran npm run dev and the Libary was included inside my packed app.js in the public/js/ path of my project. Everything seems to be fine. I included the app.js file inside of my view and also set the script attribute type to module. But now when I try to import threejs via
import * as THREE from 'three';
inside my view it says that the module cannot be found. I know I could just copy the contents of ThreeJS inside the node_modules folder to my public path JS folder but I wanted to keep it as a node module. Any Advise?
I'm feeling like super stupid right now but adding a window.THREE instead of var three fixed the issue somehow.. Thanks for your help and time anyway!
Before you can instantiate Three.Js you have to import the library:
In your resources\js\app.js
import * as THREE from 'three';
const scene = new THREE.Scene();
However, it's recommended to create a instance in the component that actually requires it unless you need it globally.
I have four or five small web apps that I build and maintain for a small group at work. For the most part, they have the same layout and file structure. A lot of the files are the exact same across the apps. Here's an example index.js file that's the same in every apps' src/ directory.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
if (process.env.NODE_ENV !== 'production') {
console.log(`Environment: ${process.env.NODE_ENV}`);
}
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);
Copying and pasting works fine until I need to update something. A few months ago I started changing my React class components over to functional components with hooks. The only problem is I have to make that same change for every version of that file in every site.
I tried using bit and I thought about creating a local NPM package, but those aren't ideal options. I'd have to import each file and that doesn't really work the way I need. (I guess I could import the very first index.js file, but it doesn't seem like an ideal solution.)
I want to be able to edit a file in app A and next time I go back to work on app B be able to see the changes made to the file in A and pull them into B. That way I can make each of the shared files/components dynamic enough to work for all my apps. If the changes made on the file in app A don't work for app B, I can rework the file in app B and pull the changed next time I work on app A.
I hope this makes sense. Thanks in advance for any help you can offer!
I believe git submodules could be a valid option for you, especially for push/pull changes part.
In a react application .i have the following file : (I am using VSCode)
#example .js
export default helloWorld =()=>{
return "Hello World" ;
Is there a way , i can look for all the .js files which imports this file ?.
I understand different files can have this function by the same name .
So is there a way we can look which files have used something like :
import helloWorld from "somevariablePath/example.js"
try show all references or find all ref
I had the same problem recently, and realized theres not a perfect solution for this. The CommonJS modules aren't well-suited for static analysis.
Anyway, I found useful following tools:
JetBrains Webstorm IDE (Premium)
The feature Find Usages from this IDE is the most accurate tool I found. But its a paid IDE. (You have a 30 days trial period)
VSCode
The feature Find all references is not as accurate as previous one, but still useful.
Well i figured out an easy way to do that in the VSCode.
If i just use the absolute path (the absolute path can of course be shortened by using NODE_PATH environment variable in the .env file) of the file which i want to track(see whereever it is imported) .
I can just copy the path , do a Ctrl+Shift+F ,paste the path in the search bar and press Enter(Pressing Enter is important).
This will give all the files where that particular line of code ,in this case , import helloWorld from "absolutePath/example.js,is used
checkout dynamic import feature of webpack if fits yours requirement .
Dynamic import
or iterate using the file system(fs module) and load the file based on your condition
Hi I am creating an app on reactjs, which is canvas based, It require Createjs library, I am new for Reactjs I am not getting perfect idea how do this so I tried 2 ways one is using NPM install and other one is I kept my js into one folder and tries to import from there but nothing works for me, here my code
way 1 with npm install,
import createjs from 'createjs';
way 2 import downloaded js file,
import createjs from '../assets/js/createjsmin';
randomly I tried
import * as createjs from '../assets/js/createjsmin';
but nothing works for me
I add relative path to index.html and got Createjs library code into componentWillMount() using window.createjs, dn't know but I feel it can work to add all ramdom libraries in react.
So I made it work by installing this specific dependency
"#createjs/easeljs": "^2.0.0-beta.4",
And In my Component file I am importing them like this
import { Stage, Shape, TraceShape } from '#createjs/easeljs';
I am using Gatsby and importing jquery.
When I run Gatsby build I get the following error:
WebpackError: jQuery requires a window with a document.
This is due to Gatsby doing server side rendering.
I have read through a number of issues on GitHub (this one being the best one I could find).
My code looks like the following:
import React, { Component } from 'react'
import Link from 'gatsby-link'
import LandingScreen from '../components/LandingScreen'
import $ from 'jquery'
import 'fullpage.js/dist/jquery.fullPage.js'
import 'fullpage.js/dist/jquery.fullpage.css'
class TestPage extends Component {
componentDidMount() {
$('#fullpage').fullpage({
verticalCentered: false
});
}
render(){
return (
<main id="fullpage">
<LandingScreen />
</main>
)
}
}
export default TestPage
This is breaking so I tried the following based on the GitHub thread above, but this also fails:
if (typeof window !== 'undefined') {
import $ from 'jquery'
}
Can anyone advise how to import jquery?
Gatsby's components will run on both Node (no window object there) in order to produce static HTML and on the client's browser as React components. This is why you get this error.
The plugin you are trying to use needs to run only on the client because it needs the actual viewport dimensions to operate. Gatsby has a special API for this that you can use to run the plugin only on client side. A quick solution would be to load jQuery there and initialize your plugin on onClientEntry.
I would also suggest you find a more lightweight plugin that does the same thing without the jQuery dependency. It's a pity to use jQuery in a React stack. Maybe somebody else can recommend one.
Peter, I recently reported this to jQuery maintainers, but they politely told me... well... to kick rocks. Would be good, if you could badger them about this a bit, too.
Currently jquery absolutely requires window object, so it won't work on Node.js as a dependency. (with one exception: if you don't need a global jquery object, but just a local instance in one module, you can manually initialise it with JSDom, but that's probably not your use case)
Your way around this whole problem is that you don't actually have to import jQuery or its plugins on server side. So my approach was to create 2 separate entry point files - app.jsx and server.jsx - for client bundle and server-side bundle respectively and Layout.jsx as a shared root component.
app.jsx and server.jsx are entry points for client-side bundle and server-side bundle respectively, while Layout.jsx contains shared code with html.
I import jquery only in app.jsx bundle, so on client side it is present. On server side it is never imported and not included in server bundle.
You can take a look at my blog's code, how I set up Webpack in it and how do server rendering.