ReactJS是目前最流行的前端开发库之一，由Facebook开发并维护。它主要用来构建用户界面，特别是单页应用（SPA）。ReactJS的核心理念是组件化，允许开发者将UI拆分成可复用的独立部分，每个部分称为“组件”。在本资料“reactJSBasicsHandout01”中，我们将深入探讨React的基础知识，并通过100行代码的实践来理解其基本用法。
让我们从React的基本概念开始。React使用JSX语法，这是一种JavaScript的扩展，允许我们在JavaScript中编写类似于HTML的代码。JSX使得在JavaScript中创建和操作DOM变得简单。例如，下面是一个简单的React组件示例：
```jsx
class HelloWorld extends React.Component {
render() {
return <h1>Hello, world!</h1>;
}
}
```
这个组件名为`HelloWorld`，它会渲染一个`<h1>`元素。`render`方法是React组件的关键，它定义了组件应该如何显示。
接下来，我们需要了解React的生命周期方法。每个React组件都有一个生命周期，包括挂载（Mounting）、更新（Updating）和卸载（Unmounting）三个阶段。例如，在挂载阶段，`componentDidMount`方法会在组件被插入到DOM后执行，通常用于初始化数据获取或设置DOM元素的监听事件。
关于状态（State）和属性（Props），React组件有两种数据来源。属性是由父组件传递给子组件的，不可改变；状态则是组件自身管理的数据，可以被组件内部的方法修改。例如：
```jsx
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
```
在这个例子中，`Counter`组件有一个初始状态`count`，并且有一个`increment`方法来更新状态。当按钮被点击时，`increment`方法会被调用，导致组件重新渲染并显示新的计数值。
React还引入了虚拟DOM（Virtual DOM）的概念，这是一种优化技术。当组件的状态发生变化时，React会先计算出新的DOM树，然后只对实际需要改变的部分进行更新，避免了频繁操作真实DOM带来的性能问题。
在实际项目中，我们还需要使用ReactDOM库来将React组件渲染到HTML页面上。例如：
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<Counter />, document.getElementById('root'));
```
这里，`ReactDOM.render`函数将`Counter`组件渲染到ID为`root`的HTML元素中。
此外，React生态系统包含许多配套工具，如Redux（用于状态管理）、React Router（路由管理）、Webpack（模块打包工具）等。这些工具可以极大地提升React应用的开发效率和可维护性。
“reactJSBasicsHandout01”资料将引导你从零开始学习ReactJS，通过实践100行代码，你将掌握React的基础概念，包括JSX、组件、状态、属性、生命周期方法以及如何将React组件渲染到页面上。随着深入学习，你将能够构建复杂的交互式用户界面，并利用React的强大功能构建高效且可维护的前端应用。
