DEV Community

loading...

React.js in Depth

Nazmus Sakib
Updated on ・2 min read

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';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title =
You clicked ${count} times;
});
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>
);
}
}

Discussion (0)

Forem Open with the Forem app