I am trying to learn React. The tutorial that I am following says that I need to import react using the following:
import React from "react"
import ReactDOM from "react-dom"
I am working in Visual Studio and I cannot get that to work (however, it does not throw any errors). The Visual Studio React tutorial here told me to add the following to include React:
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
This works and my "Hello World!" is rendered. What I'd like to understand, is why the "import React" code does not work and what is the difference between the two. I'm not sure what other info someone would need to answer/explain my question, but I can provide more info if needed.
Any assistance is greatly appreciated.
import statements are not supported natively yet in javascript. Have a look at this thread where the answer is basically also answering what you are looking for.
If you don't want to bother about learning more about webpack/babel for now (I would highly recommend to skip this first and just focus on react), have a look at create-react-app which handles all configuration for you. Also, there is a ton on material and tutorials regarding learning react with create-react-app.
Related
I'm currently working on an application using preact, tailwindcss and vite. Unfortunately, importing svgs seems to be a bit problematic.
There is a separate repository that only contains the svg resources.
My original plan was to just import them as components as I was used to do it in classic react with webpack applications using SVGR and the following syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
This won't work for (at least) two reasons. One being preact the other one being the lack of SVGR.
I then proceeded to give vite-plugin-svgr a try by importing it in my vite.config.js.
plugins: [svgr({ svgrOptions: { jsxRuntime: 'classic-preact' } }), preact(), tsconfigPaths()],
It kinda works using the following import syntax:
import Search from 'assets/icons/search-lg.svg?component';
Unfortunately this raises the following error which I couldn't manage to work around besides ignoring it which is not really an option:
TS2307: Cannot find module 'assets/icons/search-lg.svg?component' or its corresponding type declarations
The alternate plan would now be to create a wrapper component that just imports the svg from the given path and create a component from it myself. This would also simplify styling it with tailwind.
Unfortunately I fail to import the file in a way I can wrap it with <svg> tags. Using <img> is not really an option because I need to be able to manipulate the svg.
So, does anybody have an idea how to either
correctly use the component import in my setup
create a preact component that imports an svg from a file and still is customizable
Thanks in advance!
I finally got it to work by using vite-plugin-svgr. In the end adding /// <reference types="vite-plugin-svgr/client" /> to vite-env.d.ts made the compiler happy.
I can now use the good 'ol syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
Thanks to #user-28 for pointing me in the right direction!
Maybe this question has already been asked, but I wasn't able to find anything regarding the matter.
I'm currently trying to build a simple website using firebase in combination with React. I'm using vscode as my IDE. While the process of building the site itself is going quite well, I'm still having some issues getting used to vscode's code suggestions.
'use strict';
import ReactDOM from 'react-dom';
let element = <h1>Hello world test</h1>;
ReactDOM.render(
element,
document.querySelector('#root')
);
In my file app.jsx I'm calling the method ReactDOM.render(...). Here is where my issue comes into play. When I specifically import the class ReactDOM (import ReactDOM from 'react-dom';), my code suggestions work as expected. All available methods with their arguments are suggested, etc. Unfortunatly though, my browser does not like those import statements and throws an error. I am aware that I can use tools like webpack or browserify to solve this issue, but since the ReactDOM-class is available without the import anyways, I don't really see the imminent need to use those tools.
I was just wondering whether I could configrue vscode to just suggest these classes and their methods without explicitly importing them. Thanks for the help!
(In case this was unclear, here's what I want to happen, but without importing ReactDOM:
I am using a boilerplate Ignite Bowser and I am trying to add Knob Addon to storybook, but so far I cant make it to work.
On the story, I added a decorator like the following code:
storiesOf("Button", module)
.addDecorator(fn => {fn()})
.addDecorator(withKnobs)
However, when trying to add: "#storybook/addon-knobs/register" Im failing at it.
Some help would be nice.
Thanks
Project Overview
When running on React Native you need to install knobs from the on-device
Create a file named ./rn-addons.ts
Add the following import on the file:
import '#storybook/addon-ondevice-knobs/register'
Then in your file storybook.ts, you import that rn-addons:
import './rn-addons'
I'm trying to find a client-side computer-vision library that plays nicely with React. I've tried tracking.js and js-objectdetect but I can't import them into a standard React component without major efforts that are beyond my skills.
The problem with both these awesome libraries is that they are written as IIFE with no export statements e.g.
(function(){...})()
They are supposed to be imported as <script src = 'etc'> so I can't seem to just import them as normal and follow the API without getting
TypeError: foo.bah is not a constructor
I tried adding my own export statements but a can of worms exploded out of it!
Can anyone suggest a better approach?
If you are using webpack you can try exports-loader to allow you using import syntax.
Here is some more info.
Here is a working implementation of tracking.js with React (using create-react-app)
https://github.com/howardkitto/react-tracking
The solution was provided by https://github.com/gaearon, here... https://github.com/facebookincubator/create-react-app/issues/2958
I work at a company with a large react code base... not all of it is to react standards, and not all of it adheres to it's own standards (im thinking this is pretty standard haha).
I see react being brought into components differently throughout. Here's two examples - marked with (1) and (2):
(1) let React = require('react');
(2) import React, {Component, PropTypes} from 'react';
What is the difference and why use one versus the other? It's not only the react being brought in. I also see import {Component, PropTypes} from 'react'; and let {Component} = React;.
I did a brief search on them internets and couldnt find what i was looking for. maybe my search terms are off a bit. Id be happy with brief explanation and hopefully documentation to go with it. Thank you.
The difference between the two is that
1) let React = require('react');
is ES5 syntax, whereas
2) import React, {Component, PropTypes} from 'react';
is ES6 syntax
However no Javascript engine as yet supporst ES6 and hence some utility tools like babel behind the scenes convert the ES6 definition to the ES5 syntax of require which #azium says is the Node commonJS syntax for importing modules only.
1) is syntax of ECMAScript 5 (ES5) published in 2009
2) is syntax of ECMAScript 6 (ES6) also known as ECMAScript 2015
(ES2015) published in 2015
(1) let React = require('react');
(2) import React, {Component, PropTypes} from 'react';