Develop Reference

First React component: Getting error if I name component as App

I am learning React and got weird error. If I name my component as "App" then get the following error:
expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
But if I rename it to Apps then it works fine. Below is code snippet:
function App(){
return <h1> hiiii</h1>;
}
export default App;
import ReactDom from "react-dom";
import Test from './Test';
import Apps from './Apps';
import App from './App';
import './index.css';
console.log (App);
console.log(Test);
ReactDom.render(
<App />,
document.getElementById("root")
);
Even console.log(App) also shows null object.
Can anyone tell me the reason for it?

Module federation and React Context hooks

When using React useContext hooks, it currently requires an import from a component higher up in the tree to pass in the Context object. Say for example:
// index.jsx
export const MyContext = React.useContext('1')
export function MyApp(props){
return (
<MyContext.Provider value='1'>
<ChildComponent />
</MyContext.Provider>
)
}
// ChildComponent.jsx
import {MyContext} from './index';
export function ChildComponent(props){
const context = useContext(MyContext);
return (<p> {context} </p>)
}
But if the child component is federated, it will be in a separate repo on its own, and cannot import from './index'.
At the MyApp level, I can import the ChildComponent with:
const ChildComponent= React.lazy(() => import('federatedApp/ChildComponent'))
provided that within the Webpack config, the federatedApp is named as a remote, and the HTML doc includes the remote modules entry point .js. But how might I give MyContext to the remote federatedApp?
Guess answer: Would I need to separate the two components in index.jsx into two files and expose them both separately?

Getting 'React' must be in scope when using JSX

I am new to react and I tried the following code
person.js
const element = <h1>Hello world</h1>;
export default element;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
function Hello() {
return Person.element;
}
class App extends Component {
render() {
return (
<div className="App">
<Hello></Hello>
</div>
);
}
}
export default App;
But getting the below errors
work/my-app/src/person/person.js
3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope
When I changed to a simple hello word as below, then it works fine.
person.js
const element = 'hello world';
export default element;
I tried with different ways by checking different forum
importing the ReactDom
in person.js changed to module.exports=element

The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.
person.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
const element = <h1>Hello world</h1>;
export default element;

You need to import React in every file that exports a component (App in this case).

The latest React 17 Version: No need to include React in the scope
If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850

React.js with browserify imports not working

I am learning React.js and can not make my firt component to render. My project looks like this:
javascript
|
--components
| |
| ---- searchbar.jsx
|
|
--app.jsx
searchbar.jsx:
export default class SearchBar extends React.Component {
//some code
render(){
//some code
}
}
app.jsx looks like this.
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from './components/searchbar.jsx';
ReactDOM.render(
<App />
,
document.getElementById('content')
);
class App extends React.Component {
render() {
<div>
<SearchBar placeHolder='search bar text'/>
</div>
}
}
When compiled and packed there is no error. However when I run it, I am getting following error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
printWarning
warning
createElement
1../components/searchbar.jsx
When I put all code in app.jsx and use no import then everything is working as should and search bar is showing.. but I want to put components in different files. How do I do that then?

SearchBar module exports a default value, not a named export (by enclosing with curly braces braces you require a named export )
You should change import { SearchBar } to import SearchBar
Additionally, you should move the declaration of App towards the beginning of the file, it should be declared before it is used

Index.js module imports with webpack

My code is organised as follows:
where,
Resources/ActionLog/Components/Layout.js
import React from 'react';
export default class Layout extends React.Component {
render() {
return (
<p>Test</p>
);
}
}
Resources/ActionLog/Components/index.js
export * from './Layout';
Resources/ActionLog/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './Components'; // <--- ISSUE HERE.
const app = document.getElementById('app');
ReactDOM.render(
<Layout/>,
app
);
Why does Layout not get imported using this setup??
If i change the line to read,
import Layout from './Components/Layout';
it works fine, but otherwise Layout is always undefined! Even when if i try,
import Layout from './Components/index';
I am using webpack as my module bundler, and have achieved something similar before, I just don't see why/how this is different..

Why does Layout not get imported using this setup??
Layout.js has a default export. However, export * from './Layout.js will only export the named exports (of which there are none). In other words, Components/Layout.js doesn't have any exports at all, so nothing can be imported.
But even if it did have named exports, import Layout from './Components/index'; imports the default export, but Components/index.js doesn't have a default export.
There are a couple of ways this could be solved. The one that makes the most sense is probably to export the default export of Layout.js as named export in Components/index.js. You will presumably have multiple files each exporting a component. I assume Components/index.js should export a map of all these components in which case you have to use named exports.
The changes you have to make:
// in Components/index.js
export {default as Layout} from './Layout';
// in ActionLog/index.js
import {Layout} from './Components'; // use a named import