React Component
React is basically component based javascript library. Components are different independent and reusable part of UI. Components can be expressed in two way.
Function Component:
function Welcome() {
return <h1>Hello, Reactjs</h1>;
}
Class Component:
class Welcome extends React.Component {
render() {
return <h1>Hello, Reactjs</h1>;
}
}
React State
React components has a built-in state object. Property values of a component are stored in state object. When the state object changes, the component re-renders automatically.
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
React props
In React, props are arguments that can be passed through component to component. So, any object of a component can be used in another.
class Car extends React.Component {
render() {
return <h2>I am a {this.props.brand.model}!</h2>;
}
}
class Garage extends React.Component {
render() {
const carinfo = {name: "Ford", model: "Mustang"};
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand={carinfo} />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
React Hook
If anything might be changed dynamically, then hook is used. Hook connect the change factor with UI. When change factor be changed, it's impact on UI acts automatically.
useState Hook:
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect Hook:
import React, { useState, useEffect } from 'react';
You clicked ${count} times
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title =;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
React CSS
In React, css can be applied inline or also can be applied as an object.
class MyHeader extends React.Component {
render() {
const mystyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Arial"
};
return (
<div>
<h1 style={mystyle}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}
Top comments (0)