Skip to main content

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

Comments

Popular posts from this blog

Connect POSTgreSQL with Django

  First install all necessary step  $ sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib Second $ sudo su - postgres $ psql Create User name with password  $ CREATE USER user_name WITH PASSWORD ' password ';   Create New Database $ CREATE DATABASE database_name WITH OWNER user_name ; Give permission  $ GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO user_name ; Update settings.py  DATABASES = { ' default ' : { ' ENGINE ' : ' django.db.backends.postgresql_psycopg2 ' , ' NAME ' : 'database_name ' , ' USER ' : ' user_name ' , ' PASSWORD ' : ' password' , ' HOST ' : ' localhost ' , ' PORT ' : ' 5432 ' , } }  Then, python3 manage.py migrate and finally create super user python3 man age.py createsuperuser