I have built a portfolio website with react here https://andrewkaras.me, but on selected work section you will notice lags when scrolling through project images (especially on Safari).
Here is the code for the projects container and for individual projects:
Myprojects:
import React from 'react'
import colors from '../../assets/colors.png'
import colorsWebp from '../../assets/colors.webp'
import crwn from '../../assets/crwn.png'
import crwnWebp from '../../assets/crwn.webp'
import devchat from '../../assets/devchat.png'
import devchatWebp from '../../assets/devchat.webp'
import movies from '../../assets/movies.png'
import moviesWebp from '../../assets/movies.webp'
import Project from '../../Components/Project/Project'
import styles from './MyProjects.module.scss'
const MyProjects = () => {
return (
<div className={styles.container} id="myProjects">
<div className={styles.myProjects}>
<div className={styles.headerWrapper}>
<h2 className={styles.header}>Selected Work</h2>
</div>
<Project
name="CRWN Clothing"
image={crwn}
imageWebp={crwnWebp}
color="rgb(157, 169, 238)"
hoverColor="rgb(177, 189, 258)"
link="crwnclothing.andrewkaras.me"
githubLink="https://github.com/Justbigmack/CRWN-Clothing"
text="An e-commerce web-app that allows you to easily purchase clothes. Payments are processed via Stripe API. It is built with React, Redux, Redux-Sagas and Firebase"
/>
<Project
right
name="React Colors"
image={colors}
imageWebp={colorsWebp}
project="colors"
color="rgb(161, 106, 195)"
hoverColor="rgb(181, 126, 215)"
link="colors.andrewkaras.me"
githubLink="https://github.com/Justbigmack/react-colors"
text="React Colors is an app allowing you to generate color palettes for your projects by leveraging easy to use UI and drag and drop system. The project is put together using React, CSS in JS, Material UI and features some React Router animations"
/>
<Project
name="DevChat"
image={devchat}
imageWebp={devchatWebp}
project="devchat"
color="rgb(251, 93, 81)"
hoverColor="rgb(271, 113, 101)"
link="devchat.andrewkaras.me"
githubLink="https://github.com/Justbigmack/dev-chat"
text="DevChat is a simplified clone of a well-known app - Slack. Devchat allows desktop and large tablet users to exchange messages, files and much more. The project is developed using React, Redux, Firebase and Semantic UI"
/>
<Project
right
name="React Movies"
image={movies}
imageWebp={moviesWebp}
project="movies"
color="rgb(134, 191, 211)"
hoverColor="rgb(154, 211, 231)"
link="movies.andrewkaras.me"
githubLink="https://github.com/Justbigmack/react-movies"
text="React Movies is a web-application that allows you to search for your favorite movies. It utilizes React Router and pulls information from TMDB via API"
/>
</div>
</div>
)
}
export default React.memo(MyProjects)
One project:
import React, { useState } from 'react'
import { ReactComponent as GithubIcon } from '../../assets/github.svg'
import styles from './Project.module.scss'
const Project = ({
name,
color,
hoverColor,
image,
imageWebp,
githubLink,
link,
right,
text
}) => {
const [hover, setHover] = useState(false)
const [hoverGH, setHoverGH] = useState(false)
return (
<div
className={right ? styles.projectContainerRight : styles.projectContainer}
>
<div className={styles.imageContainer} style={{ backgroundColor: color }}>
<picture>
<source type="image/webp" srcSet={imageWebp} />
<source type="image/png" srcSet={image} />
<img src={image} alt="Project of mine" />
</picture>
</div>
<div className={styles.projectTech}>Web-App</div>
<div className={styles.projectInfo}>
<h3 className={styles.projectName}>
{name}
<div className={styles.projectGithub}>
<a href={githubLink}>
<GithubIcon
onMouseEnter={() => {
setHoverGH(true)
}}
onMouseLeave={() => {
setHoverGH(false)
}}
className={styles.githubIcon}
style={
hoverGH
? {
fill: color
}
: {
fill: hoverColor
}
}
/>
</a>
</div>
</h3>
<h4 className={styles.projectText}>{text}</h4>
<a
className={styles.projectLink}
onMouseEnter={() => {
setHover(true)
}}
onMouseLeave={() => {
setHover(false)
}}
style={
hover
? {
color: color
}
: {
color: hoverColor
}
}
href={`https://${link}`}
>
{link}
</a>
</div>
</div>
)
}
export default React.memo(Project)
Everything is okay, if I add the same image to all projects, but as soon as I pass each project an individual image, it starts lagging on scroll. I am having trouble trying to figure out why.
Related
I am working on a ott clone project. I want to render a page(profile page) when a user is login and click ont the profile avatar. I used useHistory() from react-router-dom and it doesn't render the profile screen page.
Code;
ProfileScreen;
import React from 'react'
import "./ProfileScreen.css"
function ProfileScreen() {
return (
<div className='ProfileScreen'>
<h1>Hey Yoo</h1>
</div>
)
}
export default ProfileScreen;`
Avatar code
import { useHistory} from 'react-router-dom';
const history = useHistory()
return (
<div className= { `nav ${show && 'nav_black'}`}>
<div className="nav_contents">
<img className='nav_logo' src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="" />
<img onClick={() => history.push("/profile")} className='nav_avatar' src="https://ih0.redbubble.net/image.618369215.1083/flat,1000x1000,075,f.u2.jpg" alt="" />
</div>
</div>
);
react router dom version 8.19.2
I don't know what's wrong in the code, it doesn't work.
I've have been going through the code in this really fascinating project https://github.com/MaximeHeckel/linear-vaporwave-react-three-fiber. It's a 3D next.js app that allows 3D rendering and animating of meshes and camera views in the browser. I would love to convert this code to tsx instead of the original js. How would I do that...?
This is an example of a random boilerplate page written in tsx:
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Next.js!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.tsx</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
export default Home
This is the type of code that I'm used to working with in Next.js
This is a little snippet from pages/index.js in https://github.com/MaximeHeckel/linear-vaporwave-react-three-fiber
const Scene = () => {
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
return (
<>
{!mounted ? null : (
<Canvas
style={{
position: "absolute",
display: "block",
top: 0,
left: 0,
zIndex: -1,
outline: "none",
}}
dpr={Math.min(window.devicePixelRatio, 2)}
linear
antialias
>
<React.Suspense fallback={null}>
<color attach="background" args={["#000000"]} />
<fog attach="fog" args={["#000000", 1, 2.5]} />
<OrbitControls attach="orbitControls" />
<PerspectiveCamera
makeDefault
position={[0, 0.06, 1.1]}
fov={75}
near={0.01}
far={20}
/>
<Light />
<Landscape />
<Effects />
</React.Suspense>
</Canvas>
)}
</>
);
};
export default function Home() {
return (
<div>
<Head>
<title>Linear - React-Three-Fiber</title>
<meta
name="description"
content="A reversed-engineer versioned of the WebGL animation from the Linear 2021 release page. Recreated by #MaximeHeckel"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<div className="label-container">
<p className="label">
⚡️ Originally inspired by the{" "}
<a href="https://linear.app/releases/2021-06">
2021 Linear release page
</a>
</p>
<p className="label">
✨ Reverse-engineered and recreated by{" "}
#MaximeHeckel with
React-Three-Fiber
</p>
<p className="label">
👉 How I built this?{" "}
<a href="https://blog.maximeheckel.com/posts/vaporwave-3d-scene-with-threejs/">
Building a Vaporwave scene with Three.js
</a>{" "}
(Three.js only)
</p>
</div>
<Scene />
</main>
</div>
);
}
I figure "Home" is easy to convert because I can just change export default function Home() { to const Home: NextPage = () => { and add an export default Home at the bottom of the page.
"Scene" looks more challenging to convert. First of all the return html is wrapped in <> and </> which is unfamiliar to me, and I keep seeing things like React.useEffect and React.Suspense. It seems weird to declare "React" first instead of just "useEffect."
Could someone please convert the "Scene" const to typescript code and from there I will be able to translate the rest of the file?
'Const scene' should work in TS aswell, you can add FC and an interface though, if you want to be able to use props later!
The empty '<>' is just used to wrap your return. If you want to return multiple HTML like this
<div></div>
<div></div>
You will have to wrap them in a parent tag. Like this:
<div>
<div></div>
<div></div>
</div>
You could switch out the empty the empty '<>' to something else aswell, like a div!
For the 'React.useState' etc, you can just import them from react and use them directly!
import {useEffect, useState, FC, Suspense} from 'react'
interface Props {}
const Scene:FC<Props> = (props) => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return (
<>
{!mounted ? null : (
<Canvas
style={{
position: "absolute",
display: "block",
top: 0,
left: 0,
zIndex: -1,
outline: "none",
}}
dpr={Math.min(window.devicePixelRatio, 2)}
linear
antialias
>
<Suspense fallback={null}>
<color attach="background" args={["#000000"]} />
<fog attach="fog" args={["#000000", 1, 2.5]} />
<OrbitControls attach="orbitControls" />
<PerspectiveCamera
makeDefault
position={[0, 0.06, 1.1]}
fov={75}
near={0.01}
far={20}
/>
<Light />
<Landscape />
<Effects />
</Suspense>
</Canvas>
)}
</>
);
};
When I started the project, I never thought of adding a cart, but now I want to.
Let me tell you the structure,
I have a jsx called Pricetag.jsx in which I have defined how my card will look like it has name, image, and add to cart.
Here is my Pricetag.jsx
import React from 'react'
import './Body.css'
// import './Cart.js'
import { useState } from 'react'
export default function Pricetag(props) {
const [count, setCartCount] = useState([]);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
And this is the Birthday.jsx where I have used Pricetag information using props,
import React from 'react'
import './Body.css'
import { Link } from 'react-router-dom'
import Pricetag from './Pricetag'
import image80 from './assets/cake80.jpeg'
import image81 from './assets/cake81.jpeg'
export default function Cakebody(props) {
return (
<>
<Link to='/' className="menulink con112 ">
<div className='name1' >Back to home page</div>
</Link>
<div className="headingbody">
{props.title}
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image80} name="Doll Cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image81} name="Mixed Platte Cake" bold="Rs 345" cut="Rs 634" />
</div> </>
)
}
Now first I tried my self, then after watching some tutorials I noticed that they all are using objects to store data -> id, name, price, and all but, is there any way I can do it without it.
I want to some how grab the name and image of the cake from the birthday.jsx and want to send it to a new cart.jsx.
In fact JS is an object, everything in JS is kind of an object
if you find way to do something is JS without using object let me know
Good day! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out.
i already install the materializecss using npm,
heres my code:
import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';
const About = () => {
return (
<div className="paralax">
<div className="parallax-container">
<div className="parallax"><img src={Pic1} alt="Building"/></div>
</div>
<div className="class section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 ligthen-3">
Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src={Pic2} alt="Building"/></div>
</div>
</div>
)
}
export default About;
Use react-materialize.
Install: npm install react-materialize
And import Parallax like import {Parallax} from 'react-materialize';
Hence your code becomes:
import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';
class App extends Component {
render() {
return (
<div>
<Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
</div>
);
}
}
export default App;
I have used image hyperlinks. But you can replace them with static images also.
Also, import jquery befor materialise.min.js in your index.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
For Reference : https://react-materialize.github.io/#/
PEACE
To use Javascript components of Materialize CSS, we need to get the reference of that particular element that we're gonna use.
We're using ref because we're triggering imperative animations.
When to Use Refs
Triggering imperative animations.
Integrating with third-party DOM libraries.
As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref.
When to use refs in React
CodeSandbox - Parallax Demo
You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";
class Parallax extends Component {
componentDidMount() {
M.Parallax.init(this.Parallax1);
M.Parallax.init(this.Parallax2);
}
render() {
return (
<>
<div className="parallax-container">
<div
ref={Parallax => {
this.Parallax1 = Parallax;
}}
className="parallax"
>
<img src={Image2} />
</div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">
Parallax is an effect where the background content or image in
this case, is moved at a different speed than the foreground
content while scrolling.
</p>
</div>
</div>
<div
ref={Parallax => {
this.Parallax2 = Parallax;
}}
className="parallax-container"
>
<div className="parallax">
<img src={Image1} />
</div>
</div>
</>
);
}
}
export default Parallax;
Sorry if this is a duplicate question. I can't seem to solve this or find an answer.
Essentially I want to display an image so it responsively adjusts depending on screen size. I'm using the React-Bootstrap example and it just isn't working. Here is the code I'm using and here is a link to the example https://react-bootstrap.github.io/components.html#media-content .
import React from 'react';
import {ResponsiveEmbed, Image} from 'react-bootstrap';
export default React.createClass ( {
render() {
return (
<div style={{width: 660, height: 'auto'}}>
<ResponsiveEmbed a16b9>
<embed type="image/href+xml" href = "https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg"/>
</ResponsiveEmbed>
</div>
);
}
});
This is the App.jsx file it connects too
import React from "react"
import { render } from "react-dom"
import Footer from "./components/Footer"
import HeaderNavigation from "./components/HeaderNavigation"
import App1Container from "./containers/App1Container"
import Carousel from "./components/Carousel"
class App1 extends React.Component {
render() {
return (
<div>
<HeaderNavigation />
<Carousel />
<App1Container/>
<Footer/>
</div>
)
}
}
render(<App1/>, document.getElementById('App1'))
If you want just image why not to use:
<Image src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" responsive />
Bootstrap Jumbotron stuff does not deal with background image. Try this instead
at top of file:
import Jumbotron from "./src/img/1.png"
in your div:
<img style={{height:'auto',width:'100%'}} src={ Jumbotron }/>
Try replacing this code:
const responsiveEmbedInstance = (
<div style={{width: 500, height: 'auto'}}>
<ResponsiveEmbed a16by9>
<embed type="image/svg+xml" src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" />
</ResponsiveEmbed>
</div>
);
Here is an example: http://jsfiddle.net/jayesh24/ywzw5hrt/
It should be a16by9 and not a16b9. Answered by rishipuri
Use react-bootstrap package
import Image from "react-bootstrap/Image";
import "bootstrap/dist/css/bootstrap.css";
<Image src="image.png" fluid/>