Develop Reference

Problem when importing from another folder in React Typescript

I have the following folder structure
I want to import both MessageList.tsx and MessageSent.tsx inside my Chat.tsx
// Chat.tsx
import React from 'react'
import {MessageList, MessageSent} from "./components/"
type Props = {}
const Chat= (props: Props) =\> {
return (
<div\>Chat</div>
)
}
export default Chat`
// MessageSent.tsx
import React from 'react'
type Props = {}
const MessageList = (props: Props) => {
return (
<div>MessageList</div>
)
}
export default MessageList
MessageList.tsx is similar to MessageSent,tsx, only the name of the components is different
However, when I try to do the import of these two components {MessageList, MessageSent} I get the following error:
** Cannot find module './components/' or its corresponding type declarations.**
Why is that?
Tried different paths besides "./components/", even with full path.

You can either import the components one by one
import MessageSent from "./components/MessageSent"
import MessageList from "./components/MessageList"
or create an index directory file (index.ts)
import MessageSent from './MessageSent'
import MessageList from './MessageList'
export { MessageSent, MessageList }

To be able to import from components you need index.ts file in components folder.
// index.ts
export * from './MessageList';
export * from './MessageSent';

Add a new file named index.ts inside your components folder
Then write this in the index.ts
export * from './MessageList.tsx';
export * from './MessageSent.tsx';

How to use CSS Global Variables?

first of all thank you so much for your time.
My doubt is simple, but i couldn't find a way to get it working.
So... basically i have a '/pages/_app.js' file:
import '../public/styles/global.css';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
A global css file '/public/styles/global.css':
:root {
--bg-color: #000;
}
A css module file '/public/styles/header.module.css':
.header {
background-color: var(--bg-color);
}
And finally a home page '/pages/index.js'that uses the css class:
import React from 'react';
import headerStyle from '../public/styles/header.module.css';
export default function Home() {
return <div className={headerStyle.header}>Test</div>;
}
I don't get an error but i didn't manage to refer to the global variables inside the css modules.
Can you guys help me with what am i doing wrong?

If the pages/ directory exists under src/ then the path to the <Home> component should be /src/pages/ and the import for the headerStyle should be the following:
import headerStyle from "../../public/styles/header.module.css";
You just need to go up one more directory.
/*
* #filename /src/pages/index.jsx
*/
import React from "react";
import headerStyle from "../../public/styles/header.module.css";
const Home = () => {
return <div className={headerStyle.header}>Test</div>;
};
export default Home;
Here is a CodeSandbox snippet to demonstrate.

how to execute a .js file containing multiple functions, via react jsx

i have a pre-existing .js file which contains multiple functions ( they call each other within the file) and event listeners.
How do i execute this .js file after elements have been rendered in the .jsx ?
I have tried adding export statement to the bottom of the .js file
export const A = functionOne();
export const B = functionTwo();
and adding import
import {A} from './index'
in the .jsx file
but it still gives react error that functions are not defined.
I know the file with the functions works perfectly because previously it was being used in a basic html / .js combination to render the page elements.By using at the bottom of the html

Use exports.funcName. I have called them in useEffect hook
CodeSandBox Link
App.js
import React, { useEffect } from "react";
import "./styles.css";
import { funA, funB } from "./functions";
export default function App() {
useEffect(() => {
funA();
funB();
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
</div>
);
}
Functions.js
exports.funA = () => {
console.log("This is from Function A");
};
exports.funB = () => {
console.log("This is from Function B");
};

How to import image present in other folder in react native?

The project structure of my app is:-
root
|-assets
|-icons
|-heart.png
|-components
|-basic
|-like.js
What i'm trying to achieve is to import image heart.png into like.js which contains following code:-
import React,{ Component } from 'react';
import{ View, Text, AppRegistry } from 'react-native';
class Example extends Component {
render ()
{
return(
<Image src= {require('./assets/icons/heart.png')} />
);
}}
export default Example;
It produces following error:-
ENOENT: no such file or directory, scandir 'C:\Users\gagan\sapora\android\sapora\components\basic\assets\icons'

use source instead of using src
render ()
{
return(
<Image source = {require('../assets/icons/heart.png')} />
);
}
see here https://facebook.github.io/react-native/docs/image

strange error cannot resolve <folder name> in javascript

I have below code structure,
and my src/components/App.js look like this
import React, { Component } from 'react'
import { max_number } from '../helper'
class App extends Component {
render() {
return (
<div>
</div>
)
}
}
export default App
As you can see helper folder is the same level as components, but somehow I got error of Module not found: Can't resolve '../helper' in '/Users/james/Documents/react-demo/src/components'

helper.js is a directory you need to import from '../helper.js'
preferably rename the folder to helper