I want to build my react project into a bundle.js file and then use that bundle in a plain javascript file. This is to integrate the react application with another application that uses plain javascript
Do I need to eject my application and change the webpack config so that the index.js gets exported?
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import data from './mocks/data'
import { Provider } from 'react-redux';
import store from './redux/store'
function callback() {
return data;
}
function loadApp(root, callback) {
ReactDOM.render(<Provider store={store}><App getData={callback} /></Provider>, document.getElementById(root));
serviceWorker.unregister();
}
if (process.env.NODE_ENV == "development") {
loadApp('root', callback)
}
export default loadApp
Related
Following this beginner React tutorial
https://www.youtube.com/watch?v=Ke90Tje7VS0&ab_channel=ProgrammingwithMosh
Have installed React and Babel and have React working on http://localhost:3000/ (default screen)
But when I try to change the default render to a Counter it does not render, my code seem to be identical to the tutorial, any help appreciated.
No errors showing on debug console.
Have two files index.js and counter.jsx
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css";
import App from "./App"
import registerServiceWorker from "./registerServiceWorker";
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';
ReactDom.render(<Counter />, document.getElementById("root"));
registerServiceWorker();
counter.jsx
import React, { Component } from 'react';
class Counter extends Component {
render() {
return <h1>Hello World</h1>;
}
}
export default Counter;
I don't understand why this is happening! All good in local dev while I was working on the application. but after production build shows just a blank screen.
my App.js file
import React from "react";
import "react-perfect-scrollbar/dist/css/styles.css"
import "react-toastify/dist/ReactToastify.css"
import "react-image-lightbox/style.css"
import "bootstrap/dist/css/bootstrap.min.css"
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import "./App.css"
import Routes from "./routes";
import {ToastContainer} from "react-toastify";
const App = () => {
return (
<>
<ToastContainer autoClose={3000}/>
<Routes/>
</>
);
};
export default App;
Here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById("root"));
In my package.json:
"homepage": "."
Can anyone help how can I fix this?
I am a beginner in react js, I have a problem with compiling a react app, can someone show me the problem, please
index.js:
import React from 'React'
import ReactDOM from 'react-dom';
import Myinfo from 'Myinfo.js';
ReactDOM.render(<Myinfo />, document.getElementById('root'));
Myinfo:
import React from "react";
function Myinfo() {
return (
<div >
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
</div>
);
}
export default Myinfo;
Here is the file structure of the project.
C:
-react js:
-reactjs:
-src:
-Myinfo.js
-index.js
Since Myinfo.js is in the same directory as your react app then try this
import Myinfo from './Myinfo.js';
I am attempting to implement a Redux store into my react application. I am using Auth0 for Authentication and Authorization. I need to store data such as UserID and permissions into my store. Currently my index.js file is as follows:
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Auth0Provider } from "./react-auth0-spa";
import config from "./auth_config.json";
import history from "./utils/history";
import {createStore} from "redux";
import rootReducer from './redux/reducer';
import {Provider} from "react-redux";
//create Redux store
const store = createStore(rootReducer);
// A function that routes the user to the right place
// after login
const onRedirectCallback = appState => {
history.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
);
};
ReactDOM.render(
<Auth0Provider
domain={config.domain}
client_id={config.clientId}
redirect_uri={window.location.origin}
audience={config.audience}
onRedirectCallback={onRedirectCallback}
>
<App />
</Auth0Provider>,
document.getElementById("root")
);
Should the Provider for Redux wrap the Auth0 provider or should Auth0 wrap Redux?
It shouldn't matter. Everything nested inside of the two providers, regardless of which is wrapping the other, should have access to what they provide.
I am trying to aggregate all imports at one location and then export it for other components to use
I have a src/car folder with car.js and index.js inside it
code inside index.js is as below
import React from 'react';
import ReactDOM from 'react-dom';
export {React, ReactDOM}
code inside car.js is as below
import * as Wfmimport from './index';
export class Car extends Wfmimport.React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
my src/index.js has following code
import React from 'react';
import ReactDOM from 'react-dom';
import * as name from './car/car'
import './index.css';
ReactDOM.render(<name.Car />, document.getElementById('root'));
when I run the code, I get error "'React' must be in scope when using JSX react/react-in-jsx-scope when trying to do it from a index file"
can anyone help me what is that wrong which I am doing?
My goal is to reduce import statements and hence I am trying the above way