I am trying to implement a project like:
https://codepen.io/andytran/pen/GpyKLM
As you can see there is javascript that is needed for the page to function. I am trying to build a Next/React component that implements this code:
import React, { Component } from 'react';
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
class Auth extends Component {
render() {
return (
<div className="App">
<Header></Header>
<div className="container mrgnbtm">
<div className="row">
<div>
hello
</div>
</div>
</div>
</div>
);
}
}
export default Auth;
Where would I put the javascript in the above example? Also, how would I call code from a scss file?
What you do is anti-pattern, instead of importing bootstrap from a CDN you can use reactstrap package.
for element listeners, must pass those to each element that you want, like onClick:
<div id="button" onClick={() => alert("button clicked!")} ....
and for using SCSS in your next app, first you have to install the sass package:
npm install sass --save
then reload the dev server and import SCSS file in component, e.g:
import styles from '../../styles/Home.module.scss'
Related
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.
I have a Laravel project where we are using React for new components but about half of the existing pages are older and just use the regular blade files.
In the public folder we have a few css files that are included in app.blade.php which serves as out top file.
Now, it works perfectly until we try to import React Component. As soon as i do this, it recompiles the css in some weird way that it just breaks. All previously used css just seems to stop working.
This is my mix file:
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css')
An example React Component i'm testing (comes from the laravel + react babel preset, i just added the css import):
import React from 'react';
import ReactDOM from 'react-dom';
import './Example.css'
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="txt-color-white card-header">Example Component</div>
<div className="txt-color-white">ISTO É UM TESTE</div>
<div className="txt-color-white card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
And this is my public folder. I'm assuming react css is being thrown into the app.css file but instead of being added (appended) is doing something weird.
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
I've set up my new laravel project with react UI using php artisan ui react. Did the npm install and npm run dev. Added the react id and script link to the welcome.blade.php. now the example react component is loading but bootstrap styling isn't present at that page. my codes are below,
app.js:
require('./bootstrap');
require('./components/Example');
Example.js:
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
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>
);
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
I'm using laravel 8.12. Am I missing something?
You need to include styles:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
to your welcome.blade.php view file, where is located <div id="example"></div>
I faced issues with Pagination error while using bootstrap ui.
Additionally, I will suggest adding this code to AppServiceProvider.
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::useBootstrap();
}
I'm trying to make a React Component that uses fullpage.js. However, I'm having issues trying to integrate the javascript files from the fullpage.js library. This is what I have (abbreviated):
import React from 'react';
let $ = require('jquery')(require('jsdom').jsdom().defaultView);
import 'fullpage.js';
class FullPage extends Component {
componentDidMount() {
$('#fullpage').fullpage();
}
render() {
return (
<div id="fullpage">
<div className="section">Some section</div>
<div className="section">Some section</div>
<div className="section">Some section</div>
<div className="section">Some section</div>
</div>
)
}
}
However, using this component gives an error:
Error: jQuery requires a window with a document
Even if I have defined a window using JSDOM.
Beyond fullpage.js, how should I go about using libraries that require jQuery into React components?
window.$ = require('jquery')(window);
Could you please try with above code?