Using Intellij to create React app - reactjs

I'm using Intellij IDEA Ultimate 2017
I'm creating a React app.
I have the javascript language version set to React JSX in Preferences > Languages & Frameworks.
I have restarted Intellij
I'm still getting an error 'Expecting new line or semi colon' when using 'let' in Javascript files.
How do I fix this
I'm getting the error after the let
import React, { Component } from 'react';
class Projects extends Component {
let projectItems;
}
render(); {
console.log(this.props);
return (
<div className="Projects">
My Projects
</div>
);
}
export default Projects;

Related

Uncaught ReferenceError: require is not defined react-rails

I'm trying to integrate react-rails 2.6.1 within my rails 4.2.11 app.
initially started with webpacker but it's giving me troubles with the actual prod deployment, so I removed webpacker and just pack stuff with sprockets 3.7.2.
The page is loaded properly but the react_component is not shown.
in the html source it's just rendered as a div:
<div data-react-class="Sidebar" data-react-props="..." data-react-cache-id="Sidebar-0"></div>
but nothing is shown.
in the console I can see:
Uncaught ReferenceError: require is not defined
which causes later on:
Cannot find component: 'Sidebar'. Make sure your component is available to render.
this is the definition of my react component:
import React from "react"
class Sidebar extends React.Component {
render() {
return (<p> hello from react </p> );
}
}
I've tried moving imports from application.js up and down, (according to https://github.com/reactjs/react-rails/wiki/Troubleshooting) to no help.
Try to export your component to be able to import it
import React from "react"
class Sidebar extends React.Component {
render() {
return (<p> hello from react </p> );
}
}
export default Sidebar;

TypeError: react__WEBPACK_IMPORTED_MODULE_6___default.a.lazy is not a function for react#16.5.2

I'm trying to use lazy loading for my create-react-app with react#16.5.2 and I did this :
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = React.lazy(() => import('./_header'));
class SomeFile extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<Header />
</React.Fragment>
</BrowserRouter>
);
}
}
export default SomeFile;
Do you know why this error occurs ? is it because of my react version ? based on this everything seems fine!
Edit
What does this mean? based on reactjs.org :
Note:
React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.
React.lazy is only available from v16.6.0 https://reactjs.org/blog/2018/10/23/react-v-16-6.html
In your comand line interface, try updating React using the following command:
npm i react#latest
Restart Development Server, if you still face issue try the above steps:
Search for REACT_EDITOR on the Readme.md file, and insert =atom in front of it, like as follow:
REACT_EDITOR=atom
Then, save, restart the development server. It should work now

"TypeError: rootElement.insertBefore is not a function" getting started with React-Handsontable

Just getting started with Handsontable. I used create-react-app and npm install --save react-handsontable.
Added a table to App.js:
import React, { Component } from 'react';
import HotTable from 'handsontable'
class App extends Component {
render() {
return (
<HotTable/>
);
}
}
export default App;
And seeing error:
TypeError: rootElement.insertBefore is not a function
node_modules/handsontable/dist/handsontable.js:8197
rootElement.insertBefore(this.container, rootElement.firstChild);
From searching the web it seems this may have something to do with load order issues, but I'm not sure what I can change.
Solution: I was importing handsontable but I should have imported react-handsontable.
import HotTable from 'react-handsontable'
This is documented correctly but I did not notice that detail.
https://github.com/handsontable/react-handsontable

Cant import/export React components in visual studio

I'm trying something that I thought would be very basic but for some reason its just not working at all!
I'm simply trying to create 2 simple react components in 2 different jsx files and import one of them to the parent file and then use and render the child component in the parent one.
I have created a simple mvc site that simply goes to the index page that imports the selected jsx file which the first component is in. Reactjs is installed via nuget package manager. I'm still learning reactjs so I'm probably doing something glaringly wrong for this to not work.
I have tried using requires and es6 import/export but neither seem to work for me.
specifically using the import/export methods throws a syntax error even though I have both node.js and typescript installed in visual studio!
Any help would be great.
Please see code below:
Component1.jsx:
import Component2 from "./Component2.jsx"
class Component1 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>hello</div>
</div>
);
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('test')
);
Component2.jsx:
class Component2 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>test</div>
);
}
}
export default Component2;

Unknown named module: 'react/lib/NativeMethodsMixin'

I create a new React Native project and install #shoutem/ui in project and include the Examples component of Shoutem UI into React Native app.
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '#shoutem/ui';
class HelloWorld extends Component {
render() {
return (
<Examples />
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
But when I run start the project , I get "Unknown named module: 'react/lib/NativeMethodsMixin'" error.
The bug seems to be inside the #shoutem/animation module, in the Parallax.js file: https://github.com/shoutem/animation/blob/develop/Parallax.js
NativeMethodsMixin is not imported correctly from react:
If you change this:
import NativeMethodsMixin from 'react/lib/NativeMethodsMixin';
to this: import NativeMethodsMixin from 'react';
your app should work.
I would either file a Github issue on the #shoutem/animation project or check if the way NativeMethodsMixin is imported is specific to an older version of react and then use that version in your app.
I hope this helps.
This is fixed as of v0.8.9 release of #shoutem/animation.

Resources