I am trying Reactjs for the first time, but when want to render something, it only renders it when I restart my project. If I hit save, nothing happens. Have someone met with this problem yet?
import React from 'react';
function App(){
return (
<div>
<h1>Hello React</h1>
<button>Button</button>
</div>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
If you want the app to render the latest changes you made to the source files, you have to implement hot-reloading.
Check this site for more info : https://gaearon.github.io/react-hot-loader/getstarted/
It will scan changes you do to the source files and automatically apply the changes to the running app. It will also make sure that the state of the app is not lost during this change.
Related
I have been building a project on react using vscode and when i try to start it in the browser, I keep getting the error that it cant find the file index.js, even though it is in the right folder. (Yes I have imported react and not React). I have literally paused my project for a while day because of this and its weird because i was building a smaller project earlier on the same mahine, in the same way and it worked perfectly.
But I have no idea whats going on here, I have attached the code.
I tried moving the file around, checking my lowercase, deleteing the cache memory and restarting it, deleting the node modules folder and using npm insall, etc all that stuff already on stackOverflow but nothing works.
I am just starting out with react so I'm not sure what the problem is and I've tried googling as much as I could
Navbar.js:
import React from 'react'
import logo from './images/airbnb 1.png'
export default function Navbar(){
return (
<img src={logo} width= "40px"></img>
)
}
App.js:
import React from 'react'
export default function App(){
return(
<h1>App component</h1>
)
}
index.js:
import React from 'react'
import ReactDOM from 'react-DOM'
import App from './App'
import './index.css'
ReactDOM.render(<App />, document.getElementById("root"))
import ReactDOM from 'react-dom'
you are trying to import from react-DOM that does not exist
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.
I made a simple components that number state 'a' is increased when the button is clicked.
and I wrote console.log() inside component to check when it is rendered. I expected the console.log is executed once when the button is clicked because component's state is changed.
But, I was wrong and console.log() is executed twice.
Is something wrong? or Is it correct? What i missed?
here is my code
A.jsx
import React, {useState} from 'react';
const A = () => {
const [a, setA] = useState(0);
const onClick = () => setA(a + 1);
console.log('render')
return (
<div>
<p>a : { a}</p>
<button onClick = {onClick}>button</button>
</div>
)
}
export default A;
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import A from './components/A';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<A />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
This app is created by CRA with typescript .
That's all.
Thanks.
****PLUS******
I checked React dev tools Profiler to check the component is really rendered twice when a button is clicked and state is changed. It show me result below
I think there was only one render. If the component was really rendered once, why the console.log exected twice?
I think this is because of React.StrictMode this only happens in development. If you remove React.StrictMode you will get only 1 log.
For more details, check this thread on react repo:
https://github.com/facebook/react/issues/15074
On reading further I found this on React docs as well: https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects
Hope this helps!
I've created a simple app to test what part of the document gets rerendered when I add items to an array and then use .map in react. To manage the state I use redux. To check what gets rerendered I use the react chrome addon with the option Paint flashing selected.
So I expect that when I dispatch an action from a component that modifies the store, only the components connected to that part of the store would flash green. Instead, the whole screen flashes green followed by every single component that will also flash green.
Seems like anything under <Provider /> will just update on any change inside redux store.
I've already tried PureComponent, managing shouldComponentUpdate, React.memo for the function component.
My index file looks like:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./store/reducers";
import "./index.css";
import App from "./App";
const store = createStore(reducers);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
And my App file:
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import ListComp from "./components/ListComp";
import ListFunc from "./components/ListFunc";
import ButtonMore from "./components/ButtonMore";
export class App extends Component {
shouldComponentUpdate() {
return false;
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<ButtonMore />
<ListComp />
<ListFunc />
</div>
);
}
}
export default App;
ButtonMore will add items to the store when clicked. It has the action connected so it can dispatch it.
ListComp is connected to the list of items in the store and will .map them. In this case, the main purpose was to test the key property and see if only the new items would flash green.
ListFunc Will do the same as the one above but as a function component.
I wanted to drive this test since in the project I work on we are going crazy with performance issues now that the app is huge. We are thinking of moving away from redux but I don't think this option is good at all.
I expected some green flashes just on the new items displayed. But instead the whole screen will always flash when I change anything in the store.
EDIT: Let me add the example that shows the list of items from the store. I expected this to flash only the new items but instead it flashes the whole component:
import React from "react";
import { connect } from "react-redux";
const ListFunc = props => {
return (
<ul className="ListComp">
{props.listItems.map((item, i) => {
return <li key={`itemFunc_${i}`}>{item}</li>;
})}
</ul>
);
};
const mapStateToProps = state => {
return { listItems: state.reducer };
};
export default connect(
mapStateToProps,
null
)(ListFunc);
React-Redux v6 changed the internal implementation in several ways. As part of that, the connect() wrapper components do actually re-render when an action is dispatched, even when your components don't.
For a variety of reasons, we're changing that behavior as part of v7, which is now available as a beta.
update
After looking at the code snippet you've posted: yes, I would still expect the example you've shown to cause both the list items and the list to re-render. I can't say 100% for sure because you haven't shown your reducer, but assuming that one of the list items is updated properly, state.reducer should be a new array reference as well. That will cause ListFunc to re-render.
I carefully searched the same problem that I faced but didn't find anything helpful.
webpack 1.13.1. Mac OS X El Capitan last version.
What I am trying to accomplish
I want to create a webpack build to develop multiple page apps.
I want to see the structure like this:
source
/source/page1/page1.css
/source/page1/page1.js
/source/page1/page1.html
public
/public/page1/page1.css
/public/page1/page1.js
/public/page1/page1.html
Current build
This is what I've done.
https://gist.github.com/lavezzi1/9cc0e58cd7d2b8f2470e703022a41db7
I tested it with vue.js and it works perfect. But now I want to get it works with react.js as well.
In dev move everything works just fine but when I ran task for prod build I got this error:
ERROR in ./source/pages/index.js
Module not found: Error: a dependency to an entry point is not allowed
What I did. This is my page folder:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
So what am I doing wrong? I am newbie in react.js, maybe I don't understand something.
In vue.js I just create files:
index.html
index.css
index.vue
index.js
And everything works as expected.
I really really hope you guys help me.
why don't you just indicate the js file as entry point and import the css in that entry file. For multiple js entry file you can use the code splitting feature of webpack.
https://webpack.github.io/docs/code-splitting.html
and in your webpack.config.js file you can define entry file like the following.
entry: {
lite: "./lite.js", pro: "./pro.js",
},
output: { filename: "dist/[name].js" },