Why does react does not work here
<script src="index.js" ></script>
Note: above code is located at the main html
heres the react.js file
import React from 'react'
import ReactDOM from 'react-dom'
const page = (
<div>
<ul>
<li>Anime Title</li>
<li>Genre</li>
<li>Rating</li>
<li>Status</li>
</ul>
</div>
)
ReactDOM.render(page, document.getElementById("root"))
Whenever i tried to run this it says "cannot use import statement outside a module"
Do i did wrong when installing react-js?
by the way heres the package.json
{
"name": "try",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Related
I add in my package.json proxy for making request to server runing on other port.
after that, my module css styles stop working, in the devTools i found that the styles are loading well, but classnames for DOM elements are not loading at all.
How it looks now:
How it should be:
some page code:
import styles from "./LoginPage.module.css";
export default function LoginPage() {
return (
<div className={styles.LoginPage}>
</div>
);
}
Here is my package.json:
{
"name": "job-bot-admin-panel",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000/",
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"http-proxy-middleware": "^2.0.4",
"multiselect-react-dropdown": "^2.0.21",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^7.2.8",
"react-router-dom": "^6.3.0",
"react-scripts": "^0.9.5",
"react-select": "^5.2.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
your filename is incorrect. for css modules you don't need to add .module to the filename, just name it LoginPage.css and import it with that same name and your styles should be fine. React is getting confused with your module filename.
I'm trying to learn React but this 'Container' is not defined and I don't know why I got this error, even though I did everything in the course
Here is App.js
import React from "react";
import { Row } from "reactstrap";
import CategroyList from "./CategroyList";
import Navi from "./Navi";
import ProductList from "./ProductList";
function App() {
return (
<div>
<Container> //'Container' is not defined
<Row>
<Navi />
</Row>
<Row>
<CategroyList />
<ProductList />
</Row>
</Container>
</div>
);
}
export default App;
Here json code and I downloaded last reacstrap version and I imported the 'bootstrap/dist/css/bootstrap.min.css' in my index.js file but as you see I still take error
"name": "intro",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"reactstrap": "^9.0.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You are missing the Container import on line 2:
import { Row, Container } from "reactstrap";
I created a react project with create-react-app some times ago and i wanted to add some test with jest. I read that Jest comes with create-react-app, but when i try to run the simple test that comes with the project by typing "yarn test", i have this error message: TypeError: (0 , _react2.test) is not a function
The test:
import React from 'react';
import { render, screen, expect, test} from '#testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
The result:
My package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --ext .js,.jsx",
"lint-fix": "npm run lint -- --fix"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^7.28.0",
"eslint-plugin-react": "^7.24.0"
}
}
Does anyone know what i am missing ? Thank you !
Everything seems correct but I don't know why I can't able to use CSS in my project. I have tried without writing module in CSS file's name but it didn't work. I have tried literally everything but none of those worked for me.
import React, { Component } from 'react';
import styles from './App.module.css';
class App extends Component {
render(){
return (
<div>
<h1 className={styles.blue}>Burger Builder</h1>
</div>
);
}
}
export default App;
My CSS File,
.blue{
color: blue;
}
Package.json file
{
"name": "burger-builder",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^1.1.5",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
CSS modules is available with react-scripts#2.0.0 and higher.
I want to develop a React Js app with the framework Primereact.
Now I have the problem that some Imports can't be found.
The Import import {Button} from 'primereact/Button' throws the exception:
Cannot find file: 'Button.js' does not match the corresponding name on disk: '.\node_modules\primereact\button.js
The second problem I have is that DatatableSubMenu and DatatableCrudDocu cannot be found. What is the correct import?
My package.json is:
"name": "selldesk",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.3.1",
"primeicons": "^2.0.0",
"primereact": "^3.3.2",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0",
"reactstrap": "^8.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I hope somebody can help me.
It's because you have imported button incorrectly.
Change this
import {Button} from 'primereact/Button'; //uppercase
to
import {Button} from 'primereact/button'; //lowercase
Make sure to keep them lowercase. Check the docs for correct import statements -
https://www.primefaces.org/primereact/#/button