I'm following tutorial carefully, but I just can't pass props to function component and extract data from props object.
I think it's export-import error, but I would really appreciate nudge in the right direction.
I'm using create-react-app
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const Greeting = (props) => <h1>Hello {props.name}</h1>;
export default Greeting;
It only prints out Hello in H1 tag, and just leaves out the rest of it.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const element = <Greeting name="irakli" />;
ReactDOM.render(element, document.getElementById('root'));
serviceWorker.unregister();
In My index.js:
Instead of import App from './App'; replace with import Greeting from './App';
Instead of Greeting you should change to App because you are importing it as App. So
const element = <App name="John" />
in App.js use 'export default App'.
Related
I just started using react and I'm following a MERN tutorial on YouTube
I've not been having issues seen any issues except the fact that I can't see the HTML code when start npm
App.js
import React from "react";
const App = () => {
return(
<div>
<h1>App</h1>
</div>
);
}
export default App;
This is the index.js
import React from "react";
import ReactDOM from "react";
import App from "./App";
ReactDOM.render(<App />, document.getElementById('root'));
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 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