React基础笔记（一）

为什么开始学习React呢？

主要是我感觉Vue.js学的差不多了，就想继续拓展一下，然后就开始学习React

demo

https://gitee.com/zyzcos/react-study

博客

https://zyzcos.gitee.io/

React

个人理解：React也是一个渐进式框架，可以有选择性的在网站的一小部分使用React

React的使用：

<!-- 1.创建React渲染的容器 -->
  <div id='like_button_container'></div>
<!-- 2.加载React -->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.加载React组件 -->
  <script src='like_button.js'></script>

  const domContainer =document.querySelector('#like_button_container');
  ReactDom.render(e(LikeButton),domContainer); 

除了可以使用redner函数，React也支持JSX格式

核心概念-JSX

建议在React中使用JSX，JSX可以很好地描述UI应该呈现出它应有交互的本质形式

如何在网站上直接使用JSX

1. 添加JSX脚本
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
2. 添加type="text/babel"属性给需要用到JSX的js文件
   <script type="text/babel" src="./index.js"></script>

嵌入表达

// 1. { }内编写JS表达式
  // 使用变量
  const name ='Fleven';
  const element1 = <h1>Hello,{name}</h1>
  // 使用函数
  const showFullName(user){
    return user.firstName + '' + user.lastName;
  }
  const user = {
    firstName:'F