src/App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
const helloWorld = 'Welcome to the Road to learn React';
return (
<div className="App">
<h2>{helloWorld}</h2>
</div>
);
}
}
export default App;
Better development
--------------------------------------
Hot Module Replacement
In create-react-app it is already an advantage that the browser automatically refreshes the page
when you change your source code. Try it by changing the helloWorld variable in your src/App.js
file. The browser should refresh the page. But there is a better way of doing it.
Hot Module Replacement (HMR) is a tool to reload your application in the browser. The browser
doesn’t perform a page refresh. You can easily activate it in create-react-app. In your src/index.js,
your entry point to React, you have to add one little configuration
------------------------------------------------
in index.js
if (module.hot) {
module.hot.accept();
}
---------------------
render a dictionary
----------------------------------
import React, { Component } from 'react';
import './App.css';
const list = [
{
title:'react',
author:'sium',
points:3,
},
{
title:'java',
author:'sakin',
points:4,
}
]
class App extends Component {
render() {
return (
<div className="App">
{list.map(function(item) {
return (
<div>
<span>{item.author}</span>
<span>{item.points}</span>
</div>
);
})}
</div>
);
}
}
export default App;
arrow function
----------------------------
class App extends Component {
render() {
return (
<div className="App">
{list.map(item => {
return(
<div key ={item.objectId}>
<span>{item.points}</span>
</div>
);
})}
</div>
);
}
}
ES6 Object Initializer
----------------------------------
const name = 'Robin';
const user = {
name: name,
};
const name = 'Robin';
const user = {
name,
};
Comments
Post a Comment