eslinting with airbnb
import React from 'react';
import TopBar from './topBar';
import Content from './content';
class App extends React.Component {
render() {
return (
<div className="app">
<TopBar />
<Content />
</div>
);
}
}
export default App;
gives the error
5:1 error Component should be written as a pure function react/prefer-stateless-function
I have tried
function render(){}
and
render: function() {}
but didn't succeed
Using the docs from https://facebook.github.io/react/docs/reusable-components.html#stateless-functions, your code sample would be converted to:
import React from 'react';
import TopBar from './topBar';
import Content from './content';
function App (props) {
return (
<div className="app">
<TopBar />
<Content />
</div>
);
}
export default App;
Note that this updated code sample will break some other airbnb eslinting rules but those should be self-explanatory. Just posting this as a template to follow. The docs on this subject are very direct so make sure you give those a good review.
Related
In my components/ folder I have created two components:
using function-based components:
import React from 'react';
const greet = () => <div className="App"><h3>Hello Sukarna Jana</h3></div>;
export default greet;
using class-based-components:
import React,{Component} from 'react';
class welcome extends Component{
render(){
return <div className="App"><h3>Hi, its Class Components</h3></div>;
}
}
export default welcome;
but when I am trying to import that in App.js it's not running:
import './App.css';
import React from 'react';
import greet from './components/greet';
import welcome from './components/welcome';
/*
* dont know why greet and welcome tags are not working
*/
function App() {
return (
<div className="App">
<greet/>
<welcome/>
<h1>Hello Sukarna Jana</h1><hr/>
</div>
);
}
export default App;
I just reviewed the code and could find the issues easily,
You didn't keep the naming rules in your code.
<greet/> replace to <Greet/>
<welcome/> replace to <Welcome>
Also, you should change the name of the component.
I can't import my module, it keeps giving me the same error, I have looked into what I may have done wrong but I dont see it. Everything works for my other components (They are all in the same folder "./[Folder]") except this component and it's being passed the exact same way.
Module Not Found
ManageTreeComponent.jsx
import React from "./react";
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems;
LoginApp.jsx
import DisplayListItems from "./ManageTreeComponent.jsx";
function Login() {
return <div className="container">
<DisplayListItems />
</div>
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
Your import react statement is wrong in ManageTreeComponent.jsx, make sure your import looks like this:
import React from "react"; // without period and /
Rather then using .jsx file use .js file
ManageTreeComponent.js
import React from "react"; // need to import like this
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems
LoginApp.js
import DisplayListItems from "./ManageTreeComponent";
function Login() {
return (
<div className="container">
<DisplayListItems />
</div>
);
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
welcome.js
import React, { Component } from 'react'
class welcome extends Component
{
render()
{
return <h1>Class Component</h1>
}
}
export default welcome
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import welcome from './components/welcome'
function App() {
return (
<div className="App">
<Greet />
<welcome />
</div>
);
}
export default App;
So basically in welcome.js i have a code for rendering hello rahul and i have exported that and i have imported that in App.js but it showing welcome is declared but never used please help
You have a problem with naming. React assumes every tag beginning with a small letter is native (f ex a <div> or <table>). You have to name your own components with capital letters.
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome'
function App() {
return (
<div className="App">
<Greet />
<Welcome />
</div>
);
}
export default App;
It's also a good idea to name your files with components with capital letters, to make them easy to identify.
You are importing a component in lower case letters. React doesn't recognize that as a component. So just restructure it as :
import Welcome from './components/Welcome'
then do
<Welcome/>
I keep getting the error "Module not found: Can't resolve './components/dndEditor' in '/Users/bob/Documents/GitHub/Active/DevComponents/DragDropComponents/src'"
I have scaled the code right back to the basics and it still is not working I must be doing something fundamentally wrong (I am more used to working with functional components than classes). The urls are pointing the files as visual studio is autocompleting the URL.
import React from 'react';
import ReactDOM from 'react-dom';
import DndEditor from './components/dndEditor';
class App extends React.Component {
render() {
return (
<div>
<DndEditor />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and the class is
import React from 'react';
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>gfd </h1>
</div>
)
}
}
Code looks fine there might be something wrong with the file name .
Check the below link of codesandbox . It is working there
https://codesandbox.io/s/laughing-shaw-v210y
index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import DndEditor from "./DndEditor";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<DndEditor />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
DndEditor.js
import React from "react";
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>This is DndEditor </h1>
</div>
);
}
}
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}