I'm currently working on a project which involved both React and Preact. I came across to this where I need to use same component for React and Preact.
Is it a good idea to put the component into npm library package. What are the possible way to create component library for both React and Preact? Looking forward to hear your ideas and discussions.
The code might look like as the following:
React Project: Home.js
import React from 'react'
import Fancy from 'fancy-component/react' // My <Fancy /> component library
class Home extends React.Component {
render() {
return (
<div>
{/* Other parts of the code run here*/}
<Fancy text='🦄' />
</div>
)
}
}
export default Home
Preact Project: AnswerPage.js
import { h, Component } from 'preact'
import Fancy from 'fancy-component/preact' // My <Fancy /> component library
class AnswerPage extends Component {
render() {
return (
// Other Preact codes run here again
<Fancy text='🚀 again' />
)
}
}
export default AnswerPage
Component library: fancy-component
const Fancy = ({ text = '' }) => (
<div>
<span>{`This is so Fancy ✨ ${text}`}</span>
</div>
)
export default Fancy
We did this very thing recently, and because we could not find much information regarding this online it involved quite a bit of trial and error. This is what we ended up with:
Folder Structure:
/apps
/mobile
/desktop
/shared
/components
With preact 10, preact-compat is built in so you don't have to worry having separate components - just use React as normal for the components in your shared folder and preact will automatically alias the imports correctly.
As far as aliasing goes, we added this into our preact.config.js so that we can import the components like #components/Date from the app directory
config.resolve.alias['#components'] = path.resolve(__dirname, '../../shared/components')
For the React app, the only way that I could make that work was to add the aliasing in the babel.config.js like so:
['module-resolver', {
alias: {
'#components': '../../shared/components'
}
}]
I hope that this helps someone else that might be stuck on this!
I cannot make the component react-datepicker display properly.
it actually displays like this.
I wish it could display at least like the documentation for the component does.
I first thought it was a dependency problem, and added all the dependencies the doc says are needed. The result is still the same.
Some stackoverflow questions talked about this and referred to a missing stylesheet. However I imported everything with npm, so that shouldn't be the problem.
My class component looks like this :
import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";
class Filters extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate : new Date()
};
this.handleStartChange = this.handleStartChange.bind(this);
}
handleStartChange = (date) => {
this.setState({
startDate : date
})
}
render() {
return (
<div className="filters">
<div id="filterbox">
<p id="titre">Filtres</p>
<DatePicker
selected={this.state.startDate}
onChange={this.handleStartChange} />
</div>
</div>
)
}
}
export default Filters;
I apologize in advance if the problem is very obvious, I'm quite new to reactjs.
You forgot to import the package css.
From the documentation:
import "react-datepicker/dist/react-datepicker.css";
I think you have to import the react-datepicker.css too, not only the package itself.
import "react-datepicker/dist/react-datepicker.css";
Below is a simple example of how to use the Datepicker in a React
view. You will also need to require the CSS file from this package (or
provide your own). The example below shows how to include the CSS from
this package if your build system supports requiring CSS files
(Webpack is one that does).
you haven't imported their css file.
import "react-datepicker/dist/react-datepicker.css";
I'm new to ReactJS. Previously I've used jQuery to set any animation or feature that I needed. But now I'm trying to use ReactJS and minimize the use of jQuery.
My Case is:
I'm trying to build an accordion with ReactJS.
<div class="accor">
<div class="head">Head 1</div>
<div class="body hide">Body 1</div>
</div>
<div class="accor">
<div class="head">Head 1</div>
<div class="body hide">Body 1</div>
</div>
<div class="accor">
<div class="head">Head 1</div>
<div class="body hide">Body 1</div>
</div>
using JQuery:
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
My Question:
How can I do this with ReactJS?
Yes, we can use jQuery in ReactJs. Here I will tell how we can use it using npm.
step 1: Go to your project folder where the package.json file is present via using terminal using cd command.
step 2: Write the following command to install jquery using npm :
npm install jquery --save
npm i --save-dev #types/jquery
step 3: Now, import $ from jquery into your jsx file where you need to use.
Example:
write the below in index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
// react code here
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
// react code here
write the below in index.html
<!DOCTYPE html>
<html>
<head>
<script src="index.jsx"></script>
<!-- other scripting files -->
</head>
<body>
<!-- other useful tags -->
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<button>Get External Content</button>
</body>
</html>
You should try and avoid jQuery in ReactJS. But if you really want to use it, you'd put it in componentDidMount() lifecycle function of the component.
e.g.
class App extends React.Component {
componentDidMount() {
// Jquery here $(...)...
}
// ...
}
Ideally, you'd want to create a reusable Accordion component. For this you could use Jquery, or just use plain javascript + CSS.
class Accordion extends React.Component {
constructor() {
super();
this._handleClick = this._handleClick.bind(this);
}
componentDidMount() {
this._handleClick();
}
_handleClick() {
const acc = this._acc.children;
for (let i = 0; i < acc.length; i++) {
let a = acc[i];
a.onclick = () => a.classList.toggle("active");
}
}
render() {
return (
<div
ref={a => this._acc = a}
onClick={this._handleClick}>
{this.props.children}
</div>
)
}
}
Then you can use it in any component like so:
class App extends React.Component {
render() {
return (
<div>
<Accordion>
<div className="accor">
<div className="head">Head 1</div>
<div className="body"></div>
</div>
</Accordion>
</div>
);
}
}
Codepen link here: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110
Step 1:
npm install jquery
Step 2:
touch loader.js
Somewhere in your project folder
Step 3:
//loader.js
window.$ = window.jQuery = require('jquery')
Step 4:
Import the loader into your root file before you import the files which require jQuery
//App.js
import '<pathToYourLoader>/loader.js'
Step 5:
Now use jQuery anywhere in your code:
//SomeReact.js
class SomeClass extends React.Compontent {
...
handleClick = () => {
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
}
...
export default SomeClass
Earlier,I was facing problem in using jquery with React js,so I did following steps to make it working-
npm install jquery --save
Then, import $ from "jquery";
See here
To install it, just run the command
npm install jquery
or
yarn add jquery
then you can import it in your file like
import $ from 'jquery';
I read a lot about jQuery and ReactJS; they have been always advised to avoid using jQuery in ReactJS apps.
If you want to create an accordion, you can do it with React-Bootstrap:
React-Bootstrap Accordion Component
I was tried bellow script and its work fine for me.
Install jQuery : npm install jquery
Import $ from jQuery : import $ from "jquery";
Write bellow code on Component Did Mount Method
componentDidMount() {
$(document).on('click','.accor > .head',function(){
`var closestDiv = $(this).closest('.accor');`
`closestDiv.find('.body').slideToggle();`
});
}
You can use JQuery with React without doing:
import $ from 'jquery'
To do so, you need to go to the root folder where package.json in your terminal and type this command:
yarn add -D expose-loader
Then add this configuration to your webpack.config.js file:
module: {
rules: [
{test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery'}
]
}
This exposes $ and jQuery to the global scope, so you can use them anywhere in your code.
Don't forget to add Jquery to your vendor bundle like this:
module.exports = config({
entry: {
vendor: [
'jquery'
]
}
...
Now you can use jquery without importing it inside your code because that's what expose-loader does for you.
And to test that it works just fine, add this to any file in your project:
console.log($);
and see in your browser console that it will show you the $ variable without throwing an error.
use a style library like bootstrap or MUI to accomplish this. react has react strap, a solid bootstrap/react component package. the style frameworks can both be used but it is not a good practice to mix them. I would recommend using react strap as i believe it has better react components, personal preference.
if you continue in react, you will find that jquery is not the best solution. it may work but since react and jquery are bothing working from the dom (and react manages a shadow dom) you might have issues. someone had mentioned using the react lifecycles to use the library on mount or load. for those of us using the newer functional components & hooks (react 16+ i believe) we can use the useEffect hook to call it on load.
useEffect(() => {
// use jquery here if you must, this way the component is loaded
//and the dom matches whats in react (or should)
}, []);
the style and component libraries are best practice. for the same reason you would use formik to manage a form component (to not have to re-create the wheel/form every time) the same is true for the style component libraries.
https://www.npmjs.com/package/reactstrap
https://getbootstrap.com/docs/5.0/components/accordion/
https://mui.com/components/accordion/
Best is not to mix React and jQuery if you require it for any jQuery plugins. It will not work as event handlers (like onclick) in jQuery do no work.
See excellent answer here:
What is the right way to use Jquery in React?
If you really have to mix the two, read here:
https://reactjs.org/docs/integrating-with-other-libraries.html
$('.simpleCart_input').blur(function() {
var val = $.trim(this.value);
$(this).wrap($('<span/>', {
'class': $(this).attr('class'),
html: val
})).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="simpleCart_input" style="background-color:yellow; color:balck; border-radius:6px; height:90px; width:100px;" />
React jquery plugin is a node package that will help you using jQuery plugins easily with ReactJs.
npm i react-jquery-plugin
or
yarn add react-jquery-plugin
USAGE:
import React, { useEffect } from 'react'
import { $ } from 'react-jquery-plugin'
export default function App() {
//if you're using LifeCycle methods
// componentDidMount() {
// $(window).scroll(() => {
// // put your code here
// });
// }
// With lifeCycle Hooks
useEffect(() => {
$(window).scroll(() => {
// put your code here
});
}, [])
return (
<div>
<h1>Hello React with jQuery</h1>
</div>
)
}
If you need to add jQuery code for all your React App then you should add the jQuery in componentDidMount() lifecycle function of the component:
class App extends React.Component {
componentDidMount() {
// Jquery Code for All components of the React App
}
}
But, if you need to use jQuery code in each component in the App, you should put your code in the useEffect()
const ComponentExample = () => {
useEffect(() => {
// Jquery Code for this component
})
return (
<div>
<h1></h1>
</div>
)
}
Complete newbie to React and trying to find out how to load the HTML for components rather than inserting it directly in the render method. For example
import React, {Component} from 'react';
export default class Login extends Component {
render() {
return (
<!-- how can I provide a link to the HTML template for here? -->
);
}
}
React does not have HTML. The JSX that you write in the render method is actually compiled into JavaScript. At the core, React components are all JavaScript. The styles are also inline. Componentisation is neat in React because HTML, CSS, JavaScript (interactions) are all in one place, as JavaScript.
To insert raw HTML, React has an attribute dangerouslySetInnerHTML.
<div dangerouslySetInnerHTML={createMarkup()} />
If you want some type of organization, you can use variables to set the html and then assign that to the render functionalty, but React does not use html templates
var hello = React.createClass({
render: yourVariable
});
I think you might be confused about how JSX works.Just in case, I want to clarify that JSX is what they call "syntactic sugar", that turns React methods such as React.createElement into that XML like syntax. For instance:
var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});
(from the React docs)
So, to the best of my knowledge, the JSX syntax actually belongs in the render method. If what you are really looking for is the best way to separate and reuse purely presentational code, you should read on separating your app into Container and Presentational components
https://medium.com/#learnreact/container-components-c0e67432e005#.dzjqc8yrn
https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mn9nf6lz6
Stateless/Presentational/Dumb Components are just functions that return JSX. So you could have your Template component:
import React from 'react';
//you need to import React to use JSX, as it will be expanded into React.createElement calls...
function Template(props){
return (
//...your template here...
);
}
And then your class
import React, {Component} from 'react';
export default class Login extends Component {
render() {
return (<Template {...props}/>);
}
}
}
Makes sense?
I’m trying to use clipboard.js in a React component, and it causes my devserver to start failing with the Node error:
ReferenceError: Element is not defined
at Object.<anonymous> (/mnt/home/me/code/board/webapp/node_modules/matches-selector/index.js:6:13)
I initialize the clipboard in componentDidMount but am still getting this error. I actually think the error may have something to do with my import, because even when I don’t actually initialize the clipboard (but include the import) I get the error. Does anyone have an idea what I might be doing wrong?
Relevant code (styling excluded):
import React, { Component } from 'react';
import Clipboard from 'clipboard';
export default class CodeSnippet extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
new Clipboard('.copyButton', {
target: () => document.getElementById('snippet')
});
}
render() {
return (
<div style={styles.snippetCopy}>
<div id="snippet" style={styles.snippet}>
{'this text will copy'}
</div>
<button
className={"copyButton"}
id="clipper"
data-clipboard-text='snippet'
style={styles.buttonStyle}
text={'Copy code'}>
</button>
</div>
);
}
}
You can't require clipboard.js if you're doing server side rendering. It's annoying but instead of installing via npm, they suggest including the script manually like this:
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
https://github.com/zenorocha/clipboard.js/issues/157
I created a fiddle updating your code. It's a suggestion of integrating clipboardjs and React, using ref's and clipboardjs' text function.
Check here: https://jsfiddle.net/mrlew/L54ky6hj/