How can i create animations in reactjs? - javascript

How can i do animations in react? Is there any useful package for this? Should i create a custom hook and make a script? I want to do an animated text and also a canvas to display a color as the mouse moves around.
This is my content
Main.js:
import React from 'react'
import Heading from '../organisms/Heading'
import Button from '../atoms/Button'
import './Main.css'
const Main = () => {
return (
<div className='main_container'>
<section className="main" id="main">
<div className="content">
<h2>Hello, I´m <br/> <span>Mateo Ghidini</span></h2>
<div className="animated-text">
<h3>Web Designer</h3>
<h3>Jr Full-stack Web Developer</h3>
</div>
<Button className="btn" content="See My Work"/>
<div className="media-icons">
<i className="fab fa-linkedin-in"></i>
<i className="fab fa-github"></i>
</div>
</div>
</section>
</div>
)
}
export default Main

CSS animations. This way is the best for a simple animation. When you use it instead of importing javascript micro libraries, your bundle is smaller.
ReactTransitionGroup. This module has been developed by the guys from ReactJs community. Developers describe this library as:
“A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.”

Related

localhost server not displaying image (React)

I am learning react and following a series of challenges to do so. One such challenge has me create a React component that takes in properties. One of these properties is the name of a png file. I was not able to do this correctly but the correct line does not seem to be working.
This is an Ubuntu distro on WSL on a windows laptop.
I have done research on the topic the last few days and most response say to turn off adblocker (did not fix it), change file permissions (also did not work), turn off JS and CSS source maps (also did not work).
I noticed that a manually coded url to an image in the same folder was changed to
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgA…Cxd82/eqNyzDUJ0ohc8k/PbelTLtHJFgAAAAASUVORK5CYII=
My component is
import React from "react";
import star from "../images/star.png";
export default function Card(props) {
return (
<div className="card">
<div className="card--image">
<h3 className="card--availability">SOLD OUT</h3>
<img src={`../images/${props.img}`} alt="not working"></img>
</div>
<div className="card--rating">
<img src={star}></img>
<p className="card--dark-text">{props.rating}</p>
<p className="card--light-text">
({props.reviewCount}) · {props.country}
</p>
</div>
<p className="card--desc">{props.title}</p>
<div className="card--price">
<h5>From ${props.price}</h5>
</div>
</div>
);
}
Which is used in
import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";
export default function App() {
return (
//<Hero />
<div>
<Navbar />
<Card
img="zeferes.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Playing on the beach with me."
price={136}
/>
</div>
);
}
My file directory looks like
And every other property works.
The displayed screen right now is:
What is going wrong?
Thank you for any help.
import for the image file(zeferes.png) is missing in Card component.
importing image file in Card component should fix the issue.

React.js NavBar: Is it possible to reference a different component's markup? (Trying to create a navbar that references to components in one route)

Basically I'm trying to make a navbar for a personal website application in which the navbar references content (About/Skills, etc.) all on single page (route). When making the navbar, I can easily reference markup with ids/classes BUT I would have to put all the html in one file.
I noticed that if I were to separate each content into its own react file (About.jsx, Skills.jsx, etc.) and import them, there didn't seem to be a way for me to reference the react component's markup.
I also noticed with react router, this wasn't feasible because each component would be on a separate route (which I don't want) rather than on a single route.
This is my current navbar file below; How exactly Can I import and reference the markup of the separate components?
import React from 'react';
import "../Styles/NavBar.scss";
import About from "./About.jsx"; (Not used)
import Skills from "./Skills.jsx"; (Not Used)
import Projects from "./Projects.jsx"; (Not used)
const NavBar = () => (
<div class="MainDivWrapper">
<div class="NavBarDiv">
<h1 class="NavBarH1">NavBar</h1>
<br/>
<nav>
About
Skills
Projects
</nav>
{/* <div id="AboutDiv">
<h1>About Me</h1>
<span>Just some text</span>
</div>
<div id="SkillsDiv">
<h1>Skills</h1>
<span>Just some text</span>
</div>
<div id="ProjectssDiv">
<h1>Projects</h1>
<span>Just some text</span>
</div> */}
</div>
<hr class="HeaderDivider"/>
</div>
)
You reference a JSX import like that:
/* Component have to start with a capital letter. file name can be anything (usually is the same as component) */
import MyComponent from "./MyComponent"
export default function MyApp() {
return (
<div>
/* other html/components here */
<MyComponent /> // selfing close tag
/* or */
<MyComponent> // with `children`
some content
</MyComponent>
</div>
)
}
Here is a codesandbox implementation of your code: https://codesandbox.io/s/stack-reactjs-navbar-is-it-possible-to-reference-a-different-components-markup-64oic?file=/src/App.js

