I created a jsxUses.js file in the components folder, but when I import it in App.js its shows warning: 'jsxUses' is defined but never used
//This is App.js file
import React, { Component } from 'react';
import './App.css';
import jsxuses from './components/jsxUses';
class App extends Component{
render() {
return (
<div className="App">
<jsxuses/>
</div>
);
}
}
export default App;
and this is jsxUses.js file
import React from 'react'
const jsxuses = () => {
return (
<div>
<h1> Hey there!</h1>
</div>
);
}
export default jsxuses;
React Element should be PascalCased. So it should be
import JsxUses from './components/jsxUses';
...
<JsxUses />
Change your jsxUses.js as:
...
const JsxUses = () => {
...
export default JsxUses;
And your App.js as:
import JsxUses from './components/jsxUses';
...
<JsxUses />
React file structure naming is unopinionated but React elements should be PascalCase for React to know whether or not you're using a function, class or an HTMLelementPascalCased.
Look for more here: Is there an official style guide or naming convention for React based projects?
Hope this helps!
Actually you should avoid using small latter for custom tags.
so you should do
const JsxUses = () => {
...
}
export default JsxUses
and
import JsxUses from './components/jsxUses';
or if you want to write like -
const jsxuses = () => {
...
}
export default jsxuses
then you should import it like
import { default as JsxUses } from './components/jsxUses'
Well, Use import JsxUses from './components/JsxUses'; React component name should be PascalCase.
Related
I'm trying to understand useContext but I don't see what I'm doing wrong here, I get the error message "Can't find variable: Test" but in the tutorial I'm reading from it never says anything about needing to import/export other than what is in the code?
Thank you!
App.js
import React, { createContext } from 'react';
const Test = createContext()
export default function App() {
return (
<Test.Provider value="hello">
<Home/>
</Test.Provider> );
}
Home.js
const Home = () => {
return(
<Test.Consumer>
<View style={styles.homeContainer}>
{value}
</View>
</Test.Consumer>
)
}
You aren't exporting Test from App.js, so you can't just implicitly use it in Home.js.
I'd recommend moving it to another file, say, contexts.js:
import React from 'react';
const Test = React.createContext();
export {Test};
You can then do
import {Test} from './contexts';
in both (or all, in the future) of your other source files to refer to the same context type.
I suggest you to create the context in a separate file :
test-context.js
import { createContext } from 'react';
export const TestContext = createContext();
App.js
import React from 'react';
import { TestContext } from './test-context';
export default function App() {
return (
<TestContext.Provider value="hello">
<Home/>
</TestContext.Provider>
);
}
In TestContext.Consumer, you must provide a function to consume the context value.
Home.js
import React from 'react';
import { TestContext } from './test-context';
export default const Home = () => {
return (
<TestContext.Consumer>
value => (
<View style={styles.homeContainer}>
{value}
</View>
)
</TestContext.Consumer>
)
}
We often forget about old school rules, when reading docs about fancy libraries these days.
In your example, Context is just a JS object, in order to access Test.Consumer, Test must be in scope of the file.
So, you have to import Test object (context) on order to access the Consumer property.
I have a problem to access this.context in a class based consumer component. I have the following situation:
AppContext.js:
import React from "react";
const ContactContext = React.createContext(); // Create our context
export default ContactContext;
DataProvider.js:
import React, { Fragment } from "react";
import AppContext from "./AppContext";
export default class DataProvider extends React.Component {
state = {
contacts: {
contact1: {
id: 1,
firstName: 'Test User FN',
lastName: 'Test User LN'
}
}
};
render() {
return (
<>
<AppContext.Provider value={{contacts: this.state.contacts}}>
{this.props.children}
</AppContext.Provider>
</>
);
}
}
App.js:
import React from 'react';
import DataProvider from "./DataProvider";
import Contact from './components/contact/contact.component';
export default class App extends React.Component {
render() {
return (
<div>
<div className="container">
<DataProvider>
<Contact contactIndex={0}/>
</DataProvider>
</div>
</div>
);
}
}
The consumer Contact.js:
import React, { Component } from "react";
import AppContext from '../context/AppContext'
export default class Contact extends Component {
static contextType = AppContext;
componentDidMount () {
console.log('My context is: ' + this.context);
}
render() {
return (
<div className="card"></div>
);
}
}
The console output is:
My context is: undefined
Thanks for any help
Regards
Dakir
Only difference I see in the other answer's CodeSandbox is the import path is different.
import AppContext from "./AppContext";
vs:
import AppContext from '../context/AppContext'
Maybe OP has a filepath/import error?
p.s. If this is the error, TypeScript is a lifesaver for avoiding these kind of things in JS.
Your code seems right to me, I tried to replicate it in a Sandbox to find out the error and somehow works like a charm.
https://codesandbox.io/s/interesting-https-emgoz?file=/src/App.js
Tried to spot the difference but I couldn't honestly.
I'm using a ES7 React/Redux/GraphQL/React-Native snippets in VS Code and I'm not sure which "type" of export use. If export should be at the class / functional component declaration or at the end of the file.
In the code below, I have 2 class components exports and 3 functional components exports.
Which of these is reccomended?
// ****************************************
// 1. rcc
// ****************************************
import React, { Component } from 'react'
export default class myComponent extends Component {
render() {
return (
<div>
</div>
)
}
}
// ****************************************
// 2. rce
// ****************************************
import React, { Component } from 'react'
class myComponent extends Component {
render() {
return (
<div>
</div>
)
}
}
export default myComponent
// ****************************************
// 3. rfc
// ****************************************
import React from 'react'
export default function myComponent() {
return (
<div>
</div>
)
}
// ****************************************
// 4. rfce
// ****************************************
import React from 'react'
function myComponent() {
return (
<div>
</div>
)
}
export default myComponent
// ****************************************
// 5. rafc
// ****************************************
import React from 'react'
const myComponent = () => {
return (
<div>
</div>
)
}
export default myComponent
My second question is about functional components - It is better (recommended) to write a functional component as an arrow function or classical function declaration?
Thanks a lot!
Dan Abramov said in his tweet:
JS tip: no matter which export style you prefer (default or named) or
which function style you use (arrow or declaration), make sure your
functions have names! Especially important for React components to
show up named in DevTools and warnings.
And, between using rce and rcc for exporting class components: It's up to you to decide, however, as in CRA documentation rce is used:
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
With this style, you can use HOCs easily, for this example we want to warp our class component into a Higher Order Component provided by a library:
import { injectIntl} from "react-intl";
class Button extends React.Component {
render() {
const intl = this.props.intl;
const title = intl.formatMessage({
id: "button.title",
defaultMessage: "Hello!"
});
return <Button title={title}>...</Button>;
}
}
export default injectIntl(Button);
And between using the Functional components vs Class components: Please refer to the documentation, functional components are easier to write and to test, and now with React's useState hook you can use state in your functional components. For class components read React.Component documentation.
if you want to export multiple component in a file then you have to use only export ComponentName (without default).
then you can import as
import {ComponentA,ComponentB,...} from '../directory'
the other case is that you can export only one component in a file as
export default Class extends ........{} //
or
export default Class; // at the end of file
Both are same.
and you can import with any name
import Class from '../directory'
I keep getting this weird message and React isn´t rendering my component. I am pretty sure I am rendering and importing it correctly:
Container:
import searchBar from "./searchBar";
class ItemList extends Component {
render() {
return (
<searchBar/>
);
}
}
searchBar
import React, { Component } from 'react';
const searchBar = () => {
return <div>ssuhsuhuhsususu</div>;
}
export default searchBar
Change to
const SearchBar = () => {
return <div>ssuhsuhuhsususu</div>;
}
export default SearchBar;
I you give name in small caps it will be considered as HTML tag such as
<p>, <div>
So your component should always be starting with CAPS.
If you want to use component which name start with lowercase then use can use following tips:
Just assign it to capitalised variable before using it.
import searchBar from "./searchBar";
const Foo = searchBar;
<Foo/>
Full Code:
import searchBar from "./searchBar";
const Foo = searchBar;
class ItemList extends Component {
render() {
return (
<Foo/>
);
}
}
I got this error and don't know where the problem is...
I am trying to import the header.js into the index.js
My index.js is:
//for ios application PLACE CODE HERE::::
//Import a library to help create a component
import React from 'react';
import { Text , AppRegistry } from 'react-native';
import Header from './src/components/header';
//Create a component
const App = () => {
return (
<Header/>
);
};
//Render it to the device
AppRegistry.registerComponent('yoyo', () => App);
And header.js:
import React from 'react';
import { Text } from 'react-native';
const Header = () => {
return <Text>Albums!</Text>;
};
export default Header;
Could anyone help me whats my wrong?
Change your header.js by following.
import React from 'react';
import { Text } from 'react-native';
class Header extends React.Component {
render() {
return <Text>Albums!</Text>;
}
}
export default Header;