vue开发学习react之旅---从最基础开始（内含vue与react对比）最全实战技术

react学习之根据大厂react项目学习react开发

学习react是前端必经之路，技术的深度与广度都是一个前端开发薪资标杆
当然：一部分人很早就站在了标杆的上沿

---

项目的构成

本篇文章所使用的项目使用以下技术栈：

1. 前端语言框架：React
2. react应用框架 Umi
3. UI框架 Ant Design
4. 命令工具 Yarn
5. 项目仓库 GitHub
6. 开发工具 Vs Code
7. TypeScript
   

---

一、jsx

React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。— — React JSX|菜鸟教程

看一段代码

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

如下：

ReactDOM.render(
    <div>
    <h1>菜鸟教程</h1>
    <h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    
    document.getElementById('example')
);

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代：

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

注释需要写在花括号中，实例如下：

ReactDOM.render(
    <div>
    <h1>菜鸟教程</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);

JSX 允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

以下是博主个人总结的jsx使用的规则：

1. 定义虚拟dome时不要用引号
2. 变迁中混入js表达式要用{}
3. 样式的类名不要用class，要用className
4. react推荐使用内联样式，内联样式要用style={{key:value}}的形式去写
5. 只能又一个根标签
6. 标签必须闭合
7. 标签名称若小写字母开头，则默认转为html中的同名标签，若html中无该标签名称则报错
8. 若大写字母开头react渲染对应的组件，若组件没有定义，则报错

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。