ReactJS - JSX：初學者指南

Hello there, future React developers! I'm thrilled to be your guide on this exciting journey into the world of ReactJS and JSX. As someone who's been teaching computer science for many years, I've seen countless students light up when they grasp these concepts. So, let's dive in and make some React magic together!

What is JSX？

Before we jump into the nitty-gritty, let's start with the basics. JSX stands for JavaScript XML. It's a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. I like to think of it as a delicious sandwich where HTML is the bread, and JavaScript is the filling. Yum!

使用 JSX 在 ReactJS 中

In React, JSX is the preferred way to structure our components. It makes our code more readable and easier to understand. Let's look at a simple example:

const element = <h1>Hello, React World!</h1>;

This might look like HTML, but it's actually JSX! React will transform this into pure JavaScript behind the scenes.

Why JSX？

You might be wondering, "Why bother with JSX when we could just write plain JavaScript?" Great question! Here's why:

1. Familiarity: If you know HTML, JSX will feel natural to you.
2. Readability: It's easier to visualize the structure of your UI.
3. Syntax Checking: It helps catch errors early in the development process.

JSX 中的表达式

One of the coolest things about JSX is that you can embed JavaScript expressions right in your markup. It's like adding sprinkles to your ice cream - it makes everything better! Here's how:

const name = 'React Learner';
const element = <h1>Hello, {name}!</h1>;

Those curly braces {} are your magic wand. Anything inside them will be evaluated as a JavaScript expression.

JSX 中的函数

We can take this a step further and use functions in our JSX. Check this out:

function formatName(user) {
return user.firstName + ' ' + user.lastName;
}

const user = {
firstName: 'React',
lastName: 'Learner'
};

const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);

Here, we're calling the formatName function right inside our JSX. Cool, right?

JSX 中的属性

Just like in HTML, we can add attributes to our JSX elements. But there's a twist! In JSX, we use camelCase for attribute names instead of lowercase. For example:

const element = <div className="container">Hello, JSX!</div>;

Notice we're using className instead of class. This is because class is a reserved word in JavaScript.

在属性中使用表达式

Remember those magic curly braces? We can use them in attributes too!

const imgUrl = 'https://example.com/react-logo.png';
const element = <img src={imgUrl} alt="React Logo" />;

This allows us to dynamically set attribute values, which is super useful when building interactive UIs.

JSX 中的嵌套元素

Just like in HTML, we can nest elements in JSX. This is how we build complex UIs:

const element = (
<div>
<h1>Welcome to React</h1>
<p>Let's learn JSX together!</p>
</div>
);

Notice how we wrap multiple lines of JSX in parentheses. This isn't strictly necessary, but it helps with readability.

JSX 方法

Here's a table of some common JSX methods you'll encounter:

方法	描述	示例
React.createElement()	Creates a React element	React.createElement('div', null, 'Hello, JSX!')
ReactDOM.render()	Renders a React element to the DOM	ReactDOM.render(element, document.getElementById('root'))
React.Fragment	Allows you to return multiple elements without adding extra nodes to the DOM	<React.Fragment> Title Paragraph </React.Fragment>

结束语

And there you have it, folks! We've taken our first steps into the world of JSX. Remember, practice makes perfect, so don't be afraid to experiment with these concepts.

As I always tell my students, coding is like learning to ride a bike. It might feel wobbly at first, but once you get the hang of it, you'll be zooming along in no time. So keep pedaling, and before you know it, you'll be building amazing React applications!

Happy coding, and see you in the next lesson where we'll dive even deeper into the React universe!

Credits: Image by storyset