In my file sketch.js before shifting to combined p5 and react, I had a command
amp = new p5.Amplitude();
after shifting to react, the 'p5' method is not defined anymore.
p.Amplitude()/song.Amplitude() isn't doing the job and returns
(TypeError: ... .Amplitude is not a constructor)
I really don't know from where or how import p5. I guess its something to do with the web config but not sure what.
I've npm install both p5 and react-p5-wrapper, and except this line and rest of the things that required amp all the code running as expected, and I can play music/adjust background with sliders etc ...
at the begging of the file I'm importing:
import React from 'react';
import 'p5/lib/addons/p5.sound';
import 'p5/lib/addons/p5.dom';
I will really be glad for little help!
You might be able to try:
import * as p5 from './{library-path}/p5.js';
It looks like P5 was not originally set up for easy ES6 imports.
This GitHub issue from 2016 seems to identify a similar problem. https://github.com/processing/p5.js/issues/1734
More recently it looks like it can be used correctly with NPM:
https://medium.com/front-end-weekly/learning-the-p5-canvas-drawing-library-in-es6-and-webpack-bf514a679544
Also check out this other potential answer here.
How to use React with p5.js
Related
When we write code in index.js file in src folder of an React app first of all we write this line:
import React from 'react';
I know react is a package
But I want to know what is React basically
an object, a method or something else.
The React variable that you import is an object, and it contains most of the methods that are used by React when generating a web-page.
The reason this import has been historically required is because the JSX that you write (e.g. return <p>text</p>) gets converted into a function call, calling the React.createElement function.
Note that in newer versions of React you no longer need to import react when using JSX. See https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more information.
Credit to Olivier Boissé for an answer in the comments.
In order to find out what React is, you just need to write:
console.log(react);
Then you will see that it is an object with many properties and methods.
String:
import React from "react";
We are writing in order to import this object into a file where we will use some of its method. If you don't use anything from React in the file, then you don't need to import it.
For example, in react 18, it is no longer necessary to import the react object into a file index.js
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
In any case, at this stage of your study of react, it may not be entirely clear to you what is used in it and for what, but in the future you will become more aware of all the possibilities of react. There is a time for everything
Are there any code samples that show how to use Surveyjs with React and TypeScript? I tried importing it into my project and using the sample code from here.
https://stackblitz.com/edit/surveyjs-react-stackoverflow45544026
I got a module parse error on this line.
import "survey-react/survey.css";
So, I tried commenting it out to see what would happen. Then, TypeScript complained about this line
var model = new Survey.Model(json);
It said Model does not exist.
My project contains the type definitions in survey.react.d.ts. So, I'm not sure what the issue is.
Thanks,
Mike
I use Surveyjs in Angular which uses TypeScript.
I generally do : import * as Survey from "survey-angular"; and we dont any errors like Model does not exist etc.
I would suggest you to try out: import * as Survey from "survey-react"; and check if its working.
Also, if you want quick start boilerplate of React+Surveyjs , you clone/fork from this link
I have a large bundle that needs to be split into several chunks to get below the 2MB PWA restriction.
From the BundleAnalyzerPlugin I can see that I would benefit from trying to split out lodash, fontawsome and moment into separate chunks/bundle files.
I have tried to use the import() splitting technique described here but can't see how to make it work for Fontawesome.
The below example does not work, since it still leaves fontawesome in the bundle and only loads icons when interacted with.
import { faBell, faEyeSlash, faEye} from '#fortawesome/free-solid-svg-icons';
import { faBell as regularBell} from '#fortawesome/free-regular-svg-icons';
import('#fortawesome/fontawesome-svg-core').then(fontawesome => {
fontawesome.library.add(
faBell, faEye, faEyeSlash, regularBell
)
})
What is the correct technique for separating packages such as lodash, fontawesome and moment into separate bundles?
Kind regards /K
For tree-shaking to work with the font-awesome react packages in webpack, I needed to import the icons from the subfolder directly like this:
import { faBell } from '#fortawesome/free-solid-svg-icons/faBell';
import { faEyeSlash } from '#fortawesome/free-solid-svg-icons/faEyeSlash';
import { faEye } from '#fortawesome/free-solid-svg-icons/faEye';
import { faBell as regularBell } from '#fortawesome/free-regular-svg-icons/faBell';
I am on webpack v4 and fontawesome v5.
I don't know what exactly are you trying to come up with but i'm assuming you want a lower bundle size then I did a research for you:
If you really want to push your bundle size to the lowest then look for gzip compression
https://webpack.js.org/plugins/compression-webpack-plugin/
A little bit research would lead you to this:
https://webpack.js.org/guides/code-splitting/
What is the correct technique for separating packages such as lodash,
fontawesome and moment into separate bundles?
For lodash:
// You should be using:
import isEmpty from 'lodash/isEmpty'
// instead of:
import _ from 'lodash';
import { isEmpty } from 'lodash';
read: https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark/
For moment:
https://medium.com/#Memija/less-is-more-with-moment-and-moment-timezone-d7afbab34df3
For fontawesome:
I don't know exactly is this?
The below example does not work, since it still leaves fontawesome in
the bundle and only loads icons when interacted with.
Yes, it'll be included to the bundle of course depending on what you've stated in your config? What you did is from the docs itself:
https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking
I'm new to React, still struggling to understand some basics, sorry if my question seems to be weird. We know we need to import modules as
import sth from 'sth';
so when we use Jest, don't we need to do as:
import { test, expect...} from 'Jest';
As #nahanil points out, Jest puts the methods you need in the global scope of your NodeJS runtime. If you put a console.log(global) in your file when running jest, you will see the methods are hooked onto the global scope. Other libraries such as assert does not follow the same convention, and you will need to import the assertions you need.
That happens here:
https://github.com/facebook/jest/blob/160d27ae9b6728dccf268f8a98351bcf82a7d9e1/packages/jest-environment-node/src/index.ts#L21
As explained in the first section in official documentation api
📚 :
In your test files, Jest puts each of these methods and objects into the global environment. You don't have to require or import anything to use them. However, if you prefer explicit imports, you can do import {describe, expect, test} from '#jest/globals'.
import {describe, expect, test} from '#jest/globals'
I've noticed strange behavior in my react-redux actions import.
So, I import import * as types from './types'; as usual, everything is clean in my console and all code is works.
But I'm worried about this little error:
What does it means and why my chrome console think this is kinda an error?
Anything I should be worried about?
how you export your const , component from ./types file matters in import.
check below link
Difference between import X and import * as X in node.js (ES6 / Babel)?