I was just getting into react and trying it out for myself. After hours of configuring webpack just to get a hello world on my screen I thought I could get going now but after trying to render another component from a file the next problem.
My main file is app.js, which renders everything:
import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';
ReactDOM.render(
<Hello/>,
document.getElementById('app')
);
The Hello component comes from my hello.js in the same folder:
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
It was rendering fine when I was doing everything just in app.js without the import/export. It also compiles fine. But there are a lot of errors now in the console. So what am I missing?
Thanks
Gerd
Because your export is default you don't need braces around your import component name:
import Hello from './hello';
Here's a verbose technical article from Axel Rauschmayer on the final ES6 modules syntax that you might find useful.
And here's a slightly less techy post about the same topic.
when you import the default class you use
import ClassName from 'something';
and when you import other classes you use
import {ClassName} from 'something';
an example:
in hello.js file
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
class Other extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
export Other;
in other file
import Hello, {Other} from './hello';
tip: you could also import the default class with other name
import Component, {Other} from './hello';
Related
Hope You are doing great and in good health.
I'm a beginner in React.js and doing my FYP project, I come to a problem where I'm not able to insert external JS or Jquery code inside the react,
I have tried many npm and mentioned processes in StackOverflow, but that not work?
What should I do? where I import these scripts ??
//import all libraries here
import React, { Component } from "react"; //importing react
import $ from "jquery"; // be sure to do npm install jquery
import some_library from "./path/to/some/library"; //importing directly from .js file
class App extends Component {
render() {
return (
...
);
}
}
export default App;
If you want to use, plain JavaScript/JSON to render its relevant DOM, I recommend to go with functional components.
import React from "react";
const example = () => {
return (
<div className="App">
<h1>Hello World</h1>
<h2>This is inside a function</h2>
</div>
);
};
export default function App() {
return example();
}
I am new to react and I tried the following code
person.js
const element = <h1>Hello world</h1>;
export default element;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
function Hello() {
return Person.element;
}
class App extends Component {
render() {
return (
<div className="App">
<Hello></Hello>
</div>
);
}
}
export default App;
But getting the below errors
work/my-app/src/person/person.js
3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope
When I changed to a simple hello word as below, then it works fine.
person.js
const element = 'hello world';
export default element;
I tried with different ways by checking different forum
importing the ReactDom
in person.js changed to module.exports=element
The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.
person.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
const element = <h1>Hello world</h1>;
export default element;
You need to import React in every file that exports a component (App in this case).
The latest React 17 Version: No need to include React in the scope
If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850
I'm trying to print Hello World on the localhost using React js.
But the browser page is always blank whenever I run the code.
***App.js***
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import greet from './components/Greet'
class App extends Component{
render() {
return (
<div className="App">
<Greet></Greet>
</div>
);
}
}
export default App;
***Greet.js***
import React from 'react'
/* Greet(){
return <h1>Hello, Neha</h1>
}*/
const Greet = () =><h1>Hello, Neha</h1>
export default Greet;
I have added the Greet component in src folder i.e., src folder -> components folder -> Greet.js
The error that I'm receiving on the terminal is :-
Failed to compile.
./src/App.js
Line 10:8: 'Greet' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
Change import greet from './components/Greet' to import Greet from './components/Greet'
I am a complete Newbie at React/ JSX and coding itself. Thats why at first: sorry if my question may not be as precise as it should be for helping me guys.
At the moment i am building a web-app as a project for my exam. Now i need to integrate a video-player but all i can find seems not to fit in my code. I am working with visual-studio-code and npm. I've already "npm install(ed)react-player " Now to my question. Could anybody please provide a simple example of how to integrate a simple Video-Player as a Component into my Main-App?
I tried writing a class "Player" as an extern Component. Then i wanted to integrate it in my main-apps render method. But if i look in the browser-inspector i can't find my tag.
*import React from 'react';
import ReactPlayer from 'react-player';
export default class Player extends React.Component {
constructor(props){
super(props);
this.........*
I just want the player to appear on my page.
Find below working code. CodeSandbox here
Reference - Just followed react-player documentation.
App.js
import React from "react";
import ReactDOM from "react-dom";
import Player from "./Player";
function App() {
return (
<div className="App">
<Player src="https://www.youtube.com/watch?v=sBws8MSXN7A" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Player.js
import React, { Component } from "react";
import ReactPlayer from "react-player";
export default class Player extends Component {
render() {
return (
return <ReactPlayer url={this.props.src} playing />;
);
}
}
Hope it helps!!!
The example from site of video-react:
return (
<Player
playsInline
poster="/assets/poster.png"
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
/>
);
I'm learning React Native, just curious about the parentheses in the first line of import
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Why wrap Component with {} but not React?
React is the default export (there can only be one of these per module). Default exports can be imported like this:
import React from "react";
Component is a named export (there can be many of these). Named exports are imported like this:
import { Component } from "react";
What you're seeing is both of these things imported on the same line.
default exports aren't automatically available everywhere, so they still need importing.
Note that the reason React needs importing at all is because of the way that JSX is transformed into JS - React needs to be available so <Text> can be transformed into React.createElement(Text, ....
I think it's just a matter of shorting the next invocations, since Component is a subclass of React, so that way you use React as default with all it has in it. and Component as a single class you'd use. By the way you use braces in import when you want something specific as a method or class, that is named export. There's a better explanation in here.
Having both named exports and a default export in a module
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export default class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}