We Keep Coding

VS Code insists that the component is never used, even though it has been

I have been trying to import my navBar component and use it in my App.js file, however, nothing shows up when I do that, and VS code gives me a warning that the imported component has never been used.
import './App.css';
import navBar from './components/navBar_component';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<navBar />
);
}
export default App;

Remember to import React whenever you are dealing with custom Components like navBar in that case. Secondly, react strongly recommend custom Components to start with Capital letter. Like you can name your js file anything [small letter, capital letter or numbers] but while importing that file through some variable name, your varibale name should be starting with capital letter.
import React from 'react';
import './App.css';
import NavBar from './components/navBar_component';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<NavBar />
);
}
export default App;

TL;DR - You just need to capitalize "navBar" as "NavBar"
JSX with lower-cased element names are automatically interpreted as built-in elements. e.g. "<div>", "<img>", etc. You can even create custom HTML elements with any name and use them in JSX, through the use of web components. To tell React that you wish to use a custom React element from your surrounding scope, you must make that element name start with a capital letter, this is how React distinguishes your React elements from built-in ones.
See this link for React's documentation about why React element names must be capitalized.

`npm init react-app` leads to `'React' is not defined no-undef` when changing function component to class component

I used npm init react-app appname which creates, among other files, App.js. In that file is a function component:
function App() {
return (
<SomeJSX />
);
}
I edited the function component into a class component, like so:
class App extends React.Component{
render() {
return (
<TheSameJSX />
);
}
}
Now, when I run npm start, I get an error:
Failed to compile
src/App.js
Line 4:19: 'React' is not defined no-undef
Search for the keywords to learn more about each error.
I imagine I need to add some setting somewhere that will automatically include React without me needing to explicitly import it at the top of every file. How do I do this? And why does this npm package not do that by default? I know a bit about javascript (and html and css), and have read a bit about React, but I am completely unaware of how npm or webpack works.
Thanks in advance!
EDIT: To clarify, I know how to import stuff with javascript. I can easily add import React from 'react'; to the file and make it work. However, I find it difficult to believe that adding an import statement to every single javascript file is the recommended method, and I don't understand why this example app wouldn't be set up so as to avoid having to do that. Am I mistaken? Do I really need to manually import the same thing over and over again within the same project? Could I set a global variable to React so that I can use it from wherever?

In your default function component you're not extending any classes and just writing a simple function
function App() {
return (
<SomeJSX />
);
}
In class component, you're in fact extending the Class Component by React.Component provided by React default export object and hence you must import it from the package
//only use one of these
import * as React from "react";
import {Component} from "react"; // you can directly extend without writing `React.` with this import
import React from "react"
So your code would be
import React from "react";
class App extends React.Component{
render() {
return (
<TheSameJSX />
);
}
}
Any of the above imports should be fine with a preference to the first and second one.

React adding FloatingMenuButton Package Parsing error: Unexpected token

I am new to React and trying to add the Floating Menu Button from this Package.
Adding this I get following Error.
Parsing error: Unexpected token
I have uploaded the Code.
https://codesandbox.io/s/adding-floatingmenu-2tfxe?file=/src/App.js
I also have another Question. What is the difference of adding render() {} infront of return() or just leaving return()?
Update
I have Updated my Code inside codesandbox, there i do not receive an Error, after I copied it into VSCode i receive following error.

You can use react hooks only in functional components. If you use class components you not allowed to use hooks.
But what is a Hook?
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.
Second question the same situation, render() uses in class components, in functional components you just use return(<></>)
Please read hooks owerview:
https://reactjs.org/docs/hooks-overview.html

