React

React

React Js引入

<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/browser.min.js"></script>
<script type="text/babel"></script>

顺序不要改变

ReactDOM.render() 将React元素渲染到DOM节点中 第一个值是被添加的元素，第二个值是被绑定的要添加的元素

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')//需要在页面上添加被绑定的元素
);

jsx

说明：JSX 一种 JavaScript 的语法扩展

可以任意地在 JSX 当中使用JavaScript 表达式，在 JSX 当中的表达式要 包含在大括号里，标签必须要被结束

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

模块和组件

理解：向外供特定功能的js程序，一般就是一个js文件（减少代码重用）

作用：复用js，简化js的编写，高js运行效率

模块化： 当应用的js都以模块来编写的，这个应用就是一个模块化的应用

组件

理解：用来实现特定（局域）功能效果的代码集合（html/css/js）

作用：复用编码，简化项目编码，高运行效率

组件化

当应用是一多组件的方式实现，这个应用就是一个组件化的应用， 相当于页面的拆解，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此 独立。

优点

1.高代码复用率：组件将数据和逻辑封装，类似面向对象中的类；
2.降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试；
3.降低代码复杂度：直观的语法ᨀ高代码可读性

react中插入组件

函数式(组件名称首字母必须大写，return一段内容)

const Welcome = （） => {
    return <h1>xxxx</h1>
    }
const element = <Welcome/>
ReactDOM.render(
    element,
    document.getElementById('root')
)
}

class方式定义组件

class Main extends React.Component{
    render(){
        return( 
        <div>
        <h1>TO DO LIST</h1>
        </div>
}
ReactDOM.render(
        <Main></Main>,
        document.getElementById('root')
    )