以结果为导向，写给刚学完前端三剑客和想要了解 React 框架的小伙伴，使得他们能快速上手（省略了历史以及一些不必要的介绍）。
重构
src/App.js 中所有的组件都是用 function 来声明的，我们可以使用 ES6 中新增的箭头函数来简化它们。
- 举例：
function () { ... } const () => { ... } const item => { ... } const (item) => { ... } const (item, index) => { ... } 复制代码
声明箭头函数时，如果只有一个参数，可以把括号去掉；但多个参数时，括号是必须的（为了避免麻烦，我们参数统一使用括号）。
- 实际应用：
const App = () => { return ( <div> ... </div> ); }; const List = () => { return ( <ul> {list.map((item) => { return ( <li key={item.objectID}> ... </li> ); })} </ul> ); }; 复制代码
可以看到 map() 也和其他函数一样可以使用箭头函数简化。
如果一个箭头函数没有执行任何任务，只返回信息，我们也可以去掉 {} 以及 return，函数会自己附上一个隐式的返回声明：
const App = () => ( <div> ... </div> ); const List = () => ( <ul> {list.map((item) => ( <li key={item.objectID}> ... </li> ))} </ul> ); 复制代码
可以看到 JSX 简洁了许多，但你要记住：这是可选的步骤，并不是必须的。
且函数签名和返回语句之间需要引入业务逻辑时，必须要加上 {} 以及 return。
React DOM
现在我们已经大概了解了组件的定义，让我们来看看 App 组件的实例化。
打开 src/index.js 文件：
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); reportWebVitals(); 复制代码
React.StrictMode 是一个用来突出显示应用程序中潜在问题的工具，不用管它。
重点只有这一句：
ReactDOM.render(<App />, document.getElementById("root")); 复制代码
我们用 ReactDOM.render() 函数让 JSX 替换掉 HTML 中的一个 DOM 节点，也就是将 React 集成到了 HTML中。
该方法需要传入两个参数：
- 首先是要渲染的 JSX，你可以传入一个简单的 JSX，也可以直接传入一个组件的实例，如
<App />； - 第二个参数指定了 React 应用在何处显示你的 HTML，你可以在 public/index.html 文件中找到这个
id="root"的元素。
专栏
因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。
在更新完后会整合为一整篇，感谢关注和点赞！
