I have two files: The main file - App.js and a JSX Element which I want to load in App.js.
element.js has the following code:
const element = () => {
return (
<div className="text-gray-100 bg-gray-800 h-64 px-4">
<h1>Test Title</h1>
<p>Lorem ipsum</p>
</div>
);
};
export default element;
The App.js file is as follows:
import './App.css';
import element from './element';
function App() {
return (
<div className="flex">
<element />
</div>
);
};
export default App;
When importing, VSC shows that "element is declared but not used", and the html page shows nothing but a white page.
In JSX, lower-case tag names are considered to be HTML tags.
However, lower-case tag names with a dot (property accessor) aren't.
See HTML tags vs React Components.
<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)
<obj.component /> compiles to React.createElement(obj.component)
Related
I'm trying to use the Image component provided by next.js.
This Is My Simple Header Component
import Image from 'next/image'
import React from 'react'
import myImage from '../assets/IMG-20221115-WA0001.jpg'
function Header() {
return (
<header>
<div>
<div>
<Image
src={myImage}
width={50}
height={10}
alt="Logo"
/>
</div>
</div>
</header>
)
}
export default Header
The error seems to be error window from the webpack, so I don't exactly know how to resolve it.
You can move the image to the /public folder and pass the path to the src Image property
import Image from 'next/image'
import React from 'react'
function Header() {
return (
<header>
<div>
<div>
<Image
src={'/IMG-20221115-WA0001.jpg'}
width={50}
height={10}
alt="Logo"
/>
</div>
</div>
</header>
)
}
export default Header
To make Next/Image work, you need to provide the path see https://nextjs.org/docs/api-reference/next/image#src
note: you can leave the image in the same path and pass it to the src property but using the relative path instead of statically imported
you need to add require for giving absolute path
import Image from 'next/image'
import React from 'react'
import myImage from '../assets/IMG-20221115-WA0001.jpg'
function Header() {
return (
<header>
<div>
<div>
<Image
src={require(myImage)}
width={50}
height={10}
alt="Logo"
/>
</div>
</div>
</header>
)
}
export default Header
I want to change the body dynamically, how can i do this?
import React from 'react'
// import { Link } from 'react-router-dom'
export default function ProjectTemplate(props) {
const Css= {
"--background":`${props.isValue ? props.mode : 'red'}`
}
return (
<>
<div className="bodyCon projectCon">
<div className="bodyComponent">
<div className="aboutHeading projectHeading" style={Css}>
<h1>{props.name}</h1>
<div className="container">
<div className="projects">
</div>
</div>
</div>
</div>
</div>
</>
)
}
this is a custom component
import React from 'react'
import ProjectTemplate from '../Projects/ProjectTemplate/ProjectTemplate'
export default function Blog(props) {
return (
<>
<ProjectTemplate name='Blog' mode={props.mode} isValue={props.isValue} >
hhhh
</ProjectTemplate>
</>
)
}
this is the another component where i want to add the body of previous component dynamically, then the hhh is not display in browser
output in browser:
<div className="bodyCon projectCon">
<div className="bodyComponent">
<div className="aboutHeading projectHeading" style={Css}>
<h1>{props.name}</h1>
<div className="container">
<div className="projects">
hhh
</div>
</div>
</div>
</div>
</div>
but hhh is not visible in browser, how can i do for this output
You should read this docs, all you need here is children props
The word hhh will not be displayed because you are calling the custom component in the project template with no props name which you want to display. In your code if you render the component the Blog name will displayed only.
use this in the project template and pass the props to the childrenanme
<div className="projects">
{props.childrenanme}
</div>
To Answer your Question: Yes we can use component inside nested component in react.
In JSX expressions that contain both an opening tag and a closing tag,
the content between those tags is passed as a special prop React Documentation.
And to use these special props you have to use {props.children}.
In your example, you have passed the content b/w opening and closing tag of a custom component but forgot to use it.
In projectTemplate component use the children that you have passed while invoking the component, like this:
<div className="projects">
{props.childrenanme}
</div>
Below is my code for Cards.js file, right now it's a card that you can click on and it links to the Services page with path ='/services' from within the same website, I would like to add a link to another website, how would I go about doing that? would I need to add an a href= link to Cards.js?
import React from 'react';
import CardItem from './CardItem';
import './Cards.css'
function Cards() {
return (
<div className='cards'>
<h1>Check out my Programming Portfolio Projects!</h1>
<div className='cards__container'>
<div className='cards__wrapper'>
<ul className="cards__items">
<CardItem
src={`${process.env.PUBLIC_URL}/images/ReactSocialPosts.jpg`}
text='hello testing 123'
label='This is a card'
path ='/services'
/>
</ul>
</div>
</div>
</div>
)
}
export default Cards;
Below is CardItem.js if needed
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
return (
<>
<li className='cards__item'>
<Link className='cards__item__link' to={props.path}>
<figure className='cards__item__pic-wrap' data-category={props.label}>
<img
src={props.src}
alt='Travel Image'
className="cards__item__img"
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
I'm not sure, but I think that you would only have to create a second CardItem with its attribute path = complete link to external website.
Example :
<CardItem
src={`${process.env.PUBLIC_URL}/images/OtherImage.jpg`}
text='External website'
label='A label'
path ='https://externalwebsite.com'
/>
If you just want to simply link to another website then you can simply use an anchor tag, if you want to declare a Route from react-router-dom for that link to follow, you need to look at this post
As per documentation React-Router understands only internal paths. Then an anchor tag is needed. I would do a wrapper component for Link that chose if render an anchor or the router link object. Then use it instead of "Link".
Something like (code not tested):
const MyLink = ({path, children, ...props}) => {
const comp = path?.trim().substring(0,4) === "http" ? <a href={path}> : <Link to={path}>;
return <comp ...props>{children}</comp>
};
I'm trying to integrate reactjs with laravel .
So What I did is , changed my js from vue to react by using some commands.
Then I added Example.js file under /resources/js/components .
Then I added it in app.js
require('./bootstrap');
require('./components/Example');
my Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
Then I added a component of Example.js in my blade file.
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class = "content">
<div id = "Example" class = "title m-b-d">
</div>
</div>
<script type = "text/javascript" src = "js/app.js"></script>
But I can't able to get the Example.js component in my blade file .
In my console, I'm getting this error
CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
What am I missing here ?
This error is caused probably by bootstrap.js (not laravel) which cannot find proper meta tag in header. Move your meta tag (with csrf token) from <body> to <head> - this should fix the problem.
I'm trying to embedding text/html in a react Modal component. But when I run my app with electron the Google Inspector show me some errors.
Uncaught invariant.js:38 Uncaught Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Example.
SOLUTION : Replace the <object> by <webview>
this is my code
import React from 'react';
import SkyLight from 'react-skylight';
class Example extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<section>
<h1>React SkyLight</h1>
<button onClick={() => this.refs.simpleDialog.show()}>Ouvrez le modal</button>
</section>
<SkyLight hideOnOverlayClicked ref="simpleDialog" title="Hi, I'm a simple modal">
<object type="text/html" data="http://www.example.com" style="width:100%; height:100%">
<p>backup content</p>
</object>
</SkyLight>
</div>
)
}
}
Example.displayName = 'Example';
export default Example;
try to change this line
<object type="text/html" data="http://www.example.com" style="width:100%; height:100%">
with this
<object type="text/html" data="http://www.example.com"
style={{width:'100%', height:'100%'}}>
the style attribute expects a json object, for more details you can check this link https://facebook.github.io/react/docs/dom-elements.html#style