10 Important Methods About React

1. What Is React ?

2. Virtual DOM

3. JSX in React

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
<div>
<h1>Hello World.</h1>
</div>
);
ReactDOM.render(myelement, document.getElementById('root'));

4. Components

const Greeting = () => <h1>Say Hello</h1>;
class Greeting extends React.Component {
render(){
return <h1>Say Hello</h1>;
}
}

5. State

class Greeting extends React.Component {
state = {
name: 'Nisar'
}
}
render() {
return <h1>Hello, my name is { this.state.name }</h1>;
}
}

6. Props

import React from 'react';

class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App
headerProp = "Header from props..."
contentProp = "Content from props..."/>,
document.getElementById('app'));

export default App;

7. Events

const CurrencySwitcher = props => {
return (
<button onClick={props.handleChangeCurrency}>
Current currency is {props.currency}. Change it!
</button>
)
}

8. Event Handlers

import React from 'react';function App() {function handleClick() {console.log('Button click ...');}return (<div><button type="button" onClick={handleClick}>Event Handler</button></div>);}

9. Conditional Rendaring

const users = [{ id: '1', firstName: 'Tanshin', lastName: 'Ahmad' },{ id: '2', firstName: 'Rafsan', lastName: 'Rana' },];function App() {return (<div><h1>Hello Conditional Rendering</h1><List list={users} /></div>);}function List({ list }) {if (!list) {return null;}return (<ul>{list.map(item => (<Item key={item.id} item={item} />))}</ul>);
}
function Item({ item }) {return (<li>{item.firstName} {item.lastName}</li>);
}

10. Form in React

import React from 'react';
import './App.css';

function App() {
const handleSubmit = event => {
event.preventDefault();
alert('You have submitted the form.')
}

return(
<div className="wrapper">
<form onSubmit={handleSubmit}>
<fieldset>
<label>
<p>Name</p>
<input name="name" />
</label>
</fieldset>
<button type="submit">Submit</button>
</form>
</div>
)
}

export default App;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store