Advertisements
I have been trying to run the react app and despite showing no errors in console it is still showing the background image of css and not the form that i created using react with vite as the bundler. the code is as follows:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adopt Me! v8</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id ="root">not rendered</div>
<script type="module" src="./App.jsx"></script>
</body>
</html>
app.jsx:
import React from "react";
import {createRoot} from "react-dom/client";
import SearchParams from "./SearchParams";
const App = () => {
<div>
<h1>Adopt Me !</h1>
<SearchParams />
</div>
};
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);
SearchParams.jsx:
const SearchParams = () => {
const location = "Seattle, WA";
return (
<div className="search-params">
<form>
<label htmlFor="location">
Location
<input id="location" value={location} placeholder="Location" />
</label>
<button>Submit</button>
</form>
</div>
);
};
export default SearchParams;
The environment that i am using is as follows :
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended",
"prettier"
],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": 0
},
"plugins": ["react", "import", "jsx-a11y"],
"parserOptions": {
"ecmaVersion": 2022,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"]
}
}
}
}
package.json:
{
"name": "pet-adoption-app-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"format": "prettier --write \"src/**/*{.js,.jsx}\"",
"lint": "eslint \"src/**/*{.js,.jsx}\" --quiet",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@vitejs/plugin-react": "^4.0.1",
"eslint": "^8.44.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.25.3",
"prettier": "^2.7.1",
"vite": "^4.3.9"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
These are the files i have except the CSS files. Despite not showing any error the file is not displaying anything. Please can someone help me and show me what I am not doing correctly here.
>Solution :
Just mofify your app.js as your are not returning any thing update the code as follow-
import React from "react";
import { createRoot } from "react-dom/client";
import SearchParams from "./SearchParams";
const App = () => {
return (
<div>
<h1>Adopt Me!</h1>
<SearchParams />
</div>
);
};
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);