以结果为导向，写给刚学完前端三剑客和想要了解 React 框架的小伙伴，使得他们能快速上手（省略了历史以及一些不必要的介绍）。
组件 & JSX
我们的第一个组件就在 src/App.js 文件中，是一个常规的 JS 函数（但名称必须以大写字母开头），你可以删除模板自动生成的部分代码并将其简化为以下形式：
function App() { return ( <div> <h1>Hello World</h1> </div> ); } export default App; 复制代码
在你保存后，浏览器将会显示 Hello World 的结果。
可以看到 App 组件返回了类似 HTML 的输出，这样的将 HTML 和 JavaScript 混合在一起的输出叫做 JSX，它可以用来生成 React 元素，同时 return 多行必须将其包在一对括号中。
如果你在开头定义了一个变量，你可以这样展示：
const title = "React"; function App() { return ( <div> <h1>Hello {title}</h1> </div> ); } export default App; 复制代码
而 HTML 的部分与原生几乎相同，如果要写一个输入框你可以这样定义：
<label htmlFor="search">Search: </label> <input type="text" id="search"/> 复制代码
可以看到只有 htmlFor 不认识，但也可以猜到是 for 属性的代替。React 约定使用驼峰命名法，所以很多属性与原生不同，比如 class 和 onclick 在 JSX 中是 className 和 onClick，你可以在 React 文档中找到更多支持的属性。
而且 JSX 花括号内的所有内容都可以使用 JS 表达式，例如函数执行：
function getName(name) { return "Hello " + name; } export default function App() { return ( <div> <h1>{getName("Mancuoj")}</h1> <label htmlFor="search">Search: </label> <input type="text" id="search"/> </div> ); } 复制代码
export default 是标准的 JS 语法（并不特定于 React），可以导出函数对象或原始值，以便在其他文件中使用 import 导入。这里我们也可以简化一下，直接默认导出函数的返回值。
专栏
因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。
在更新完后会整合为一整篇，感谢关注和点赞！
