I was doing a course on ES6 and react. I just finished the ES6 modules and lessons my live updates were working. Hit command S on mac keyboard and the page was updated.
Now I went into terminal and installed a few react things and I am noticing that I am still connecting to my local 3000 host server with npm start. But its not live updated. I'll have for example this code and I have to close my terminal run another npm start then my code will be updated. Is this correct or am I doing something wrong? If theres any information you need I will edit in the info thank you.
import React, { Component } from 'react';
import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap';
class Global extends Component {
render() {
return (
<div>
<h2> Hi </h2>
</div>
)
}
};
export default Global;
Related
I am trying to create a React component and import it through a git URL.
My question is, how should the component be created?
How should I import it?
I didn't find much information
I've been reviewing this response
How can I import a component from GitHub repository
For example, i have this component
import React from "react";
function Title() {
return (
<div>
<h1>Sample Importing</h1>
</div>
);
}
export default Title;
To migrate it to the new git repo, should I initialize the project with CRA?
How do I give the directives to then do
npm install bitbuketurl..
import Title from '....'
I'm trying to use Material UI to use buttons in my web app using ReactJS for the frontend. I installed Material UI with the terminal command
npm install #material-ui/core
And my code looks like this:
import React from 'react';
import './Header.css';
import { Button } from '#material-ui/core';
function Header() {
return (
<div className="header">
<div className="headerRight">
<h1>Hi There</h1>
<img
className="headerIcon"
src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg"
alt=""
/>
<div className="button">
<Button>Click Me</Button>
</div>
</div>
</div>
);
}
export default Header;
and the compiler says "Compiled Successfully!" when I hit save, but when I look at the app in my browser, nothing is there at all. When I take out the button, everything else shows up, but when I put the button back in, nothing shows up, and I get a blank screen. I'm really frustrated trying to figure out why the Material UI button does not work. Please help me.
My App.js code looks like this
import './App.css';
import React from 'react';
import Header from './Header';
import Banner from './Banner';
function App() {
return (
<div className="App">
<Header/>
<Banner/>
</div>
);
}
export default App;
Issue for me was that I had installed MUI before jumping into my react ap (cd my-app), so the MUI package was in a parent "Node Modules" directory of my react app.
Deleted the parent Node Modules directory and reinstalled MUI in my react app.
After i changed App.js code.. The page show blank page with 3 error code continusly
I tried to fix it for 4 hours..
Now I can't hold on anymore..
Can you help me..?
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render(){
return (
<div className="App">
Hello, React!!
</div>
);
}
}
export default App;
I think you are running the app with live server of visual studio code. To run react app you need to run following command in the root of react app.
If you are using npm then run this command :-
npm start
If you are using yarn then run this command :-
yarn start
I'm following along to a youtube tutorial to learn the MERN stack. Currently i'm trying to import boostrap css in my App.js file. But i keep getting this error.
Error
Here is my App.js file
import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import './App.css';
import 'boostrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<div className="App">
<AppNavbar />
</div>
);
}
}
export default App;
I ran npm install --save boostrap before attempting to include it, ive also restarted the server. All to no avail. Is there a new way to include css from the node_modules folder?
If you are trying to import bootstrap into your react project. You can import the css file into your App.js like this.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
The import statement is not finding the file(s) do to the path passed in.
You have a typo, use this
import 'bootstrap/dist/css/bootstrap.min.css'
First of all, I've read the latest and greatest blog about how to fix this issue at
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html and I read this answer that almost answered my question: How to fix React 15.5.3 PropTypes deprecated warning when using create-react-app
I've installed npm install prop-types and imported it into my code--see below.
From what I understand from that last link, even though I'm not using any props, my other libraries may be--which I think Fabric UI does when I'm trying to create this button component.
Here's my code:
import React from 'react';
var PropTypes = require('prop-types')
import { PrimaryButton, IButtonProps} from 'office-ui-fabric-react/lib/Button';
class GetAllEmployeesButton extends React.Component<IButtonProps, {}> {
render() {
return(
<div>
{/*this bring up an error :-( */}
<div>{this.props.text}</div>
<h1> this is redering ok </h1>
<PrimaryButton
text='Click Me'
onClick={ () => alert('Clicked') }
/>
</div>
)
}
}
GetAllEmployeesButton.propTypes = {
text: PropTypes.string.isRequired,
}
export default GetAllEmployeesButton;
Still can't figure how to fix this issue. I'm sure there is something basic I am misunderstanding. Thank you in advance.