If you want to initialize the isOpen state as false, here's a minimal example of that
import React, { Component } from "react";
import {
FloatingMenu,
MainButton,
ChildButton,
} from "react-floating-button-menu";
export default class Login extends Component {
constructor(props) {
super(props)
this.state = {
isOpen: false
}
}
render() {
return (
<FloatingMenu
slideSpeed={500}
direction="up"
spacing={8}
isOpen={this.state.isOpen}
>
<MainButton
backgroundColor="black"
onClick={() => this.setState({ open: !this.state.isOpen })}
size={56}
/>
</FloatingMenu>
);
}
};
Make sure you import Component from 'react' at the top. Render method is required when you're making a React component using a class method which you are using. It's a type of lifecycle method which is invoked when the component needs to update. The return statement only returns the data/JSX elements wherever it is being used.
If you are using functional components, you don't need a render method since they return the react elements themselves

Meteorjs + React, how to render several elements in Meteor.startup

I am trying to declare two different React elements that I would like to render. The both elements are separated elements such as displayed elements (App.jsx) and the customized account system (Login.jsx). But in my test I have the same code in the both jsx file to ensure that the issue is not related to a specific part of them.
I have also created an /imports/startup/client/index.js file (called in the /client/main.js file):
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import './accounts-config.js';
import App from '/imports/ui/App.jsx';
import Login from '/imports/ui/Login.jsx';
Meteor.startup(() => {
render(<App />, document.getElementById('app'));
render(<Login />, document.getElementById('login'));
})
and the /client/main.html contains the related div tags:
...
<div id="app"></div>
<div id="login"></div>
...
The issue is that the second render is never displayed (here, the div login) and I observe that only the first render is interpreted.
All the examples that I've found only deals with a single react element. So I wonder how to use several separated react elements like it is in my html file ?
I am newbie in the meteorjs and react world , so maybe I didn't get the right philosophy...

You can make use of React 16 new feature that is portal.
For how to use ReactDOM.createPortal please refer to following link:
How to use ReactDOM.createPortal() in React 16?

I have solved my issue using only one render in the Meteor.startup(() (in my index.js).
The React doc specifies that only one render can be declared in the Meteor.startup(() (in my index.js).
https://reactjs.org/docs/components-and-props.html
My code is the following:
in my index.js
Meteor.startup(() => {
render(<App />, document.getElementById('app'));
})
The trick is that this Super component (App.jsx) has to be used to call all the other components. In my example by calling the Login component:
render() {
return (
<div className="container">
<Login />
</div>
)
}

I believe because the render() statement has an implicit return statement as well, so since it can only execute and return one, the next render statement isn't executed.

React Components - Where to store HTML Templates

Complete newbie to React and trying to find out how to load the HTML for components rather than inserting it directly in the render method. For example
import React, {Component} from 'react';
export default class Login extends Component {
render() {
return (
<!-- how can I provide a link to the HTML template for here? -->
);
}
}

React does not have HTML. The JSX that you write in the render method is actually compiled into JavaScript. At the core, React components are all JavaScript. The styles are also inline. Componentisation is neat in React because HTML, CSS, JavaScript (interactions) are all in one place, as JavaScript.
To insert raw HTML, React has an attribute dangerouslySetInnerHTML.
<div dangerouslySetInnerHTML={createMarkup()} />

If you want some type of organization, you can use variables to set the html and then assign that to the render functionalty, but React does not use html templates
var hello = React.createClass({
render: yourVariable
});

I think you might be confused about how JSX works.Just in case, I want to clarify that JSX is what they call "syntactic sugar", that turns React methods such as React.createElement into that XML like syntax. For instance:
var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});
(from the React docs)
So, to the best of my knowledge, the JSX syntax actually belongs in the render method. If what you are really looking for is the best way to separate and reuse purely presentational code, you should read on separating your app into Container and Presentational components
https://medium.com/#learnreact/container-components-c0e67432e005#.dzjqc8yrn
https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mn9nf6lz6
Stateless/Presentational/Dumb Components are just functions that return JSX. So you could have your Template component:
import React from 'react';
//you need to import React to use JSX, as it will be expanded into React.createElement calls...
function Template(props){
return (
//...your template here...
);
}
And then your class
import React, {Component} from 'react';
export default class Login extends Component {
render() {
return (<Template {...props}/>);
}
}
}
Makes sense?