React的入门基础

😀1.React介绍
React.js是前端三大新框架：Angular.js、React.js、Vue.js之一，这三大新框架的很多理念是相同的，但是也有各自的特点。
React起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React可以作为一个js库来使用，我们在页面上引用相关的js文件，就可以使用它来做一些页面效果。
React也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)应用系统。

😁2.框架在国内使用对比：添加链接描述 http://index.baidu.com/v2/index.html#/。

😀3.React 文档: http://react.css88.com/docs/getting-started.html。

😀4.React的开始：通过将React作为一个js库来使用,页面上引入已经下载好的三个js文件，就可以使用React了。

//React的核心文件
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
//转换编译器
<script src="js/babel.min.js"></script>

【前两个js文件是React的核心文件，第三个js文件是一个转换编译器，能将ES6语法及jsx语法转换成可以在浏览器中运行的代码】

🚗5.简单编写一个程序：

<div id="root"></div>
<script type="text/babel">
    // oJsx表示一个jsx对象
    let oJsx = <h1>Hello React !</h1>;
    
    // render接收两个参数，第一个参数可以是一个jsx对象，也可以是一个react组件
    // 第二个参数是一个元素dom对象，它作为显示内容的容器
    ReactDOM.render(
        oJsx,
        document.getElementById('root')
    )   
</script>

😂6.JSX语法：
jsx语法是一种类似于html标签的语法，相当于是让我们在JavaScript代码中直接写html代码，但是jsx不完全是html，它是 JavaScrip 的一种扩展语法，它具有 JavaScript 的全部能力，我们还可在jsx代码中插入变量或者表达式，用jsx语法写出来的语句是一个对象，我们可以将它存为一个变量，这个变量作为ReactDOM对象的render方法的第一个参数。

🚗代码的演示

let lxy = <h1>Hello React!</h1>;
ReactDOM.render(
    lxy,
    document.getElementById('root')
)

🤣基本的语法示例：可以是嵌套结构，如果是嵌套结构，需要有唯一的一个外层标签。标签中如果是单个的标签，在结尾要加“/”,在jsx中可以通过“{}”插入变量，表达式或者函数调用。

<script type="text/babel">
    let iNum01  = 5201314;
    let sTr = 'lxyzhu292';
    function fnRev(a){
        return a.split('').reverse().join('');
    }    
    let el = (
        <div>
            {/* jsx注释定义方法 */}
            <h3>jsx语法</h3>
            {/* 插入变量及运算 */}
            <p>{ iNum01+5 }</p>
            {/* 插入表达式 */}
            <p>{ sTr.split('').reverse().join('') }</p>
            {/* 插入函数调用 */}
            <p>{ fnRev(sTr) }</p>
            {/* 插入三元运算表达式 */}
            <p>{ ok?'YES':'NO' }</p>                
        </div>
    );

    ReactDOM.render(
        el,
        document.getElementById('root')
    )

</script>

😀6.标签属性的方法： jsx属性的值建议用双引号,，class属性需要改成className，属性值如果是可变的用{} 的形式 标签如果是单标签结尾要加"/"。

{/* 定义class */}
<p className="sty01">用className css的样式</p>
{/* 单个标签，结尾要加“/” */}
<img src={images} />

😀7.使用行间写样式: 定义的方式是在{ }里面 将样式的属性写成对象的见值对的形式 带-的属性要用驼峰的形式。

<div style={{width:'200px',height:200,color:'yellow',backgroundColor:'#fff'}}>使用style的样式</div>

😀8.函数组件和参数的props：组件可以是一个组成页面的部件或者零件,有自己的结构和功能，多个组件拼接在一起就可以组成一个页面,组件最终返回是一个jsx的对象 ，组件的两种定义的方式：函数式定义还有一种是类定义。

😉8.1函数式定义的组件： 通过函数来定义一个组件，组件名称首字母要大写，函数可以接收一个props，props是一个对象，对象中的属性通过使用组件的时候传入，最终返回一个jsx对象。

// 定义不含props参数的组件
	function Isreact(){
    return <h1>Hello,web前端程序员欢迎来到我的博客</h1>
}

// 定义props参数的组件，props是一个对象，在使用组件时通过属性的方式传入
function IsreactName(props){
  return <h1>Hi, {props.name}</h1>;
}

😐8.1.1简单的写法： 函数可以用匿名函数赋值的形式，而匿名函数又可以改写成箭头函数的形式，props是一个对象，在传参时也可以使用解构赋值的形式，上面的两个组件可以改写成下面的形式：

const Isreact=()=> <h1>Hello,web前端程序员欢迎来到我的博客</h1>;
const IsreactName=({name})=><h1>Hello,{name}</h1>;

😀8.2组件的组合： 可以在一个组件内，拼装其他的组件，从而组合成一个更大的组件

function IsreactName(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <IsreactName name="Sara" />
      <IsreactName name="Cahal" />
      <IsreactName name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

😛9.生命周期: 组件在某个时刻会自动执行的方法.

😀9.1常用的方法:
constructor方法:组件的构造函数,组件初始化的时候会自动执行。
render方法:会在componentWillMount方法之后执行，也会在state和props的数据发生变化时执行，在组件开始会执行，在组件数据发生变化的时候也会执行。
componentDidMount方法：组件在挂载到页面之后，自动执行。
componentDidUpdate方法：组件更新之后执行。
componentWillUnmount方法：组件销毁之前执行。