React 是一个流行的 JavaScript 库，用于为网页或应用程序构建可重用的组件驱动的用户界面。
React 将 HTML 与 JavaScript 结合在了一起，以此创建出一个新的标记语言 JSX。React 还使得管理整个应用程序的数据流变得更容易。
直接上代码！
// 直接在JS中写Html
const JSX = <h1>Hello JSX!</h1>;
---------------------------------------
// JSX 必须返回单个元素，多个同级元素会失效，必须使用父元素将其包裹起来
const JSX = ( // 此处圆括号可提高可读性
<div>
{/*此处为注释，需要大括号将其标记为JS语句，否则会被识别为html*/}
<h1>This is a block of JSX</h1>
<p>Here's a subtitle</p>
</div>
);
-------------
// JSX的属性命名需要和html的有所区别，像class -> className, onclick -> onClick
// 函数首字母须大写
function MyButton() {
return (
<div>some word...</div>
)
}
// 调用
<MyButton />
------------------
// 第一个参数是你想要呈现的React组件。第二个参数是要在其中呈现该组件的DOM节点。
ReactDOM.render(componentToRender, targetNode); // 将代码渲染到DOM
------------------
// 设计组件
class MyComponent extends React.Component {
constructor(props) {// 构造？ 稍后详解
super(props); // 继承父类
}
render() {
return (
<div><h1>My First React Component!</h1></div>
);
}
}
// 渲染页面元素
ReactDOM.render(<MyComponent />, document.getElementById('challenge-node'));
------------------
// 传入数组作为参数
const List = (props) => {
{ /* 修改这行下面的代码 */ }
return <p>{props.tasks.join(', ')}</p>
{ /* 修改这行上面的代码 */ }
};
class ToDo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>To Do Lists</h1>
<h2>Today</h2>
{ /* 修改这行下面的代码 */ }
<List tasks={['a', 'b']}/>
<h2>Tomorrow</h2>
<List tasks={['a', 'b', 'c']}/>
{ /* 修改这行上面的代码 */ }
</div>
);
}
};
------------------
// 设置Props的默认值
const MyComponent = (props) => {}; // 假设带有location属性
MyComponent.defaultProps = { location: 'San Francisco' }
// 传入参数， 数值无引号，使用花括号解释为JavaScript
render() {
{ /* 修改这行下面的代码 */ }
return <Items quantity={10} />
{ /* 修改这行上面的代码 */ }
}
------------------
// 设置参数类型检查
// 要求propName 必须是function类型， function <=> func, bool <=> boolean
MyComponent.propTypes = { propName: PropTypes.func.isRequired }
Items.propTypes = {quantity: PropTypes.number.isRequired } // 必须为数字
------------------
// 使用this访问props： 当组件继承了父类但props的值不在作用域中时，使用this获取当前对象的props
{this.props.data}
------------------review
在代码编辑器中有一个 CampSite 组件，它把 Camper 组件渲染为自己的子组件。 定义 Camper 组件，
并为其分配默认 props { name: 'CamperBot' }。 可以在 Camper 组件内部渲染任何你想要的代码，
但是要确保有一个 p 元素，它只包含作为 prop 传递的 name 值。 最后，在 Camper 组件上定义
propTypes，要求提供 name 作为 prop，并验证它是 string 类型。
// given code below
class CampSite extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Camper/>
</div>
);
}
};
// 修改这行下面的代码
const Camper = (props) => {
return (
<div><p>{props.name}</p></div>
);
};
Camper.defaultProps = { name: 'CamperBot'};
Camper.propTypes = {name: PropTypes.string.isRequired }
------------------
最后简单比较一下React和Vue：
React 和 Vue 是两个流行的前端 JavaScript 框架，它们都用于构建用户界面和单页应用（SPA），但有一些关键的区别：
-
设计理念：
- React：由 Facebook 维护，遵循函数式编程范式，强调组件化和声明式视图。
- Vue：由尤雨溪创建，设计理念上更贴近传统 MVC 模式，提供了更渐进的集成方式。
-
模板 vs JSX：
- React：使用 JSX，这是一种看起来像 HTML 的 JavaScript 语法扩展，允许你在 JavaScript 中直接编写 UI 代码。
- Vue：使用模板语法，这是一种基于 HTML 的声明式模板，可以更直观地编写 HTML 结构。
-
响应式系统：
- React：使用 Virtual DOM 和一个高效的 diff 算法来实现响应式更新。
- Vue：也使用 Virtual DOM，但其响应式系统基于依赖收集和异步更新队列，提供了更细粒度的控制。
-
状态管理：
- React：通常与 Redux 或 Context API 一起使用来管理状态。
- Vue：提供了内置的 Vuex 状态管理库，与 Vue 集成更紧密。
-
路由管理：
- React：通常使用 React Router。
- Vue：提供了 Vue Router，与 Vue 集成更自然。
-
构建工具：
- React：通常与 Webpack 和 Babel 一起使用。
- Vue：可以使用 Vue CLI，它内置了 Webpack、Babel 和其他构建工具的配置。
-
生态系统：
- React：拥有庞大的生态系统和社区，有大量的第三方库和工具。
- Vue：生态系统相对较小，但也在不断增长，提供了许多高质量的插件和工具。
-
学习曲线：
- React：可能对初学者来说稍微陡峭一些，特别是需要理解 JSX 和函数式编程概念。
- Vue：通常被认为更易上手，特别是对于那些熟悉 HTML、CSS 和 JavaScript 的开发者。
-
灵活性：
- React：提供了更高的灵活性，允许开发者自由选择架构和工具。
- Vue：提供了更多的开箱即用功能，使得快速开发变得容易。
-
类型支持：
- React：TypeScript 支持良好，但需要额外配置。
- Vue：从 3.0 开始，提供了对 TypeScript 的原生支持。
