functional component react js code example
Example 1: create react component class
class MyComponent extends React.Component{
constructor(props){
super(props);
};
render(){
return(
<div>
<h1>
My First React Component!
</h1>
</div>
);
}
};
Example 2: functional component react
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Example 3: create functional component react
import React from 'react'; const App = () => { const greeting = 'Hello Function Component!'; return <Headline value={greeting} />;}; const Headline = ({ value }) => <h1>{value}</h1>; export default App;
Example 4: react class component
class Welcome extends React.Component {
render() {
return <h1>Bonjour, {this.props.name}</h1>;
}
}
Example 5: react function component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Example 6: class to functional component react
class MyComponent extends React.Component {
state: {
name: 'Bob'
}
render() {
return (
<p>Hello, my name is {this.state.name}</p>
);
}
}
const MyComponent = () => {
const [name, setName] = React.useState('Bob');
return (<p>Hello, my name is {name}</p>);
}