1. JSX
JSX stands for JavaScript XML, which is a syntax extension for JavaScript. It allows you to write HTML-like syntax in your JavaScript code. JSX is a fundamental part of React because it simplifies the process of creating components by providing a more intuitive way to represent the UI.
Here’s an example of JSX code:
“`
function Greeting(props) {
return (
Hello, {props.name}!
How are you today?
);
}
“`
In this example, the `Greeting` component uses JSX to render a greeting message and a simple question.
2. Components
React relies heavily on components, which are the building blocks of your application. Each component is responsible for rendering a specific part of the UI and managing its state. Components can be functional or class-based.
Functional components are simpler and more straightforward to write. Here’s an example:
“`
function Button(props) {
return ;
}
“`
Class components, on the other hand, have more features and are ideal for complex components. Here’s an example:
“`
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleIncrement = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
Count: {this.state.count}
);
}
}
“`
In this example, the `Counter` component is a class component that manages its state and has a method to handle button click events.
3. Props
Props are short for properties, and they help you pass data from one component to another. Props are read-only, meaning they can’t be changed by the receiving component. Here’s an example:
“`
function Welcome(props) {
return
Welcome, {props.name}!
;
}
function App() {
return
}
“`
In this example, the `Welcome` component receives a `name` prop from the parent `App` component and uses it to render a welcome message.
4. State
State is another crucial concept in React development. It represents the current state of a component and can be changed by the component itself. Changing a component’s state will trigger a re-render, updating the component’s view. Here’s an example:
“`
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleIncrement = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
Count: {this.state.count}
);
}
}
“`
In this example, the `Counter` component manages its state using the `count` variable and updates it in response to button clicks using the `handleIncrement` method.
5. Lifecycle methods
Lifecycle methods are special methods that allow you to hook into different stages of a component’s lifecycle. The `componentDidMount` method, for example, is called when the component is first mounted to the DOM. Here’s an example:
“`
class User extends React.Component {
constructor(props) {
super(props);
this.state = { user: null };
}
componentDidMount() {
fetchData(this.props.userId).then((user) => {
this.setState({ user });
});
}
render() {
if (this.state.user) {
return (
Name: {this.state.user.name}
Email: {this.state.user.email}
);
} else {
return
Loading…
;
}
}
}
“`
In this example, the `User` component uses the `componentDidMount` method to fetch data from the server and update its state when it’s ready.
6. Conditional rendering
Conditional rendering allows you to show or hide parts of your UI based on conditions. The most common way to do this in React is by using the `if` statement or the ternary operator. Here’s an example:
“`
function Greeting(props) {
if (props.name) {
return
Hello, {props.name}!
;
} else {
return
Hello, stranger!
;
}
}
“`
In this example, the `Greeting` component checks if the `name` prop is passed and displays a different message based on the condition.
7. Handling events
React provides a streamlined way to handle events in your components. Instead of attaching event listeners manually, you can use special event attributes that start with `on`. Here’s an example:
“`
function Button(props) {
const handleClick = () => {
console.log(‘Button clicked!’);
};
return ;
}
“`
In this example, the `Button` component defines a `handleClick` function that logs a message to the console when the button is clicked. The `onClick` attribute is used to attach the function to the button’s click event.
8. Refs
Refs provide a way to access the properties of a DOM element in your React code. They’re used sparingly, but they can be useful for certain cases where you need to manipulate the DOM directly. Here’s an example:
“`
class TextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
focusTextInput = () => {
this.textInput.current.focus();
};
render() {
return (
);
}
}
“`
In this example, the `TextInput` component defines a `ref` using the `createRef` method and uses it to focus on the input element when the button is clicked.
9. Context
Context provides a way to share data between components without having to pass it down through the component hierarchy. Context is ideal for cases where a large number of components need access to the same data. Here’s an example:
“`
const ThemeContext = React.createContext(‘light’);
function Button(props) {
return (
{(theme) => (
)}
);
}
class App extends React.Component {
render() {
return (
);
}
}
“`
In this example, the `ThemeContext` is created using the `createContext` method with a default value of `light`. The `Button` component uses the `ThemeContext.Consumer` to access the current theme and apply the corresponding class to the button.
10. Hooks
Hooks are a newer feature in React that allows you to use state and other React features in functional components. The `useState` hook, for example, can be used to manage state in a functional component. Here’s an example:
“`
function Counter() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
return (
Count: {count}
);
}
“`
In this example, the `useState` hook is used to manage a `count` state variable and update it in response to button clicks.
Conclusion
These 10 key concepts will help you write efficient and effective code when working with React. Remember to practice and experiment with these concepts in your projects to solidify your understanding and gain more experience. Happy coding!
