I am very new to react.js, I want to use react js to prepare a line chart without using other js file.
Is it possible to create one with only react.js?
Examples shown in the internet has D3 components, chart.js and so on. I am not sure if these are sub products of react.js. I would want to avoid other js files as much as possible and go with react.js only.
D3 and such have nothing to do with React. D3 can be used with it, although not completely (no animations, for instance) because in React you cannot mutate the DOM without changing a prop or a state. If something changes in your page without React knowing it, you will get an error looking like "Invariant violation: DOM mutated unexpectedly". The way you would work with D3 in React is to consider SVG elements as components just like all others you use in your app.
You don't need any D3 to do that actually: just use SVG elements such as <svg>, <line>, etc. as if they were usual components, to draw whatever you want in a div. Refer to the SVG docs.
For a line chart it is definitely doable. If you want a complex graph - or a pretty one - then why not use an external library ? The weight of the js file you import can end up comparing with the weight of your own js code, except there will be a thousand times less bugs.
Related
I am trying to get this layout using tailwind css and also render elements in this order with vue or react
This layout is called "masonry". I recommend that you check how to do that one in CSS (or with some vanilla JS/package), it's not specific to React nor Vue per-se.
As of how to implement it exactly, SO is not a coding platform so I recommend that you Google that for further progress.
I have created one search component using stencil and I'm integrating this stencil codebase with my react application via cdn link. I'm displaying the search component(which was created in stencil) as below in my react codebase :
<custom-search placeholder="Search"></custom-search>
The search component contains a search icon. I need to pass the text in search input field to my react code on click of this icon. How can this be achieved?
Unfortunately I haven't integrate Stencil JS component with React, but passing string data to web component should be working without too much hassle. Do you know if your React app can properly recognize your custom-search component? If not, then you might want to take a look at a link to Stencil JS official document of integrating Stencil JS component to React and make sure component get properly loaded and integrated.
If you know for sure you load the component then not sure why your placeholder is not set within your component - it is just a string after all. Maybe post the custom-search component code, as there might be issue with that (i.e. component lifecycle event you are using might not be doing what you expect to do)
Could you clarify the actual problem, please? :)
Does the component not get rendered, or are you unable to achieve communication from custom-search to the React app?
If the latter is the case, you might want to implement a Custom Event on the Stencil component, to communicate changes back to the consuming app.
As #tomokat mentioned, you should follow the official Stencil React integration docs. This is required, since React cannot handle Custom Events natively, and requires some help from the dev.
Edit: Sorry, I got confused by the first answer. Your title is quite clear, though. If you can show some example code of the component and the React integration, we could probably help in a better way.
I'm trying to create a project using this svg file: https://simplemaps.com/custom/us. I'm only able to display the svg if I use an Img tag, but I can't seem to find a way to access the groups in the svg so I can use a hover affect for each group. Is there a way to use an svg in JSX? or will I need to import some library in order to access the groups? I'm also trying to do this project without using Webpack.
What your looking for to do isn't possible, at least that way.
What you are seeing in the webpage may be an SVG, but the logic of interacting with it is controlled by a JavaScript script, not by the SVG.
Even if you manage to get the SVG file from the page, it would only be a mere snapshot of the state it was when you grabbed it.
As an alternative, here are some projects you can look into for your use case:
https://www.npmjs.com/package/react-svg-map
https://github.com/salocreative/react-interactive-map
I'm fairly new to react; just learning it. From what I understand react gives you ability to render data more dynamically. But couldn't this be achieved using flask rest api endpoints? Kind of making AJAX calls and rendering it's response dynamically?
What's the difference?
I'm currently trying to develop a full stack application. Trying to choose what I should use for frontend, typically on a normal day I tend to use pure HTML/CS/JS to accomplish most of my front-end task without having to use JS libraries such as react to render data dynamically, I want to improve my ways around handling front-end stuff hence wanted to learn more about react and how it can benefit me; before actually diving in it.
What can help is; if someone can lay it out for me; describing work scenario using reactjs and how I can be benefiting from using the js library.
Thanks.
In my opinion, React is all about how effectively you can render your dom elements.
Rendering DOM (Painting your webpage with your HTML elements) is considered to be one of the costliest operation. And if you consider using other libraries( apart from react), there is a chance that your HTML will be rendered even if it doesnt change.
Here comes the power of React. React uses the concept of Virtual DOM which helps in rendering HTML to browser only when there is a change. For example, if you have a list of items being displayed, and if one list item changed because of some action, React will trigger a change to render only that element(of course we write very minimal code for this).
So if you use React as your front end library, you can easily benefit fast rendering of HTML and stopping unnecessary rendering of your DOM
I'm a react noobie and trying to do all my element manipulation inside my components (willMount, didMount handlers, etc.) but I am sooooooo used to throwing everything into a doc ready function in a main.js file.
Having said that, what is the disadvantage of leaning on a main.js file for element manipulation?
React is a Virtual DOM and by manually editing the DOM you are skipping the most powerful feature of React.
Also, by not using the props and the states you are not really benefits from it.
If you like to gain the DOM element reference you can do it by using Refs but other then that I'll personally won't recommend that.