React使用以及基础知识介绍

一、react介绍
    1.React 起源Facebook 2013年5月开源 是用于构建用户界面的javascript库。
    2.核心思想 ： 封装组件
        各个组件维护自己的状态和UI 当状态变更，自动重新渲染整个组件
        react包含 ：·组件 ·JSX ·Virtual DOM ·Data Flow
    3.react的理念是
        UI = render(data)
        React 实践的是“响应式编程”（Reactive Programming）的思想，这也是React为什么叫React的原因
    4.组件设计的原则：
        1.分而治之 的策略
            一个组件专注一间事情
        2.高内聚 低耦合
            高内聚 ： 把逻辑紧密相关的内容放在一个组件中 
            低耦合：不同组件之间的依赖关系要尽量弱化 ，也几乎是每个组件要尽量独立
二、开发环境搭建
    1. 全局安装脚手架
         $ npm install create-react-app -g
    
    2.通过脚手架命令安装 项目
        $ create-react-app <program-name>
    
    3.进去项目
        $ cd <program-name>
    4.启动项目
        $ npm start
    
    5.项目打包
        $ npm build
    
三、react语法
    1  组件格式
        eg： App.js 
             import React, { Component } from 'react';
             calss App extends React.Component {
                 constructor(props){
                     super(props);   // 父组件的参数
                     this.handClick = this.handClick.bind(this);  // 定义使用的事件
                     this.state = {   // 定义state (数据)
                         ... 
                     }
                 }
                 handClick(){
                     // code ... 
                 }
                 render(){  // 渲染函数
                     return (<div>hello world!</div>)
                 }
             }
             export default App;
    
    2  组件使用
      Page.js
        import React, { Component } from 'react';
             calss Page extends React.Component {
                 constructor(){
                     super(...arguments);
                     this.state = {
                         
                     }
                 }
                 render(){
                     return (<div>hello world!</div>)
                 }
             }
             export default App;
             
      App.js
          import React, { Component } from 'react';
          import Page from './Page';   // 导入组件
         calss App extends React.Component {
             constructor(){
                 this.state = { 
                     
                 }
             }
             render(){ 
                 return (
                     <Page />   // 渲染组件
                 )
             }
         }
         export default App; 
             
    3   渲染DOM
      App.js
        import React, { Component } from 'react';
        class App extends Component {
            render() {
                return (
                    <div>hello world!!</div>
                )
            }
        }
        export default App;
        
    4  样式书写
        <1 行内样式
            render(){
                return (<div style={ {fontSize:'20px',color:'#333'}}></div>)
            }