Cannot import components with React - javascript

So I'm getting into React and I cannot see my components, only my background image of the CSS.
Here is my App.jsx:
import React from 'react'
import Header from './components/header/Header'
import Nav from './components/nav/Nav'
import About from './components/about/About'
import Experience from './components/experience/Experience'
import Services from './components/services/Services'
import Portfolio from './components/Portfolio/Portfolio'
import Testimonials from './components/Testimonials/Testimonials'
import Contact from './components/contact/Contact'
import Footer from './components/footer/Footer'
const App = () => {
return (
<>
<Header />
<Nav />
<About />
<Experience />
<Services />
<Portfolio />
<Testimonials />
<Contact />
<Footer />
</>
)
}
export default App
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Ultimate React Personal Portfolio Website</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
What am I doing wrong?
I've changed import React from 'react to import React from 'react-dom' to no avail. Please help
My apologies, I removed a confusing section and included snippets for further clarification.
Here is a screenshot of my project folders
Also here is my index.js:
import ReactDOM from 'react-dom'
import App from './App'
import './style.css'
ReactDOM.render(<App/>, document.querySelector("#root"))

Until I do not see the logs from your console I can only assume what I am wrong.
This is a very fresh post and I assume you are using the latest version of react 18.
Hopefully this will help :)
// React 17
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>, document.querySelector("#root"))
// React 18
import ReactDOM from 'react-dom/client'
const container = document.getElementById('app')
const root = ReactDOM.createRoot(container) // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />)

Related

React will not render to screen

I am trying to test my React to make sure it can render but for some reason it will not work. I am using npx create-react-app to create my app. Please help
JavaScript:
import React from "react"
import ReactDOM from "react-dom"
const app = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
ReactDOM.render(app(), document.getElementById("root"))
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Instead of ReactDOM.render(app()... should be ReactDOM.render(<App>, because you want to render a component not a function,
Also as you mentioned you are using create-react-app, the default imports are these:
import React from 'react';
import ReactDOM from 'react-dom/client';
Which means you need to update your ReactDOM import
Note: every component should start with capital letter, so change const app to const App
Here is a snippet with the changes:
import React from "react"
import ReactDOM from "react-dom/client"
const App = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById("root"))
already answered but comments should help to understand
import React from "react"
import ReactDOM from "react-dom"
// component name should start with uppercase
const App = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
// render function takes a Reactelement as first parameter
ReactDOM.render(<App/>, document.getElementById("root"))

How to render <scipt> tags in React JS?

I am trying to render <script> tags but unable to do so. Although javascipt is already enabled for the browser. Screenshot of the error message on browser console.
Code snippet.
import './App.css';
import React from "react";
import {Helmet} from "react-helmet";
class App extends React.Component {
render () {
return (
<div className="application">
<h1>My name is </h1>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="ffwesfwef" ></script>
<Helmet>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="wefewfwefwe" ></script>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://myurl.net/example" />
</Helmet>
</div>
);
}
};
export default App;

React render function doesn't render the returned components

When I execute npm start, it opens localhost:3000 but doesn't display anything, just a white page. Then, I tried to insert a paragraph inside <body> in index.html, and when the page showed up, the text Hello World! only showed for less than 1 second, then disappeared. Any solution would be much appreciated
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
App.js
import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route} from "react-router-dom";
import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";
function App() {
return (
<Router>
<div className="container">
<Navbar />
<br/>
<Route path="/" component={ExercisesList} />
<Route path="/edit/:id" component={EditExercise} />
<Route path="/create" component={CreateExercise} />
<Route path="/user" component={CreateUser} />
</div>
</Router>
);
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<p>Hello World!</p>
</div>
</body>
</html>
The problem with my code is the <Route> tags are not wrapped inside <Routes> tag. This code solves it.
import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";
function App() {
return (
<Router>
<div className="container">
<Navbar />
<br/>
<Routes>
<Route path="/" component={ExercisesList} />
<Route path="/edit/:id" component={EditExercise} />
<Route path="/create" component={CreateExercise} />
<Route path="/user" component={CreateUser} />
</Routes>
</div>
</Router>
);
}
export default App;

Alert is getting triggered automatically in react

I am new to reactjs, I have been trying to design a UI such that o every click it displays alert telling this li element is clicked but when the page is rendered I see lot of alerts getting popped out. Can someone point out mistake in my code and how to avoid it!
Here is the code snippet
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <meta name="theme-color" content="#000000" /> -->
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>Grade Score</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js
import './App.css';
function clickhandle (props) {
alert("you clicked on" + props.name)
}
function Stud(props) {
return <li onClick={clickhandle(props)}> { props.name }</li>;
}
function App() {
const students = ['Anil', 'Bob' , 'Clara', 'Dew', 'John', 'Ravi', 'Ram'];
return (
<>
<ul>
{students.map((student) => <Stud name={student} />)}
</ul>
</>
);
}
I want the alerts to be displayed only if I click on the li element but in my my code it continuously pops up alert as soon as page loads!
That's because you are calling the function when the page loads. You have to pass a function to onClick, not call the function directly:
onClick={() => clickhandle(props)}

Uncaught SyntaxError: import declarations may only appear at top level of a module on React

I'm creating a react component, its a very simple example to start to learn react , and I get this error Uncaught SyntaxError: import declarations may only appear at top level of a module, I¡, not sure what it's wrong
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=ç, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="./mynumber.js"></script>
<script src="./index.js"></script>
</body>
</html>
mynumber.js
import React from 'react';
class MyNumber extends React.Component{
render(){
return <div>Hello</div>
}
}
export default MyNumber
and index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyNumber from './mynumber';
const container = document.getElementById('root');
ReactDOM.render( MyNumber,container);

Categories