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 标签则必须是小写字母。如:
MyButton
、MyApp
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>;
};
资源
参考
- 官方文档:快速入门 – React 中文文档