Components
- Components in react js are basically a set of code that renders UI, adds functionality to UI & manages changes in DOM.
- In react js components lets you divide the UI into independent pieces, which are reusable. For eg, if we were building the UI of Twitter with React:
- Conceptually, components are the same as Javascript functions. They accept inputs in the form of props and then render react element in the form of UI.
There are two types of component:
- Function Component.
- Class Component.
1. Function Component
- In react js one can just create a js function to create a component.
- React recomends functional component type over class based component.
- Fucntional components returns a React element.
- One can write there HTML or JSX code inside return statement to render the UI.
- Functional components by default does not come with state management features.
- We need to use Hooks to make functional components stateful.
To create a functional component in our existing project.
- Create a folder named components inside src folder.
- Inside that create a component with the name login.jsx
- Inside login.jsx add the following code.
import './login.css'; function Login(){ return( <div class="login"> <form id="login" method="get" action="login.php"> <label><b>User Name</b></label> <input type="text" name="Uname" id="Uname" placeholder="Username" /> <br/><br/> <label><b>Password </b> </label> <input type="Password" name="Pass" id="Pass" placeholder="Password" /> <br/><br/> <input type="button" name="log" id="log" value="Log In Here"/> <br/><br/> <input type="checkbox" id="check"/> <span>Remember me</span> <br/><br/> Forgot <a href="#">Password</a> </form> </div> ); } export default Login; - Inside login.css add the following code.
body { margin: 0; padding: 0; background-color:#6abadeba; font-family: 'Arial'; } .login{ width: 382px; overflow: hidden; margin: auto; margin: 200 0 0 450px; padding: 80px; background: #23463f; border-radius: 15px ; } h2{ text-align: center; color: #277582; padding: 20px; } label{ color: #08ffd1; font-size: 17px; } #Uname{ width: 300px; height: 30px; border: none; border-radius: 3px; padding-left: 8px; } #Pass{ width: 300px; height: 30px; border: none; border-radius: 3px; padding-left: 8px; } #log{ width: 300px; height: 30px; border: none; border-radius: 17px; padding-left: 7px; color: blue; } span{ color: white; font-size: 17px; } a{ float: right; background-color: grey; } - Import the functional component inside App.jsx like this.
import './App.css'; import Login from './components/login' function App() { return ( <Login /> ); } export default App;
In the above example we have created a simple login form inside login.jsx, and then imported it inside App.jsx. The function Login is the main function inside which the whole component is defined. React elements are defined inside return statement, which includes the whole html code.
Also to add styling we have imported the login.css file at the top. This includes all the colours and styling used for designing login form.
The final output after this will look something like this.
You Can Find the full code here - ReactJs/functionalcomponent at main · codersdaily/ReactJs (github.com)
2. Class Components
To convert a function to a Class we need to follow these steps.
- Create an ES6 class, with the same name, use Extends React.Components.
- Add a single empty method to it called render().
- Move the body of the function into the render() method.
- Replace props with this.props in the render() body.
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
