Components in React are reusable pieces of code that help split the UI into independent, reusable pieces. Components can be defined as functions or classes. Props are properties that components receive from their parent component. Props allow passing data from parent to child components and act like function arguments for components. Components can access props values using this.props for class components or just props for function components.

1. ReactJs : Tutorial-04-Components in ReactJs
What are Components in React JS?
Components are like pure JavaScript functions that help make the code easy by splitting the
logic into reusable independent code.
Components as functions
test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
return <h1>Hello, from RTDL Tutorial
s!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';
ReactDOM.render(
Hello_comp,
document.getElementById('root')
);
Class as Component
test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return
<h1>
Hello, from RTDL Tutorials!
</h1>;
}
export default Hello;
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);

2. ReactJs : Tutorial-04-Components in ReactJs
What are Props in ReactJS?
Props are properties to be used inside a component.
They act as global object or variables which can be used inside the Component.
Props to Function Component
test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>
{props.msg}
</h1>;
}
const Hello_comp = <Hello msg="Hello,RTD
L Tutorials!"/>;
export default Hello_comp;
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';
ReactDOM.render(
Hello_comp,
document.getElementById('root')
);
Props to Class Component
test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return <h1>{this.props.msg}</h1>;
}
}
export default Hello;
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';
ReactDOM.render(
<Hello msg ="Hello, RTDL Tutorials!"
/>,
document.getElementById('root')
);

3. ReactJs : Tutorial-04-Components in ReactJs