React is a JavaScript library for building user interfaces. React adopts a component-based architecture, allowing developers to create reusable UI components. This course will delve deeply into the core concepts of React: ‘components’ and ‘state’.<\/p>\n
A component is the basic building block of React, representing small pieces that make up the UI. Each component operates independently and can be combined with other components to form complex user interfaces.<\/p>\n
React components can be broadly classified into two types.<\/p>\n
A React component can be created as follows.<\/p>\n
import React from 'react';\n\nclass MyComponent extends React.Component {\n render() {\n return <h1>Hello, React!<\/h1>;\n }\n}<\/code><\/pre>\nThe above example defines a component called ‘MyComponent’ and uses it to render the text “Hello, React!” on the screen.<\/p>\n
2. What is state?<\/h2>\n
State refers to the data or values of a component. The state of a component is stored internally, and when the state changes, the component is automatically re-rendered.<\/p>\n
2.1. Using state<\/h3>\n
To use state in a class component, you define the initial state in the constructor method and use the `this.setState()` method to update the state.<\/p>\n
class MyStateComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = { count: 0 };\n }\n \n increment = () => {\n this.setState({ count: this.state.count + 1 });\n }\n \n render() {\n return (\n <div>\n <p>Current count: {this.state.count}<\/p>\n <button onClick={this.increment}>Increase<\/button>\n <\/div>\n );\n }\n}<\/code><\/pre>\nIn the example above, ‘MyStateComponent’ is a component that has the functionality to increase the count. When the `increment` method is called, the state changes, causing the component to re-render.<\/p>\n
2.2. Managing state in functional components<\/h3>\n
To manage state in functional components, you use React’s `useState` Hook. Below is an example of a functional component that uses state.<\/p>\n
import React, { useState } from 'react';\n\nconst MyFunctionalComponent = () => {\n const [count, setCount] = useState(0);\n \n const increment = () => {\n setCount(count + 1);\n }\n \n return (\n <div>\n <p>Current count: {count}<\/p>\n <button onClick={increment}>Increase<\/button>\n <\/div>\n );\n}<\/code><\/pre>\n3. The impact of state on components<\/h2>\n
State is an important factor in dynamically changing the UI of a component. When the state changes, everything related to the component is re-rendered, providing a UI that reflects the latest state.<\/p>\n
3.1. The difference between Props and State<\/h3>\n
‘Props’, used for passing data between components, and ‘state’, used for managing data within a component, are distinct concepts. Props are read-only data passed from parent components to child components, while state is data managed internally by the component itself.<\/p>\n
4. Managing components and state in React<\/h2>\n
A React application typically consists of multiple components, and the data flow between them occurs from parent components to child components. Below, we will explain how to effectively manage components and state.<\/p>\n
4.1. Lifting state up<\/h3>\n
Lifting state up refers to managing state in a parent component and passing it down to child components via props. This allows multiple child components to share the same state, leading to a more consistent UI.<\/p>\n
class ParentComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = { sharedState: 0 };\n }\n \n updateSharedState = (newValue) => {\n this.setState({ sharedState: newValue });\n }\n \n render() {\n return (\n <div>\n <ChildComponent sharedState={this.state.sharedState} updateSharedState={this.updateSharedState} \/>\n <\/div>\n );\n }\n}<\/code><\/pre>\n4.2. State management libraries<\/h3>\n
As projects grow larger and state management becomes more complex, it is advisable to use state management libraries such as Redux or MobX. These libraries are useful for managing global state and help simplify state management in complex applications.<\/p>\n
For example, when using Redux, you can manage state as follows.<\/p>\n
import { createStore } from 'redux';\n\nconst initialState = { count: 0 };\n\nconst reducer = (state = initialState, action) => {\n switch (action.type) {\n case 'INCREMENT':\n return { count: state.count + 1 };\n default:\n return state;\n }\n};\n\nconst store = createStore(reducer);<\/code><\/pre>\n5. Lifecycle of React components<\/h2>\n
React components go through the processes of creation, updating, and removal, where specific methods are called at each stage. This is referred to as the ‘lifecycle’.<\/p>\n
5.1. Lifecycle methods<\/h3>\n
Key lifecycle methods available in class components include the following.<\/p>\n
\n- componentDidMount:<\/strong> Called after the component has finished its first rendering.<\/li>\n
- componentDidUpdate:<\/strong> Called after the component has been updated.<\/li>\n
- componentWillUnmount:<\/strong> Called when the component is unmounted (removed).<\/li>\n<\/ul>\n
6. Conclusion<\/h2>\n
In React, components and state play a crucial role in the structure and behavior of applications. By using components to structure the UI and state to provide a dynamic user experience, developers can create applications that satisfy end users. This course aims to help you understand the basic concepts of React, build various components, and learn how to manage state.<\/p>\n
7. Additional resources<\/h2>\n
You can find more information through the official React documentation and various online courses. Below are some useful links:<\/p>\n