The following code is taken from crate react app
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.register()
The below code i have written
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine
ReactDOM.render(a,document.getElementById('app'));
render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed
2)i tryied with {a} also i failed a is also javascript method why it failed
You have two issues.
First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.
Second one: you are not rendering any component. The root of a react application must be a component.
So change your code to something like:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));
Related
I have a react app with two buttons ("+", "-") that are created by a single component. I am trying to use CountAPI to store the input data from the two buttons. So far i am able to get the input and update the countAPI site to interperate either plus or minus from the buttons. The problem i am having is seperating the two buttons. It works for both buttons but i havent been able to figure out how to call the specific "+" or "-" button. For example, in the code below, its set to increment by +1 when i press the button, but i can press either the "+" or "-" button and they both increment by +1.
index.js
import React from 'react';
import ReactDOM from 'react-
dom/client';
import './index.css';
import App from './App';
import reportWebVitals from
'./reportWebVitals';
import countapi from 'countapi-js';
import "./App.js";
const alb = ReactDOM.createRoot(document.getElementById('alb'));
alb.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
document.getElementById("alb").addEventListener("click", () => {
countapi.update('f1AppAlbon', 'fbda1857-916b-413d-8b7b-503651f3c52c', +1).then((result) => {
alert(`The magic button has been pressed ${result.value} times.`);
});
});
App.js
import React, { useState } from "react";
import Button from "./components/Button";
import "./App.css";
import "./index.js";
<div class="buttons">
<Button title={"-"} action={decrementCount} class="minus"></Button>
<Button title={"+"} action={incrementCount} class="plus"></Button>
</div>
index.html
<div id="+alb"></div>
Sorry if some terminology is wrong, im still new to this.
I'm a React JS Beginner and I'm trying to create a table (or grid) by React Js. I've searched through different sites and tried different ways. I've used react-row, react-bootstrap, react-table, and followed the instructions step by step. However, none of them works. I tried to display a row with 3 cells but all of them displayed 3 rows :<<. Please, can you guys give me other ways or show me how to use the 3 mentioned libraries clearly. Thanks
Here is one of my case,
import React, {useState, useEffect, Component} from 'react';
import AppNavBar from './AppNavBar.js';
import {Container, Row, Col} from 'react-bootstrap';
const RestaurantReview = (props) => {
return(
<>
<AppNavBar />
<Row>
<Col>1</Col>
<Col>2</Col>
<Col>3</Col>
</Row>
</>
)
}
export default RestaurantReview
If you have a stylesheet that you're referencing in this component you can add the below line at the top of it to ensure you pull in the default bootstrap styles.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css");
Then you can import that stylesheet in your App.js component or into RestaurantReview.js whichever you prefer. Preferably in App.js that way you can use the bootstrap styles in other components.
App.js
import React from "react";
import RestaurantReview from "./components/RestarauntReview";
import "./styles.css"; // this is where you import the bootstrap styles
function App() {
return (
<div className="App">
<RestaurantReview />
</div>
);
}
export default App;
This way you won't have to change any of your code in RestaurantReview.js
Here is a codesandbox with all of the code.
I have the following component code for my previous JS code called home.js, which is supposed to show the home page of my website.
import React from 'react';
//import ReactDOM from 'react-dom';
function Home(props) {
return <main>
<header>
<h1>The [RETACTED] Club</h1>
<h2>🤔 Why [RETACTED]?</h2>
<p>Here we explain why the [RETACTED] club exists</p>
<h2>❗ Risks of [RETACTED]</h2>
<p>The fun, challenges, and risks of the club will be explained here.</p>
<h2>🎗 Why [RETACTED]?</h2>
<p>Here we explain the pros and cons of our launch site.</p>
</header>
<footer>
<p>© 2021, [RETACTED], SAGTRHYDTJHSYHSRTGAERFefef
[RETACTED]#gmail.com</p>
</footer>
</main>
}
export default Home;
// ReactDOM.render(contents,
//document.getElementById('root')
//);
This is the JS code I used to show that HTML.
import React from "react";
import ReactDOM from "react-dom";
import Home from "./home";
let contents = <Home />;
ReactDOM.render(contents, document.getElementById("root"));
I was supposed to type parcel index.html in the command prompt to make the home page work, but every time I try to save my file, I get this error.
Cannot read property 'type' of undefined
at Bundler.createBundleTree (C:\Users\Default.DESKTOP-7TNLM47\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:654:54)
at Bundler.createBundleTree (C:\Users\Default.DESKTOP-7TNLM47\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:721:12)
at Bundler.createBundleTree (C:\Users\Default.DESKTOP-7TNLM47\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:721:12)
at Bundler.bundle (C:\Users\Default.DESKTOP-7TNLM47\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:298:14)
I want to know how this error appeared and how I can fix it.
You can try add the CLI command --log-level verbose for order to know which problem you have. And perhaps you have to use the CLI --no-scope-hoist. You can find more info: docs parcel about scope-hoisting
I'm trying to create a new portal with an id .
This is the index html file in the public folder :
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="other"></div>
</body>
And here I tell react to render this component inside the div with the id of root :
import React from 'react';
import ReactDOM from 'react-dom';
function New() {
return ReactDOM.createPortal(<h1>DEMO</h1>, document.getElementById('other'));
}
export default New;
But when I npm start I dont see anything inside the div with the id of other .
How can I create a new portal in react js properly ?
I solved the problem by including the New component inside App.js file :
import React from 'react';
import logo from './logo.svg';
import './App.css';
import New from './New';
function App() {
return (
<div className="App">
<New />
</div>
);
}
export default App;
And when I inspect it , the New component is actually inside the div with the id of other .
i have start learning with reactjs and purely new.i have created a new app in react and wrote the following code in Blog.js:
import React,{Component} from 'react';
const blogBody=()=>{
return(
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Written By Ali</h5>
<p>Some text..</p>
</div>
)
}
class Blog extends Component {
render() {
return (
<div>
<blogBody/>
</div>
);
}
}
export default Blog;
and my App.js is:
import React,{Component} from 'react';
import Blog from './Blog'
class App extends Component {
render() {
return (
<div className="container">
<Blog/>
</div>
);
}
}
export default App ;
when i execute npm start, it shows nothing. then when i go to developer tools it is saying under the tab
You need to enable JavaScript to run this app.
did i do anything wrong with my code or in any setting? but when i run he initial page after creating new app fresh, it is showing the react thing with enable src regular stuff.
where did i do wrong?
this is my first post....please let me know if i break any rules and please help..
Component names have to start with capital letters.
Since blogBody doesn't, it is treated as an unknown HTML element and just inserted into the DOM.