I'm trying to test that a button in a certain react component triggers a function in its parent component. I stumble upon my issue right when I import the component in my test file, so the test hasn't even run yet.
The component I import is a regular react component and is exported as:
export default connect(mapStateToProps, mapDispatchToProps)(Manager);
And in my test file I import it as:
import Manager from '../index.js';
When I run the test I get:
Target container is not a DOM element.
I know this is very little information to give but there is literally nothing else relevant as far as I can see. The component I'm testing does a bunch of things and has a render function. After a lot of reading I read that some people had a similar issue because they exported something in the same file that does ReactDOM.render. Unfortunately, this does not apply to my problem.
Any ideas?
Might have a render call somewhere in your index.js file.
You can set an additional export without connect in your Manager and then you'll be able to import it in your test file and test its behavior:
export default connect(mapStateToProps, mapDispatchToProps)(Manager);
export { Manager };
Then in your test file:
import { Manager } from 'your-path'; // now a named import without Connect
Related
Optimization in importing
--I want to discuss about optimization.
Here are 2 ways of importing components.
first case
import { Accordion, Button, Modal } from 'react-bootstrap';
second case
import Accordion from 'react-bootstrap/Accordion';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
Which is better in optimization scope? Or same?
Thanks
Currently I'm using the
first case
import { Accordion, Button, Modal } from 'react-bootstrap';
Is it correct?
Both ways of importing the Accordion component from the react-bootstrap library are valid.
The first case imports all exports from the react-bootstrap library and then specifically pulls out the Accordion component & the second case only imports the Accordion component directly.
The choice between the two would depend on the specific use case and project structure. If you only need to use the Accordion component and not any other exports from the react-bootstrap library, the second case would be more efficient. If you plan to use multiple exports from the react-bootstrap library, the first case would be more convenient.
If you not mention about something like number lines of code, performance and coding convention (rule by your team) , both of them is fine.
When you use the first one, it's also decrease number lines of code from your component. With the second one, imaging you have multiple component, maybe over 1000 component you will have 1000*n (number of library) lines of code for importing. In fact, Webpack goes through all your package and creates what it calls a dependency graph which consists of various modules which your webapp would require to function as expected. Then, depending on this graph, it creates a new package which consists of the very bare minimum number of files required, often just a single bundle.js file which can be plugged in to the html file easily and used for the application. So, your bundle size will be decreased and can improve performance of your application when deploying in production environment.
It depends on the way particular component/constant is exported.
What I mean is if you have any default export then you can import as per first example you mentioned.
All other exported members can be imported within the {}.
1 default export:
export default TestComponent {}
can be imported as
import TestComponent from './somepath/test.component';
2 export only:
export TestComponent {}
should be imported as:
import { TestComponent } from './somepath/test.component';
To add more in this answer is that if you are importing from each Component then you are actually importing the default export from that particular library.
So for each component you have to add respective import.
While in the second case you are importing from the base library and those are just exported members not default exported.
Up until now I have been using create-react-app to build React applications and components.
However, I have a project that I'm working on which was built in node using pure JS for Dom manipulation and I wanted to add react to one page only (the cart page).
All tutorials I had watched assume you are starting project from scratch and I can't seem to figure out how to add React to just a single part of my project.
Can someone point me in the right direction?
I would recommend you start here:
https://reactjs.org/docs/rendering-elements.html
The React Docs actually also point at this tutorial for a non 'create-react-app' tutorial: https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658
This is the React Docs for rendering elements. The TLDR version:
In your HTML file, where you want your React component to go, create an empty div and give it a unique name (i.e. 'app' or 'react-component')
Then create your component, etc. and have ReactDOM render on the unique id name.
To get it to render, in your node app, point it at the build path, typically bundle.js
I have got this working and managed to use React components (written in JSX) for specific parts of my custom JavaScript app (bundled via Webpack). You basically need three things.
1) Your custom JavaScript app
// MyApp.js
import { renderMyReactComponent } from "./MyReactComponent.jsx";
class MyApp {
// Call this when you want to show your React component
showMyReactComponent() {
// Create an empty div and append it to the DOM
const domElem = document.createElement("div");
domElem.classList.add("my-react-component");
document.append(domElem);
// Render your React component into the div
renderMyReactComponent(domElem);
}
}
2.) Your React component
// MyReactComponent.jsx
import React from "react";
import ReactDOM from "react-dom";
class MyReactComponent extends React.Component {
render() {
// JSX, woah!
return <h2>My React Component</h2>
}
}
// A way to render your React component into a specific DOM element
export const renderMyReactComponent = (domElem) => {
// NB: This syntax works for React 16.
// React 18 requires a slightly different syntax.
ReactDOM.render(
<MyReactComponent />,
domElem
);
}
3.) A way to parse jsx files and build the app
I use Webpack and amended my existing Webpack configuration based on this article: https://medium.com/#JedaiSaboteur/creating-a-react-app-from-scratch-f3c693b84658 (The official React documentation also points at this tutorial)
Useful Articles
A good read is this article from the official React documentation: https://reactjs.org/docs/add-react-to-a-website.html. This also explains a different way to integrate a React component into your existing JavaScript app using script tags instead of Webpack.
You might also be interested in this answer to a similar question as yours.
As #pinkwaffles pointed out in their answer, the following article helps to understand rendering a React component into a DOM element: https://reactjs.org/docs/rendering-elements.html
PS: Note that at the time of writing this answer, the above articles already use React 18 for their examples, whereas my above example still uses React 16; so the syntax regarding ReactDOM is a little different. But the idea is the same.
I have a web-app built with react. In this app I also have some pages with jQuery code from an old version. Right now this is rendered server side and i have to load the entire ejs file with jQuery and jQuery-UI code in script-tags with its own navigation menu. (Almost 1000 lines of jQuery code)
This means that I have to build another nav-menu for these jQuery pages.
I would like to render this jQuery depended code in my "content div" so I can still use the react menu which uses react router. I would like to render it like a component. But I don't know if this is the best solution.
I have read many examples of how this could be done, but I don't know which of them to go for and I have been strugling to make them work
Like shown in this example: Adding script tag to React/JSX This example adds script tags in componentWillMount
Or with import and require like this example: How to add script tag in React/JSX file?
I couldn't make these solutions work without installing jQuery through npm.
I have not yet installed jQuery through npm because I know this will affect my bundle size for the rest of the application and I am only using jQuery for a couple of my pages. The user don't really need to load jQuery for the rest of the app
What do you recommend in a situation like this? What is the best solution for performance and user experience?
Take a look at react-async-component. Your component might look something like:
// SomethingWithJquery.js
import React, {Component} from 'react'
import $ from 'jquery'
class SomethingWithJquery extends Component {
constructor(props) {
super(props)
}
render() {
// ... as much jquery mess as you need
}
}
export default SomethingWithJquery
And wrapper in separate file:
// SomethingWithJquery.async.js
import { asyncComponent } from 'react-async-component';
export default asyncComponent({
resolve: () => System.import('./SomethingWithJquery')
});
Than you can use it as regular react component, react-async-component will load entire component in separate .js file on purpose under the hood.
So I followed this tutorial to understand the react syntax using it on Ruby on Rails and got it pretty well, just javascript, then I tried to implement webpack from this other tutorial but the thing I noticed is that, the .jsx components has a very different syntax, also I tried to copy-paste my components from the first tutorial and doesn't work, React.createClass is no longer and now I don't know how to nest .jsx like in the first tutorial, I don't know if it is a different kind of React or where can I find examples
The JSX syntax can be a little confusing at first, but it'll become second nature soon enough. Let's say you have the react component List:
import React from "react";
import ReactDOM from "react-dom";
import Item from "./item";
export default class List extends React.Component {
render(props) {
return <ol>{props.list.map( item => <Item item={item}> )}</ol>
}
}
Notice the line that imports Item. Once you've imported your component like that, you render it exactly like you would a normal HTML element. Does this answer your question?
so i have that big project and everything is on pure javascript like Class.create...prototype and functions that render every component on that page and in render with react.I mean when i type function.createElement("div") somehow it create react div.. and so on and everything is on PURE javascript .. so my question is how can i create file with normal react components and and call that react component from that js file? Thank you
From what I understand from your question is that you need to reuse the react component. For that you need to do two things
Export you react component.You can do it as
module.exports = App;
if your react component is like var App = React.createClass()
Secondly in your other react component where you want to reuse this component you can import it as
import {App} from './path/to/resuable/component';
Now use this component in the render() {} function as <App/>