React(under construction)

 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,
};