Please help me, i don't have web dev experience, and i work in my friend project. I follow a tutorial from youtube about tailwind and react. In the video, he can fill his whole screen using this code:
So i try it in my Dashboard function:
import React from "react";
function Dashboard(props) {
return (
<div>
<main>
<section className=" bg-slate-700 min-h-screen">
hello
</section>
</main>
</div>
);
}
export default Dashboard;
but i get:
This is my project structure looks like:
Why can't i get the same result as the tutorial?
Its because you are using inside a tag which has not to much content in it If you want to apply the color on the full screen you have to use the class "w-screen and min-h-screen" by which that tag gets the full width of the screen and full height
Related
I have one personal nextjs poject and I need to use slides like "tiktok style". To do so I tried to use the library react-responsive-carousel on vertical mode. Everything seems to be all right in dev mode, but when I try to build it, then it doesn't show me anything. It just disappears. I confirm that the problem is only with the prop axis="vertical" while with default axis="horizontal" everything seems to be all right.
Did anyone had the same issue with this library?
This is my code:
import { NextPage } from "next";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
const Body: NextPage = () => {
return (
<div>
<Carousel
emulateTouch
showArrows={false}
showStatus={false}
showIndicators={false}
showThumbs={false}
width={"100%"}
dynamicHeight
>
<Header />
<AboutMe />
<Projects />
<Footer />
</Carousel>
</div>
);
};
export default Body;
The purpose is to slide my pages vertically like reels or tiktok. I also tried the library react-slick but it has some troubles on mobile devices. It refreshes the page when I slide up.
Do you have any idea on how to fix this? Or do you have another solution?
p.s. I am not getting any error in console
I created a react app and it looked good , until I deployed it. After deployment, i cannot see the images, even if react loads them (i see that in the networking tab on chrome). Also the Content type was set right. Also when i go directly to the miage links, chrome renderes them.
This is the component responsable for showing the images:
import "./../styles/firstPart.css";
import logo from "./../images/croped_down.png";
import background from "./../images/background.jpg";
import PreloadImage from "react-preload-image";
import Navbar from "./../components/navbar";
const FirstPart = () => {
return (
<div className="firstPart">
<div className="mainGradient"></div>
<PreloadImage className="background" src={background} />
<PreloadImage className="logo" src={logo} />
<Navbar />
</div>
);
};
export default FirstPart;
Image path is relative and works for local. The same won't be working in prod as it takes absolute page. Check the path of image in Developer Console and see if the path is same as existed
I am trying to convert a basic success page design from figma to reactcode using anima.
import React from "react";
function success() {
return (
<Frame1
ellipse2="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-2#2x.svg"
ellipse1="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-1#2x.svg"
maskGroup="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/mask-group#2x.svg"
great="Great!"
text1="Your payment was successfull"
place="Okay"
/>
);
}
export default success;
function Frame1(props) {
const { ellipse2, ellipse1, maskGroup, great, text1, place } = props;
return (
<div className="frame-1">
<div className="overlap-group1">
<img className="ellipse-2" src={ellipse2} />
<img className="ellipse-1" src={ellipse1} />
<div className="typcntick smart-layers-pointers ">
<img className="mask-group" src={maskGroup} />
</div>
<h1 className="great avenirnext-medium-black-48px">{great}</h1>
</div>
<div className="text-1 avenirnext-medium-black-24px">{text1}</div>
<div className="overlap-group">
<Rectangle1 />
<div className="place avenirnext-demi-bold-white-36px">{place}</div>
</div>
</div>
);
}
function Rectangle1() {
return <div className="rectangle-1 smart-layers-pointers "></div>;
}
I have copied the jsx and css files from anima and now I am trying to import that into my app.
But I am unable to display it on my app. How can I resolve this?
import React from 'react';
import './success.css';
import success from './success';
const App = () => {
return (
<div>
<success/>
</div>
);
}
export default App;
I checked the react code and it works for me, maybe there's something basic that is not setup correctly. First thing is to try and see if your react code shows a simple hello world text.
I see that you are using anima to import figma and export react code. If you manage to get it work that's great, if not I recommend trying Desech Studio and see if that works for you.
It imports Figma with relative html/css positioning and it exports react code. Here's the github repo for more details.
The success component you imported and exported should start with a capital letter like Success then only react understands that its a component
I need to have a background image on my website. I tried using the img tag and this one does work but because I am trying to use Tailwind to have my image styled I would much prefer using the background tag.
This is my current component's code:
import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'
function Home() {
return (
<div className="">
<Header/>
<div style={{ backgroundImage: `url('${houseImg}')` }} />
<HomePageDescr/>
</div>
);
}
export default Home;
Everything renders but the actual background. I tried looking at various things here but no questions/answers helped. Not adding require to the image, nothing.
Anyone encountered the same problem?
Thanks
You need to resize the div. Try setting height and width for the div
I thought this would be simple, and the answer probably is and I'm just missing something, but I'm having trouble with updating a header/layout component based on what page I'm on.
Code wise, I have just installed the ASP.NET Core 2.0 template that uses React with Redux. I'm familiar with React, but TypeScript and Redux is new to me so it's hopefully a syntax/layout issue I'm having, as I can do this in a standalone React project. If you create a new project in Visual Studio following this template, you'll see the code that I'm trying to modify (New > Project > ASP.NET Core Web Application > React.js and Redux).
The TypeScript Layout file (ClientApp/components/Layout.tsx) is where I want to put essentially:
<h1>{ this.state.title }</h1>
...and further on from this use a Header tag to load a Header component that holds the title.
I want to then change the title based on whether I am on the Home, FetchData, or Counter page, which I imagine is just a basic string set on each component file.
If you can't open the project file for whatever reason, here is the layout I'm working with:
Layout component (should set the title here)
import * as React from 'react';
import { NavMenu } from './NavMenu';
export interface HeaderState {
title: string;
}
export class Layout extends React.Component<{}, {}> {
public render() {
return <div className='container-fluid'>
// !!!!---> Create a <Header /> component that includes the page title, set on a page by page basis
<div className='row'>
<div className='col-sm-3'>
<NavMenu />
</div>
<div className='col-sm-9'>
{ this.props.children }
</div>
</div>
</div>;
}
}
I would potentially include more component code for those who can't use the Visual Studio project, but it's pretty bloated with a lot of code that doesn't apply here. I just thought someone could help without needing it, but happy to provide if necessary!
Any help or pointers in the right direction are greatly appreciated! Apologies if this question and answer is somewhere. I have Googled and searched SO but no luck.