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.
Related
import React from "react";
import navBar from "./components/navBar/navBar"; //navBar is imported here
function App() {
return (
<>
<div className="App">
<navBar /> //navBar is used here
</div>
</>
);
}
export default App;
I changed the eslint. But no use and tried some stackoverflow solutions but no change.
In JSX, lower-case tag names are considered to be HTML tags.
So you can change the component name to NavBar, or while importing you can write import NavBar from "./components/navBar/navBar"; //navBar is imported here
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 try some library but nothing done the job.
I try:
react-syntax-highlighter
(https://www.npmjs.com/package/react-syntax-highlighter)
after install and following the documentation the module always not found in my file .jsx. The dependency is in my package.json but the module is not found. (paranormal activity)
react-highlight
(https://github.com/akiran/react-highlight)
the module is found but don't work, the coloration of the line stay always dark
react-highlight
(https://www.npmjs.com/package/react-highlight)
... and more
If someone have any solution for color my text ^^
the code is :
import React, { useState, useEffect } from "react";
import Highlight from "react-highlight";
export const ButtonLib = () => {
return (
<div>
<pre>
<code id="foo" ref={myRef}>
<Highlight language="javascript">
import React from "react";
import { Button } from "Antd";
export const Button = () => {
return (
<span>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<JumboButton>Jumbo</JumboButton> <AuthenticationButton>Authentication</AuthenticationButton>
</span>
);
}
</Highlight>
</code>
</pre>
</div>
);
};
As Per the official documentation of react-highlight
Visit Adding Styles In React Highlight
From my perspective Adding a import statement in your component should work .
import 'highlight.js/styles/github.css';
react-highlight only converts your code in HTML with CSS classes. Without any CSS definitions, you won't see much of a difference.
You have to include CSS/styles from highlight.js, which are already included in the node package, so you can import one of them right away.
There is no need to add highlight.js as a dependency.
Instead of
import 'highlight.js/styles/github.css'
you could write:
import 'react-highlight.js/node_modules/highlight.js/styles/github.css'
You can preview all styles at https://highlightjs.org/static/demo/.
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'));
I am trying to render a simple nested React component called Navbar but when I use another component (or a Link tag in this case) within it, the console gives me 'Uncaught Error: Cannot find module "../Navbar"'. If I remove the Link tag, the h1 tag is shown and there are no errors. I can use the Link tag in the App component so I know it should work in the project.
My App.js code looks like this:
import React from 'react';
import Navbar from '../Navbar';
import { RouteHandler, Link } from 'react-router';
export default React.createClass({
render: function() {
return (
<div className='App'>
<Link to="about">About</Link>
<Navbar />
<RouteHandler />
</div>
);
}
});
My Navbar.js code looks like this:
import React from 'react';
import { PureRenderMixin } from 'react/addons';
import { Link } from 'react-router';
export default React.createClass({
mixins: [PureRenderMixin],
render: function () {
return (
<h1>Navbar</h1>
<Link to="about">About</Link>
);
}
});
I'm using React-Router, Webpack, and Browser-Sync but besides nested components, routing, building, and syncing seem to be working fine.
Your render method in Navbar is trying to return two values at once, the <h1> and the <Link>. This is a syntax error. You need to wrap them in a single element, e.g. a <div>.
See also http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html