In my React project I've got this PresentationManager class that I call a simple method on at the end of my index.js file, like so:
presentationManager.startPresentation();
And the method does only the following:
var scoreAudio = new Audio("path/to/myWav.wav");
scoreAudio.load();
scoreAudio.volume = 0.5;
scoreAudio.play();
When I run my code these lines are executed without any Exceptions but no audio plays.
If I take the exact same 4 lines, and put them inside an HTML page script tag and nothing else, it works perfectly, and plays my audio.
Any idea why?
Below is the complete code of my index.js file.
Paul
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import pData from './data/pData.js';
import tData from './data/tData.js';
import PresentationManager from './presentation/PresentationManager.js';
var presentationManager = new PresentationManager(tData, pData);
ReactDOM.render(
<App presMgr={ presentationManager }/>,
document.getElementById('root')
);
presentationManager.startPresentation();
Related
I'm working on a POC on stackblitz environment, while trying to import the app.tsx file, Import error, can't find file: getting this error in browser.
Below is my project link
https://stackblitz.com/edit/react-ts-kvyax9
Please help.
You have lots of typos/spelling mistakes in your imports.
In index.tsx, you have this import:
import App from './App';
whereas your app file exists as app.tsx not as App.tsx. You need to mention the filename correctly as
import App from './app';
Similarly, in app.tsx, all your imports are referencing incorrect filenames. Change them to this:
import A from './a';
import B from './b';
import C from './c';
import D from './d';
import './style';
I have installed the "yarn add react#experimental react-dom#experimental",and use the unstable_createRoot,but have the error with start.
this is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App/>);
the result :
Uncaught TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.unstable_createRoot is not a function
so help it work
I am trying to figure render a complete seperate admin path with its own routes.
Is it possible to render say admin page that is with and existing project.
At the moment I have the following code it is working very well.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './client/App.js';
import Admin from './admin/admin.js';
var pathname = window.location.pathname;
if (pathname.substring(0, 6) == '/admin') {
ReactDOM.render(<Admin />, document.getElementById('root'));
} else {
ReactDOM.render(<App />, document.getElementById('root'));
}
I'm struggling to understand what you want to do exactly. You already have everything you need, Admin and App are components and therefore small projects I would say. However, you shouldn't do it that way and instead use react-router it avoids you to check the window location pathname by yourself and will save you a lof of time and headache.
I have created component folder in src folder and tried to write simple greeting program for that I have created 3 files:
GreetUser.jsx
index.jsx
index.html
while compiling it is showing that could not find required index.js file.
I have written 3 files in Component folder and have imported GreetingUser module in the index.jsx file and while compiling it is showing that could not find required index.js file.
1.GreetingUser.jsx
import React , {component} from 'react';
class GreetUser extends component
{
render()
{
return <h1>Greetings from suraj!!!!</h1>;
}
}
export default GreetUser;
2.index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';
import GreetUser from './Component/GreetUser.jsx';
ReactDOM.render(<GreetUser/>,document.getElementById('aaa'));
serviceWorker.unregister();
Could not find a required file.
Name: index.js
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.
index file must with .js extension and not jsx is not react component.
index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL.
You can modify webpack configuration if you need it.
You can look at additional answers: Renaming index.js to index.jsx in react app and Why does create-react-app creates both App.js and index.js?
Trying to use react-data-tables here and getting errors left right and center. Going crazy.
After following the instructions as per https://github.com/adazzle/react-data-grid and using the code samples from http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid I am having the following issues.
If I use this in my file
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import ReactDataGridPlugins from 'react-data-grid/addons';
var Toolbar = ReactDataGridPlugins.Toolbar;
var Selectors = ReactDataGridPlugins.Data.Selectors;
I get a "Cannot read property 'Toolbar' of undefined.
If I try
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import Toolbar from 'react-data-grid/addons';
import Selectors from 'react-data-grid/addons';
I get the following error:
React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of HostProviderList.
And if I try
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import {Toolbar} from 'react-data-grid/addons';
import {Selectors} from 'react-data-grid/addons';
I get this error
Warning: Unknown props onGridSort, columns, rowGetter, rowsCount, minHeight, onRowUpdated, toolbar, onAddFilter, minColumnWidth, columnEquality, enableCellSelect, rowHeight, enableRowSelect, rowKey, rowScrollTimeout, cellNavigationMode, headerRows, columnMetrics, cellMetaData, selectedRows, rowSelection, expandedRows, rowOffsetHeight, sortColumn, sortDirection, onSort, totalWidth, onViewportKeydown, onViewportKeyup, onViewportDragStart, onViewportDragEnd, onViewportDoubleClick, onColumnResize on tag. Remove these props from the element.
I am not sure what to do here. If I do just the basic data-grid as per the online example it works fine. However as soon as I try anything with the addons.jsx file it fails.
On a side note
nmp install react-data-grid/addons
does not work. The git repo is not found. However I do see that after doing an npm install of react-data-grid I do have a addons.jsx file that imports dist/react-data-grid.ui-plugins.js
The right way to import is
import { Toolbar, Data } from 'react-data-grid/addons';
const Selectors = Data.Selectors;