跳到主要内容

React 学习之旅 1 - 基础篇 1

概览

本文介绍 React 基础知识,包括创建第一个 React 应用、组件的概念和使用、JSX 语法等内容。通过简单的示例代码,帮助你快速入门 React 开发。文章涵盖了 React 最基本也最重要的概念,为后续深入学习打下基础。

HelloWorld

DEMO: react-journey/01/helloworld.html

function MyApp() {
return <h1>Hello, world!</h1>;
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);

创建和嵌套组件

React 组件:

  • React 程序由组件组成
  • 一个组件是 UI 的一部分,拥有自己的逻辑和外观
  • 组件可以小到一个按钮,也可以大到一个页面。
  • React 组件是返回 JSX 的 JavaScript 函数

DEMO: react-journey/01/my-button.html

function MyButton() {
return <button>Click me</button>;
}
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
)
}

说明:

  • React 组件必须以大写字母开头,而 HTML 标签则必须是小写字母。如:MyButtonMyApp
  • export default 关键字指定了文件中的主要组件

使用 JSX 写标签

什么是 JSX?

JSX 可以理解为是一种特殊的语法糖,可以让你在 JS 代码中直接写 HTML 一样的代码。

DEMO: react-journey/01/jsx.html

// 这是 JSX 写法
function Welcome() {
const name = "谢小沛";
return (
<>
<h1>你好!</h1>
<p>{name}</p>
</>
);
}

DEMO: react-journey/01/no-jsx.html

// 这是不使用 JSX 的写法
function Welcome() {
const name = "谢小沛";
return React.createElement(
'div',
null,
React.createElement('h1', null, '你好!'),
React.createElement('p', null, name)
);
}

JSX 特点:

  • 更直观:像 HTML 一样写界面,代码结构更清晰容易理解
  • 更灵活:可以在 JSX 中嵌入 JS 表达式
  • 有规则:
    • 必须闭合标签
    • 要有一个根标签包裹(如:<div>...</div><>...</>
    • 使用 className 而不是 class(因为 class 是 JS 关键字)

PS:工具:HTML -> JSX 在线转换器

添加标签样式

DEMO: react-journey/01/add-style.html

function Square() {
return <div className="square"></div>;
}

function MyApp() {
return (
<div>
<Square />
</div>
);
}
.square {
border: 3px solid #ccc;
width: 100px;
height: 100px;
display: inline-block;
}

显示数据

DEMO: react-journey/01/show-data.html

const user = {
name: '谢小沛',
occupation: 'Front-end Developer',
};

const Profile = () => {
return (
<>
<p>姓名:{user.name} </p>
<p>职业:{user.occupation}</p>
</>
);
};

function MyApp() {
return (
<div>
<Profile />
</div>
);
}

条件渲染

DEMO: react-journey/01/condition.html

条件渲染 if

const isShow = true;

const Content = () => {
let content;
if (isShow) {
content = <div>Blow up!</div>;
} else {
content = <div>Nothing happened.</div>;
}
return content;
};

条件渲染 ?(三元表达式):

content = isShow ? <div>Blow up!</div> : <div>Nothing happened.</div>;

当你不需要 else 分支时,你还可以使用 逻辑 && 语法:

content = isShow && <div>Blow up with `&&` !</div>;

列表渲染

渲染列表:可以使用 for 循环和数组的 map() 函数 来渲染组件列表:

DEMO: react-journey/01/loop.html

const products = [
{ title: 'Cabbage', id: 1 },
{ title: 'Garlic', id: 2 },
{ title: 'Apple', id: 3 },
];

const ProductList = () => {
// 写法 1:使用 for...of 循环遍历 products
const listItems = [];
for (const product of products) {
listItems.push(<li key={product.id}>{product.title}</li>);
}

// 写法 2:map 方法会返回一个新数组,非常适合 React 的列表渲染
// const listItems = products.map((product) => <li key={product.id}>{product.title}</li>);

return <ul>{listItems}</ul>;
};

资源

参考