import React, {Component} from 'react'
const Greet=()=> <h1>Say helllo</h1>
export default Greet;
This functional component i've created and imported in App.js
import logo from './logo.svg';
import './App.css';
import './Components/Greet'
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<br></br>
<button>Submit</button>
</header>
<Greet/>
</div>
);
}
export default App;
But getting error in chrome web:
**src\App.js
Line 24:8: 'Greet' is not defined react/jsx-no-undef
src\Components\Greet.js
Line 7:16: 'Greet' is not defined no-undef**
New to React Helpful if someone can help me with this.
const greet=()=> <h1>Say helllo</h1>
Try Greet instead of greet
Also in your App.js write in this way
import Greet from "./Components/Greet";
Related
I have been trying add an image using the tag on CodeSandbox.io. However, every time I try to add it, it doesn't show and just defaults to the alt tag (Displays logo).
import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={require("./logo.svg")} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
You can checkout my code and a live demo at this codesandbox link
Codesandbox doesn't support directly importing images. Instead, you can either add them as static uploads and reference their uploaded URL or import them as React components:
I have created a basic create-react-app and added the below statement
const [stateA, setStateA] = useState(false);
and I have put a console.log inside my component.
The complete component code is
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
const [stateA, setStateA] = useState(false);
console.log("rendered");
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
It is showing "rendered" twice. Can any one tell why this is happening ?
If you notice index.js (as create-react-app now uses React.StrictMode by default ) file you may have a wrapper called React.StrictMode which is responsible for this extra re-render. The wrapper will invoke render, constructor and other lifecycle methods to detect side effects. So this is expected.
You can read more here: https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects
Hope this helps!
import React from "react";
import logo from "./logo.svg";
import text from "./compiler/test/index.txt";
import "./App.css";
const App: React.FC = () => {
// const compiler = new Compiler("../test/index.jack");
// compiler.save();
console.log("text: ", text);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
};
export default App;
I'm using react-app-rewired to override webpack configuration, without ejecting.
This component reads a .txt file and logs its content, but there is an error, Cannot find module './compiler/test/index.txt'. TS2307 in the third line of import.
As my comment seemed to resolve the issue, here as an official answer:
You probably just need to declare the type .txt somewhere in your typescript definitions. For create-react-app, this would be in react-app-env.d.ts. E.g.:
declare module '*.txt' {
const content: string;
export default content;
}
I'm not able to get a 'react' application beyond Screen with the "atom icon" and "learn React" link.
There is a message saying 'Edit src/App.js and save to reload.'
But there's nothing giving any information or clue about what changes need to be made to the App.js file, what configuration or other settings to check (and what the values should be), etc.
What do I need to do to get a React app to actually work?
//=========================
// BEGIN App.js SourceCode:
// ------------------------
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
// ----------------------
// END App.js SourceCode
//=======================
The changes you need to make to App.js is the code for the initial page of your React App.
Replace your code with this, and change the "Hello":
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<p>Hello</p>
</div>
);
}
export default App;
I'm new at jest testing. Now I'm trying to test my react components using snapshot testing. I've encountered such problem: jest only updates snapshot for AppComponent, but does not for another component, also it passes all both snapshot tests. What's wrong?
Have tried passing names to snapshot toMatchSnapshot(), have tried to change type of TestComponent from function to class extending Component, have tried deleting old snapshots and testing again, all in wain. Also, tried to render TestComponent in AppComponent below AppComponent default html and it caused updating AppComponent snapshot only.
AppComponent
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { TestComponent } from './TestComponent';
export function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
Learn React
</a>
</header>
</div>
);
}
export default App;
AppComponent test
import React from 'react';
import ReactDOM from 'react-dom';
import { App, reverseOfReverse, addTwoIntegers } from './App';
import renderer from 'react-test-renderer';
describe('snapshot tests', () => {
test('matches the snapshot', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchSnapshot('AppComponentSnapshot');
});
});
AppComponent snapshot
// Jest Snapshot v1
exports[`snapshot tests matches the snapshot: AppComponentSnapshot 1`] = `
<div
className="App"
>
<header
className="App-header"
>
<img
alt="logo"
className="App-logo"
src="logo.svg"
/>
<p>
Edit
<code>
src/App.js
</code>
and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
rel="noopener noreferrer"
target="_blank"
>
Learn React
</a>
</header>
</div>
`;
TestComponent
import logo from './logo.svg';
import React, { Component } from 'react';
export class TestComponent extends Component {
render() {
return (
<div className="TestComponent">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
Learn React
</a>
</header>
<div>lola</div>
<div>amanda</div>
</div>
);
}
}
export default TestComponent;
TestComponent test
import React from 'react';
import renderer from 'react-test-renderer';
import { TestComponent } from './TestComponent';
describe('snapshot for second component', () => {
test('matches second snapshot', () => {
const tree = renderer.create(<TestComponent />).toJSON;
expect(tree).toMatchSnapshot('TestComponentSnapshot');
});
});
TestComponent snapshot
// Jest Snapshot v1
exports[`snapshot for second component matches second snapshot: TestComponentSnapshot 1`] = `[Function]`;
I expected that snapshot test would also fill TestComponent snapshot with appropriate snapshot, or the test would fail, but neither happened.
I just faced this problem too. Spent an hour to realize that toJSON is missing a pair of parentheses. It's supposed to be a function call toJSON() instead of just toJSON. How silly