What's the standard way of add/remove items to/from a Web Component layout?

I'm writing web components using VueJS and vue-custom-element package. The web component that I'm creating is a layout components containing multiple modules such as chat, userList and so on. I need to add the ability to add/remove elements from the layout at runtime.
How can it be possible?
<my-layout></my-layout>
This is a simple layout. How can I make these buttons work?
This is the current layout template:
<template>
<div>
<button>Add new chat module</button>
<button>Add new users module</button>
<div id="layout" class="row">
<div class="col-sm">
<my-chat></my-chat>
</div>
<div class="col-sm">
<my-users></my-users>
</div>
</div>
<block :menu="testMenu">Custom block</block>
</div>
</template>
These are possible solutions :
Calling a method inside the web component. (It's seem that it's not possible!)
document.getElementById("layout").addModule('chat')
Sending a configuration JSON as attribute containing the list of requested modules and their
count.
<my-layout conf='{"modules":{"chat":{"count":5}}"}'></my-layout>
Add a separate count attribute for each module.
<my-layout chat-count="5" users-count="2"></my-layout>

I am having trouble importing this file

This picture that I am trying to import will not show up on my webpage with. I am new to react and very frustrated with this I have read the facebook documentation but I am still lost. Help, please.
https://jsfiddle.net/gexcoz1k/
I am trying to log the file path to the console but it is saying it is undefined
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import computer from './computer.png';
class Home extends Component {
render() {
return (
<div className="main-content home">
<div>
<img src={compter} title='computer' />
</div>
<small className="description"> </small><br/>
<small className="description"> Miami,FL </small>
<p className="about">Hello, and thank you for visiting my website. I have always been a computer guy I remember inspecting elements in middle school and changing some text and thinking I hacked the school website. To then creating my own website with basic HTML and CSS in high school. </p>
<br/>
<p className="about">From there I decided to go to college for Computer Science where I studied languages like C++ and learned how to think like a programmer. The ability to create things you think of into a real space fascinates me. I love solving problems and being creative so programming is perfect for me it seems as it has always been a part of my life. Currently, I am learning more frameworks next I plan to learn back-end and in a few years delv into machine learning.</p>
{/* Add Email Button */}
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=tyriquedaniel14#gmail.com,tyrique1.daniel#gmail.com&su=Programming-Inquiry&body=BODY" target="_blank"rel="noopener noreferrer" className="email">
Email Me
</a>
<a href="https://drive.google.com/file/d/1o5Fxe49MugM1b2Z6IW2lN6s1gXqmvcTf/view?usp=sharingn" target="_blank" rel="noopener noreferrer" className="email">
Resume
</a>
<ul>
<li>LinkedIn</li>
<li>Github</li>
<li>SoloLearn</li>
<li>SoloLearn</li>
</ul>
<hr />
<h3>What i am currently Using </h3>
<Link to="/teachers" >HTML</Link>
<Link to="/teachers" >Javascript</Link>
<Link to="/teachers" >React </Link>
<Link to="/teachers" >CSS</Link>
<Link to="/teachers" >BootStrap</Link>
<Link to="/teachers" >Docker</Link>
<Link to="/teachers" >NPM</Link>
<Link to="/teachers" >Accessibility/Mobile Responsive</Link>
</div>
);
}
}
export default Home;
I would like this picture to show up
The import statement is only meant for modules.
Try require('./computer.png')
You are using wrong spelling, it must be comp(U)ter not compter
<img src={computer} title='computer' />
Small Suggestion: If you don't have state then use stateless method

Calling different components into rows in React

I have a very basic question that I cannot comprehend and need some help. I'm creating a really small React project for my personal website. I have App.js that is calling all the different components such as header, intro and etc:
import React from 'react';
import Header from './Header';
import Intro from './Intro';
export default class App extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-6">
<Header />
</div>
</div>
<div className="row">
<div className="col-xs-6">
<Intro />
</div>
</div>
</div>
)
}
}
As you can assume, header is just the top portion of the page and intro (currently) just says some text. This is what it looks like:
The second component is being blocked by the first component. Can someone explain how React works with components in terms of how it's rendered on the web page? Or is this purely a HTML issue in App.js?

Categories