I am a beginner in reactjs. I am trying create my firs app that just log string to console browser but when I start, it gives jscript compilation error.
Please help me.
Thanks.
import React from "react";
import ReactDOM from "react-dom";
const element = <h1>Hello World</h1>;
console.log(element);
okay do it like this
import React from "react";
import ReactDOM from "react-dom";
const Element = () => {
console.log('First Render')
return <h1>Hello World</h1>;
}
ReactDOM.render(Element, document.getElementById('root'))
Hope it helps
Related
I'm currently trying to follow this beginner tutorial for react, linked from the official react page: https://www.taniarascia.com/getting-started-with-react/
and it doesn't work already at the point where I delete the contents of the src directory and create an index.js file with the following content:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello, React!</h1>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
Now I get the following error in the browser: Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
there's no error in the compilation, so I don't know what I did wrong.
This is my error In index.js Actually I tried to use window.process = {}; on the top of it but it didnt worked and also I tried to put the window.process = {}; on app.js it also didnt worked I dont know how I am getting error pls help me and let me know how to fix the error I am actually creating smart brain app with clarifai AI and I did everything right but I dont know why I am getting the blank screen as an output pls help
[1]: https://i.stack.imgur.com/1U5PV.png
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'tachyons';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
This is my app.js
import './App.css';
import ParticlesBackground from './Components/ParticlesBackground/ParticlesBackground';
import Navigation from './Components/Navigation/Navigation';
import FaceRecognition from './Components/FaceRecognition/FaceRecognition';
import Logo from './Components/Logo/Logo'
import ImageLinkForm from './Components/ImageLinkForm/ImageLinkForm'
import Rank from './Components/Rank/Rank'
import { Component } from 'react';
import Clarifai from 'clarifai';
const app = new Clarifai.App({
apiKey: '41f76d4d2e2c4c5b8f6636e3f49737f6'
});
class App extends Component {
constructor(){
super();
this.state ={
input:'',
imageUrl:'',
}
}
onInputChange=(event) =>{
this.setState({input:event.target.value});
}
onButtonSumbit =()=>{
this.setState({imageUrl:this.state.input});
app.models
.predict(
Clarifai.FACE_DETECT_MODEL,
this.state.input)
.then(response => this.displayFaceBox(this.calculateFaceLocation(response)))
.catch(err => console.log(err));
}
render(){
return (
<div className="App">
<Navigation />
<Logo />
<Rank />
<ImageLinkForm onInputChange={this.onInputChange}
onButtonSumbit={this.onButtonSumbit}/>
<FaceRecognition imageUrl={this.state.imageUrl} />
<ParticlesBackground />
</div>
);
}
}
export default App;
The problem here is not React, but your used library "Clarifai", which is by the way not maintained any more. The main problem here, is that you can't access the process variable in a front end application.
Plase look into following SO questions for further information:
React & Clarifai: Uncaught ReferenceError: process is not defined
Uncaught ReferenceError: process is not defined
There are many solutions on how to still access process from client side, but it depends on your set up. Please try to make a little research.
I'm working on shopping Cart app, I want to use a Modal Form to display the cart's content and additional options before place the order, that's why I'm using Portals, so far, the source code of my Modal.js looks like this:
import { Fragment } from 'react';
import ReactDOM from 'react';
//import ReactDOM from 'react-dom/client';
import classes from './Modal.module.css';
const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onClose}/>;
};
const ModalOverlay = (props) => {
return (
<div className={classes.modal}>
<div className={classes.content}>{props.children}</div>
</div>
);
};
const portalElement = document.getElementById('overlays');
const Modal = (props) => {
return (
<Fragment>
{ReactDOM.createPortal(<Backdrop onClose={props.onClose} />, portalElement)}
{ReactDOM.createPortal(
<ModalOverlay>{props.children}</ModalOverlay>,
portalElement
)}
</Fragment>
);
};
export default Modal;
When I tried to load the modal form -clicking on an icon- I get this error:
This is the React's version I'm using:
This code used to work on previous version of React (17.x), the weird thing I tried to downgrade but still getting the same error.
My questions are:
In ver 18.x of React, Portals have been changed?
How can I downgrade React properly in order to test my code?
do you have any other suggestions how to overcome this issue using React's 18?
Thanks a lot
I had same error and I solved by importing
import ReactDOM from 'react-dom';
instead of
import ReactDOM from 'react-dom/client';
I did a simple counter micro frontend for practice purposes, its working as expected but im getting an error message from visual code "Cannot find module 'remote/counterWrapper'...
Print:
My remote code:
import React, {useRef, useEffect} from "react";
import ReactDOM from "react-dom";
import counterWrapper from "remote/counterWrapper";
import "./index.css";
const App = () => {
const divRef = useRef(null)
useEffect(()=> {counterWrapper(divRef.current);}, [])
return(
<div>
<div>Name: react-host</div>
<div ref={divRef}></div>
</div>
)
};
ReactDOM.render(<App />, document.getElementById("app"));
My host code:
import { render } from "solid-js/web";
import Counter from "./Counter"
import "./index.css";
export default (el) => {
render(Counter, el);
}
I am trying to pass a property through react components and display the text property of that element I get know JSX sytax errors but I get Parsing error: Unterminated JSX contents.When attempting to display the text from the property but instead it's blank as if its not reading the property
Components.js
import React from "react"
function Components(props) {
return (<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>)
}
export default Components
App.js
import React from 'react';
import Component from "./component"
function App() {
return (
<div>
The Big World
<Component text="PROPERTY TEXT"/>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Expecting to see the property text to be pass through the Component property and displayed on the page
All looks clear. Try to add semicolon an the end of return statement:
function Components(props) {
return (
<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>
);
}
Ran all this in a codesandbox and other than style not being defined it all renders and runs fine. I also don't think it is an error with a typo in your posted code (the file is actually components.js and not component.js), because that shouldn't transpile at all since it can't find that file.