React基础入门（1）

1.react的基本概览

React是用于构建用户界面的 JavaScript 库，React主要用于构建UI，它是 MVC 中的 V（视图），但是它仍是数据驱动，视图变了，视图也会同时发生变化。主要特点：(1)声明式，(2)组件化 ，(3)一次学习，随处编写。

2.如何构建一个最简单的react程序

React的使用和vue一样，大致有两种方式【目前先介绍第一种】

1)：使用script引入相关的js文件进行使用
2):使用react的脚手架(可以使用官方的也可以自己搭建)
第一步：引入相关js文件

//引入相关js文件
<script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>

 <script src="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script> 

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
/*注三个文件的作用：
1．react.development.js - React 的核心库
2．react-dom.development.js - 提供与 DOM 相关的功能
3．babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。

第二步： 安装react-devTools开发者工具
1.全局安装react-devtools 3.0.0版本
cnpm install -g react-devtools@3.0.0
2.启动
creact-devtools
3.在代码中放入对应script代码

3.jsx是什么，语法

1):html/xml + js混写的写法我们称之为JSX,然后要在script标签中写jsx的话，我们需要type的值写为text/babel
2):基础案例

<script type="text/babel">
ReactDOM.render(
  <h1>Hello, world!</h1>,
document.getElementById('root')
);

3):jsx的作用

1.JSX 就是用来声明 React 当中的元素，也就是要渲染的模板（template）

1. 我们把jsx传递给 ReactDOM.render() 中就能将其渲染到页面上
   4):jsx的语法
   ①　在jsx中写js表达式：表达式需要写在花括号 {} 中
   
   注：1.和vue一样（当然vue是双括号{{}},react是单括号{}），{}中只能写表达式（三目运算符也是表达式，一句日志打印也是表达式，但是不能写语句和流程控制）
   2.和vue一样，{}中不能同时写多个字段数据
   ②　在jsx中写样式:

2. 对象来设置内联样式.

3. React 会在指定元素数字后自动添加 px
   
   ③　在jsx中写注释：注释需要写在花括号中
   
   ④　在jsx中写数组：数组会自动展开所有成员
   
   ⑤　jsx表达式可以在if-for等语句中使用，可作为函数返回值
   
   
   ⑥　jsx标签中属性写法:
   1.如果属性名由多个单词组成，应该使用小驼峰命名法

     <input tabIndex="3"/>
     <input tabIndex="50"/>
     <input tabIndex="9"/>

2.如果值是一个变量我们可以包裹在{}里面，常量可以直接包裹在双引号中

 <input tabIndex="3" placeholder="hello" title={ele.firstName + ele.sex} />

3.几个特殊的属性

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 HTML 属性名(因为js里面具有这样的关键字)。作为替代，React DOM 使用 className和 htmlFor 来做对应的属性

            <label htmlFor ="test">label:</label>   
            <input className="zs"  id="test"/>

⑦　 JSX的本质:
jsx默认浏览器是认不到的，需要使用babel转译，然后会被转译为
React.createElement() 函数调用。
以下2种代码完全等效

    const element = (
            <h1 className="greeting">
                Hello, world!
           </h1>
        );

    const element = React.createElement(
            'h1',
            { className: 'greeting' },
            'Hello, world!'
        );

4.react组件

①　组件定义
1):使用函数定义一个组件

//组件一:用函数定义
function HelloMessage(props) {
return <h1>你好啊，世界！</h1>;
}

2):使用es6的class定义一个组件

//组件二:用es6的class定义
class Welcome extends React.Component {
render() {
return <h1>我是组件二!</h1>;
}
}

注意：而自定义的 React 类名以大写字母开头，即大驼峰的写法
②　组件调用:直接用标签名

③　组件传参
如果我们需要向组件传递参数，在调用组件时直接给上属性即可，然后在组件中使用 this.props 对象来直接获取。

1．如果是function创建组件，那么我们把props作为参数传入即可，function 里面直接使用props即可
2．如果是class创建的组建，那么我们需要使用this.props使用传入的参数

注：：无论是使用函数声明的组件还是通过 class 声明的组件，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
④　React State(状态):类似于vue中的data,也类似于vuex中的state
(1)state使用
1．我们可以在类的构造函数里面初始化状态 this.state
2．这时要注意，一旦我们显式的定义了constructor构造方法，props就需要我们显示的传递进来了。

(2)state 的修改
注：默认情况下组件中的事件函数中的this指向的undefined，并不会像vue一样指向组件实例,所以需要改变this指向，并且利用setState方法进行修改