Download to read offline
Uploaded byJainul Musani
React js t4 - components
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.
React js t4 - components
- 1. ReactJs : Tutorial-04-Componentsin 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-Componentsin 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-Componentsin ReactJs