Welcome to CodeCrew Infotech
Part - 2 Getting Started with React.js || Building Our First React-app
9. How to styling the component?
React, there are several ways to style components. Here are the common approaches:
1. Inline Styles: Define styles directly within the JSX using the style attribute.
Example:
|
import React from "react"; const MyComponent = () => { const myStyle = { color: 'blue', fontSize: '18px', border: '1px solid gray', padding: '10px' }; return <div style={myStyle}>Styled Component </div>; }; |
2. CSS Classes: Define a separate CSS file with styles and apply classes to your components.
Step 1 : Importing the Css file
|
// MyComponent.jsx import React from 'react' import './MyComponent.css'; const MyComponent = () => { return <div className = "styled-component">Styled Component </div>; }; |
Step 2 : The Css file which have the css
|
/*MyComponent.css */ .styled-component{ color:blue; font-size:18px; border:1px solid gray; padding:10px; } |
3. CSS-in-JS Libraries: Use Css-in-JS libraries like styled Components or Emotion.
1. Install styled-components using npm.
npm install styled-components
2. Import the styled object from styled-components. You can get the idea from the above example:
|
//Using Styled Components import styled from 'styled-components'; const StyledDiv = styled.div; color:blue; font-size:18px; border:1px solid gray; padding:10px; const MyComponent = () => { return <StyledDiv>Styled Component</StyledDvi>; }; |
10. What is event handling in React?
Event handling in React refers to the process of capturing and responding to user interactions, such as clicks, keyboard inputs, or mouse movements, within a React application. React provides a consistent and declarative way to handle events, allowing developers to create interactive user interfaces efficiently.
Here's an explanation along with an example:
Explanation:
In React, event handling involves attaching event listeners to specific elements in the JSX code and specifying the behavior to execute when the event occurs. React's synthetic event system normalizes browser events and provides a unified interface for handling events across different browsers.
Example:
Let's create a simple React component that handles a button click event:
|
import React from 'react'; class ButtonClickExample extends React.Component { // Define a method to handle the button click event handleClick = () => { // Display an alert when the button is clicked alert('Button clicked!'); }; render() { return ( // Render a button element with an onclick event listener <button onClick={this.handleClick}> Click Me </button> ); } } export default ButtonClickExample; |
In this code:
We import the React library at the beginning.
We define a class component called ButtonClickExample that extends React.Component.
Inside the class component, we define a method called handleClick. This method is triggered when the button is clicked and displays an alert message.
In the render method, we return JSX code representing a button element. We attach an onClick event listener to this button, specifying that the handleClick method should be called when the button is clicked.
Finally, we export the ButtonClickExample component so that it can be used elsewhere in our application.
Functional component example:
|
import React from 'react'; // Define a functional component called ButtonClickExample const ButtonClickExample = () => { // Define a function to handle the button click event const handleClick = () => { // Display an alert when the button is clicked alert('Button clicked!'); }; return ( // Render a button element with an onclick event listener <button onClick={handleClick}> Click Me </button> ); } export default ButtonClickExample; |
11. What is conditional rendering in React, and how is it achieved? Provide examples of conditional rendering techniques in React.
Conditional rendering in React refers to the ability to display different UI components or content based on certain conditions. This allows developers to create dynamic and interactive user interfaces that adapt to various scenarios.
Example 1: Using if-else Statements
|
import React from 'react'; const ConditionalRenderingExample = ({ isLoggedIn }) => { if (isLoggedIn) { return <h1>Welcome, User!</h1>; } else { return <h1>Please log in to continue.</h1>; } }; export default ConditionalRenderingExample; |
Example 2: Using Ternary Operator
|
import React from 'react'; const ConditionalRenderingExample = ({ isLoggedIn }) => { return ( <div> {isLoggedIn ? <h1>Welcome, User!</h1> : <h1>Please log in to continue.</h1>} </div> ); }; export default ConditionalRenderingExample; |
Example 3: Using Logical && Operator
|
import React from 'react'; const ConditionalRenderingExample = ({ isLoggedIn }) => { return ( <div> {isLoggedIn && <h1>Welcome, User!</h1>} </div> ); }; export default ConditionalRenderingExample; |
Example 4: Using Conditional Rendering with Functions
|
import React from 'react'; const ConditionalRenderingExample = ({ isLoggedIn }) => { const renderMessage = () => { if (isLoggedIn) { return <h1>Welcome, User!</h1>; } else { return <h1>Please log in to continue.</h1>; } }; return ( <div> {renderMessage()} </div> ); }; export default ConditionalRenderingExample; |
Example 5: Using Conditional Rendering with Switch Statements
|
import React from 'react'; const ConditionalRenderingExample = ({ userType }) => { let greeting; switch (userType) { case 'admin': greeting = 'Welcome, Admin!'; break; case 'user': greeting = 'Welcome, User!'; break; default: greeting = 'Unknown user type'; } return ( <div> <h1>{greeting}</h1> </div> ); }; export default ConditionalRenderingExample; |
12. How can you render lists in React using the map method, and what is the importance of keys in React?
Rendering Lists in React using the map Method:
In React, you can render lists dynamically using the map method. This method allows you to iterate over an array of data and generate a new array of React elements based on that data. Each item in the array corresponds to a React element in the rendered output.
Example:
|
import React from 'react';
const ListRenderingExample = () => { const items = ['Apple', 'Banana', 'Orange']; return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); }; export default ListRenderingExample; |
Importance of Keys in React:
Keys are a special attribute in React that help identify which items in a list are changed, added, or removed. They are required when rendering lists of elements to ensure efficient updates.
Example:
|
const listItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> ); |
Conclusion |
Congratulations! You've just scratched the surface of React.js. This tutorial aimed to provide a solid foundation for understanding React components and their key concepts. Feel free to explore more advanced topics and build upon what you've learned here.
Remember, practice is key to mastering React.js. Keep experimenting, building, and most importantly, enjoy the journey of becoming a React developer!
You may also like
