I am new to React and want to use the jQWidgets library:
https://www.jqwidgets.com/reactjs-components-documentation/
So, using this link I setup package.json, created the folders jqwidgets-react and jqwidgets and put required .js file as given by them
https://www.jqwidgets.com/reactjs-components-documentation/documentation/create-react-app/index.htm?search=
Now when I go to my app.js file and import any file, it shows me "module not found" like this:
import JqxDateTimeInput from './jqwidgets-react/react_jqxdatetimeinput';
Failed to compile.
Error in ./src/layouts/report_definition/step_one.js Module not found:
./jqwidgets-react/react_jqxdatetimeinput in
/home/amit/identity_pp/src/layouts/report_definition
# ./src/layouts/report_definition/step_one.js 61:30-81
First we need to install the Create React App globally, so we can have it's commands available:
npm install -g create-react-app
Create a Create React App application:
create-react-app my-app
Integrating jQWidgets React Components
In the src folder add an assets folder with the jqwidgets and the jqwidgets-react folders inside of it:
Finally inside App.js file write your widget code:
import React, { Component } from 'react';
import JqxDateTimeInput from './assets/jqwidgets-react/react_jqxdatetimeinput';
class App extends Component {
render() {
return (
<div>
<h4>My First jQWidgets React Component</h4>
<JqxDateTimeInput width={200} height={30} />
</div>
);
}
}
export default App;
Related
I hope someone can tell me where I am going wrong in trying to get usable libraries
I have created a NPM project using create-react-app --format typescript, I then created the following structure:
|->tsconfig.json
|->package.json
|->config
|->tsconfig.base.json
|->tsconfig.cjs.json
|->tsconfig.esm.json
|->src
|->index.tsx
|->components
|->index.ts
|->ExampleComponent
|->ExampleComponent.component.tsx
|->ExampleComponent.stories.tsx
|->ExampleComponent.types.ts
|->index.ts
In this example the Example Component looks something like the following:
|->tscon
import React, { FC } from 'react';
// Contact specific icons
import Container from 'react-bootstrap/Container';
// Footer Properties
import { ExampleProperties } from './ExampleComponent.types';
export const ExampleComponent: FC<ExampleProperties> = ({ text }) => {
return (<Container fluid>{text}</Container>);
};
for the tsconfig files in 'config' I've lifted the Synk recommendation directly, while tsconfig.json is fairly simple like so:
{
"extends": "./configs/tsconfig.esm.json",
}
If I start the application via 'npm start' I get a website and the component correctly appears, but the issue is trying to import into another project.
I using npm link and npm link #Example/ExampleProject to bring the project in to another website and the index.tsx of that project looks like so:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ExampleComponent } from '#Example/ExampleProject';
const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element') const root = createRoot(container);
root.render(
<React.StrictMode>
<main role={"main"} >
<ExampleComponent/>
</main>
</React.StrictMode> );
But when it starts I am getting this error:
Module not found: Error: Can't resolve './ExampleComponent/index' in '/home/user/IdeaProjects/ExampleProject/dist/esm' Did you mean 'index.mjs'? BREAKING CHANGE: The request './Common/index' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.
The only thing I can think is tsc generates src/components/index.ts as a /src/component/index.js (which I rename). But ExampleComponent has .js and .mjs files within its directory
I am newbie to react js. After I setup the project folder to start coding I deleted the src folder and recreated it. Inside the src I created index.js and import all react libraries. But I am not seeing my hello world rendered on the localhost:3000 page. What could be the reason?
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Index extends Component {
render(){
return(
<div><h1>hello world</h1></div>
)
}
}
ReactDOM.render(<Index />, document.getElementById('root'));
Delete your project folder
You then reinitiate npx create-react-app appname since you've not codded any logic yet, you've probably deleted a needed dependency file
When cleaning the hello world, don't delete the whole src folder. Just delete the files in the src folder except for the app.js and index.js
I've built a reusable react component through nwb new react-component fade-preloader called FadePreloader which uses styled-components, its published on npm so I can use it on other projects, but when its imported as a module its styles are never added to the DOM. The following provides more details about the nwb component.
src folder is:
src/
FadePreloader.js
FadePreloader.Styled.js
index.js
FadePreloader.js:
import React, {Component} from "react"
class FadePreloader extends Component {
// logic code
}
export default FadePreloader
FadePreloader.Styled.js:
import styled from "styled-components"
import FadePreloader from "./FadePreloader"
const FadePreloader_Styled = styled(FadePreloader)`
// css here
`
export default FadePreloader_Styled
index.js:
// just import the styled-componet and re-export it
import FadePreloader from "./FadePreloader.Styled"
export default FadePreloader
I have the default configuration in package.json provided by nwb:
FadePreloader is published on npm so I added it on other project (through yarn add fade-preloader) and use it like this:
App.jsx on other project:
// lots of imports here
import FadePreloader from "fade-preloader"
class App extends Component {
render() {
return(
<div>
<FadePreloader />
</div>
)
}
}
export default App
The FadePreloader component is rendered in the DOM and its class attribute has the className generated by styled-components as espected but the stylesheet is never added to the DOM, no <style> element is present causing an unstyled FadePreloader rendered. What's wrong?
I've found a solution coming from the official spectrum channel of styled-components, see here.
What I had to do was to follow this which basically says that styled-components dependency needs to be moved from dependencies to devDependencies and peerDependencies in package.json. I'm not sure the reason but it seems to be to avoid some unexpected reason that is generated by duplicated direct dependency of styled-components.
I am trying to develop an NPM module that will provide react components. Right now, I'm just trying to set up the package and cannot get JSX in the components to be recognized in an example react project using the library.
My npm package project has one component:
import React from 'react';
class AfWin extends React.Component {
render() {
return <div></div>;
}
}
export default AfWin;
And this component is referenced in the index.js file pointed to as main in the package.json file:
import AfWin from './AfWin';
export default { AfWin };
To pack and import this package, I use a command prompt and type: npm pack. Then, I go to my example create-react-app and import the created .tgz file with npm install C:\path\to\file.tgz. This works, and I am able to get the AfWin component in my example app. However, the <div></div> or any JSX I try causes a problem at runtime:
Module parse failed: C:\path\to\project\node_modules\module-name\AfWin.js Unexpected token (6:15)
You may need an appropriate loader to handle this file type.
|
| render() {
| return <div></div>;
| }
| }
To make the problem more concrete, I published my broken module to npm: npmjs.com/package/react-affine
I am trying react based on create-react-app. I'm new to react.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
./App in import App from './App'; is not clear to me when and where is this created, is this done by babel?
file strucutre
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>myComponent</div>
)
}
}
export default App;
tl;dr
No, it is not done by Babel, instead it is done by create-react-app package.
All the files and folders in that folder are created automatically when you run,
create-react-app your-new-app-name
import App from './App'
The above line is used for importing the class you have written in the file App.js under the same directory.
Next, the difference between,
import App from './App'
and
import App from 'App'
Use the first if you want to import any user defined files and second for importing packages. As Shubham Khatri mentioned, for importing files, it is technically same if you did or did not use .js extension.
The longer version
create-react-app is a starter kit for people who are new to React or for who are lazy enough to build an app from scratch. What create-react-app does is, it will give you a minimal running React app with a solid folder structure. As given in their documentation, you can install that globally by giving,
npm install -g create-react-app
After this whenever you want to create a new app, what you want to do is,
create-react-app your-new-app-name
This will automatically generate a folder with all the files you mentioned.
Within the folder when you open the file public/index.html, you can see a line
<div id="root"> </div>
And on the src/index.js, you can find,
ReactDOM.render(
<App />,{}
document.getElementById('root')
);
If you are familiar with javascript, you may know that document.getElementById('root') is used to match any tag in HTML with ID as root. So the above snippet means that, they are rendering the <App> component of react to div with ID root. This is how React communicates with HTML page.
Rather that writing all the component codes in a single file, it is a good standard to write each components in different files. Here, App.js is a component that basically renders the text myComponent. For using this component in other files, you have to do two things.
Export the component from the file where it is defined. (export default App;)
Import the component to the file where it is used. (import App from './App')
General syntax for import is,
import className, { functionName } from 'packageName'
or
import className, { functionName } from './path-to-file/fileName'
Note: It is that ./ which tells the compiler whether to look on to node_modules folder or the path you mentioned. Use that strictly when you need to import user defined files.
Hope this helps!
When you import your Component like
import App from './App';
It will import your file App.js that is present in the same direcotry as index.js
In webpack configuration we specify which types of files babel needs to build and there if we specify .js or .jsx, it takes by default the extension of the file when we import it. we do not explicitly mention it. You can change your immport to be like
import App from './App.js';
which is technically the same.
The create-react-app npm package makes use of webpack to build your code which you can see from the package/react-scripts/package.json in the github directory