I'm trying to learn more about React.js from the ground up.
While reading the documentation I found that using ReactDOM.render(element, Document.getElementById("root")) would pass the JSX referenced by the word element to the element with id="root" in an HTML file. This shows what I mean.
When I looked through my repo created with the command npx create-next-app --example with-tailwindcss <app-name> I noticed that not only is there no ReactDOM.render() method being used anywhere in the file structure, but there is also no HTML file anywhere in the repo and all of the data seems to flow into index.js which returns the final JSX elements, but I can't find where that Home function is called as <Home /> anywhere.
Is there an HTML file hidden somewhere that I'm missing or is there some sort of more advanced level coding at play here that picks up the return from the Home function and does the ReactDom.render() functionality some other way? Maybe like in binary or with transpiling or something? I'd really appreciate some documentation that explains this in detail with examples.
This repo is powered by NextJs, so yes - there is an extra level on top of React, looking for any React component in pages/index.js to render the root, by naming conventions of framework, there are few places mentioning this in docs
Related
Well, I've read
https://medium.com/bootstart/you-should-be-using-folder-components-b30b7d165c39
article where author describes index.js as a cure and there is also comment in that article in which another person tells that it is redundant to make index.js in every component.
But! There are many repositories over github such
https://github.com/discountry/react/tree/master/src/components
https://github.com/geist-org/react/tree/master/components
https://github.com/reactjs/reactjs.org/tree/master/src/components
where they use index.js in every single component.
So, do we have to use them? Is it really necessary?
...it is redundant to make index.js in every component
Creating index.js helps in importing that component in different components/containers directly using:
import LayoutHeader from '../LayoutHeader';
instead of (without index.js):
import LayoutHeader from '../LayoutHeader/LayoutHeader';
Creating index.js in / for a single import element for an entire component feels redundant, but can be helpful when you want to have multiple elements in a single component (Not a very modular approach). Then you can use a single index file to export all the elements of the component.
Both practices are valid, and usually depends on programmer.
I've created a simple app with create-react-app. This configures webpack loaders for svg files to copy the files and put a public file into the constant. So the following code
import mysvg from "./img/my.svg";
console.log(mysvg)
prints /static/media/my.svg. That's fine.
But when editing/running the same project in codesandbox it tries to read the svg file (e.g. printing errors about ReactComponent if it's not a proper svg), and makes the handling different. Obviously, I could use the "public" folder instead, but I'd like to use the hash feature of production builds etc.
So my question is, how can I allow to use the same mechanism to get a resolving url path (e.g. valid for img src) in codesandbox and use the default create-react-app configuration?
Answer from the codesandbox team: it is a known issue tracked on their github repository.
I did some digging, and I think this is definitely a bug with codesandbox.
When we use a .png image, the string path looks like this:
path: https://uploads.codesandbox.io/uploads/user/ff71cfab-643a-41c7-8358-d13e8ce686c9/U6zD-unsplash1.png
But when we use an SVG, things fail.
Some similar issues opened on their github repo: #1664, #3825.
The maintainer said that svg-react-loader is included in CRA v2 template, and you can import them as ReactComponent, I assume this is what you were talking about initially. I think this is what caused svg files to be treated differently by codesandbox.
For now, I guess you can do this hacky workaround:
import mysvg from "!raw-loader!./img/my.svg.txt";
// inside render
<span dangerouslySetInnerHTML={{ __html: mysvg }} />
sandbox here
You would need to add raw-loader as dependency and rename the file to .txt extension so that it doesn't get handled like an .svg.
Long term, I think the best we could do is to participate in #3825 and hope that this can get fixed by codesandbox.
If you're want to use svg images,only importing them as React Components, like this,import {ReactComponent as MySvg} from './img/my.svg' usually always works. There are other ways as well but I think this one is simplest.
Check out my solution -
myVersionOfCodesandbox
I'm new to React and JS, and working with react-csv-viewer.
It works as expected and I can build and deploy it on a local server. But I do not require this, I just want to integrate the app as a component of a static HTML page.
I've tried following the process listed on the React tutorial for this, but I have trouble understanding the build process and how can I achieve this.
All I wish to achieve is to be able to use <CsvViewer /> provided by the author, possibly like this
const rootElement = document.getElementById("root");
ReactDOM.render(<CsvViewer />, rootElement);
and get the viewer app rendered at my HTML file, without building and deploying the viewer app on a (local) server.
Will appreciate any help or hints in this regard.
You can add React as it was shown in the tutorial you linked. The downside is that, you can't use JSX syntax (as it should be converted to JS during build time as it's not recognized by browsers as so).
Here is a post explaining how you can do so without transpilaton steps.
https://codepen.io/alexkrolick/post/react-without-a-build-step
Alias React.createElement, and call it to create components.
e.g.)
const h = createElement // convenient alias
// Instead of
<div className="foo" />
// create an element like so
h("div", { className: "foo" })
For more info on how that works, check out the official documentation.
https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects
But I really doubt anyone writes React code that way without a transpilation step in real life.
Would creating a separate site/page with React be a problem by chance? You can check out ParcelJS to easily create a React site if you aren't familiar with transpilation.
https://www.reddit.com/r/Clojure/comments/4el0xi/how_to_use_an_existing_reactjs_component_with/
There is this existing post about using existing ReactJS components in a CLJS/Reagent project. I'm looking to do the opposite. I have a bunch of CLJS components and would like to compile them into a ui library of some sort so that they can be used by React developers. That is, if I have a button CLJS component, I would like to be able to render that Button using < Button /> or mylib.Button(_) etc.. in a React/js app file.
I have read this - https://shadow-cljs.github.io/docs/UsersGuide.html#target-node-library - extensively but it's not quite working out. I've been using ":target :node-library" and I can get simple functions (that return strings/numbers, for example) to compile and work in my app, etc.. but it doesn't work for entire components. For example, my cljs button component takes in :
defn button [props & children]
but when I try to pass in these parameters (I call {lib.button({}, {})} in my App.js file), I get errors like "No protocol method IMap.-dissoc defined", because I'm trying to pass JS objects into CLJS-only functions, I believe. Not sure how to resolve this..
I can explain more on this if it would help clarify. It would also be super helpful if anyone had a reference demo project or any resources they could link me to.
I only have a few suggestions:
You can try to build a new sample project to consume your library with lein new figwheel myproject and use JavaScript interop to move one step at a time closer to the native JS way of using your library.
You can create an interface namespace that can consume JS objects and wrap these into Clojure data structures to sort out the protocol errors you're seeing, eg. functions that take a props parameter and pass down (js->clj props) to the rest of the code underneath.
For the authoritative source, check the Reagent docs, especially this: http://reagent-project.github.io/docs/master/InteropWithReact.html#creating-react-components-from-reagent-components
I am trying to use the rc-slider React component on a existing Rails application that is using react-rails gem and it already have some other components that were built within the application that work just fine.
Based on this blog post I've been able to follow its first 3 steps, I've found the minified and browser-ready version of it here, added the file to the suggested path and required it on the application.js as recommended but even seeing the code within the Sprockets generated application javascript file that is rendered on the browser I can't see or use the supposed global variable it would provide according to step 4.
In the component's examples page it uses a const Slider = require('rc-slider'); statement in order to get that available. I've tried that but without luck as it throws: Uncaught ReferenceError: require is not defined. The same happens when I try the README usage's section approach: import Slider, { Range } from 'rc-slider';. I've tried both from an existing JS where I load other React components and also from the browser's Dev Tools Console window.
Am I using the wrong approach to the problem or maybe missing/overseeing any concept or basics here?
If you want to use Sprockets, you can get a pre-compiled version of rc-slider from unpkg:
https://unpkg.com/rc-slider#6.0.0/dist/rc-slider.js
Taking a look at the source, I see it exports the library as rc-slider:
So you can access it as window["rc-slider"] and use it from there, for example:
var RCSlider = window["rc-slider"]
var container = document.getElementById("container")
ReactDOM.render(
<div>
<RCSlider />
<RCSlider.Range />
</div>,
container
);
jsfiddle
That way, if you put rc-slider.js in the asset pipeline, you can use RCSlider in your javascripts.