react--入门

在构建react项目中，一般包含：

　　文件夹source：包含了项目中所有的js模块

　　index.html：主文件页面，几乎是空的或者提供一个div主要用来包含其他的项目组件

　　package.json：包含了项目所需要的所有依赖包

　　打包或者构建项目的工具：一般使用的是webpack

但是现在一般使用的都是快速开发react

　　npm install -g create-react-app

　　create-react-app projectname

　　cd projectname

　　npm start

能快速搭建项目目录

为了使项目的组织性和更好的维护和添加新功能，应该将组件放在单独的js文件中

1.基本写法：

　　(1)

import React from 'react';

class Login extends React.Component{
    render(){
        return(
               <div></div>
        )
    }
}

export default  Login;

　　(2)

import React,{Component} from 'react';

class Login extends Component{
    render(){
        return(
            <div><div>
        )
    }
}

export default  Login;

 2.使用变量：

import React from 'react';

class Login extends React.Component{
    render(){
       let name='React';
        return(
           <div>Hello,{name}</div>
        )
    }
}

export default  Login;

3.Props: 数据从父组件传递到子组件，props是组件私有的，是不能被改变的，是有父级控制的

 this.props.参数名：获取通过属性传递的参数

import React,{Component} from 'react';

class Parent extends Component{
    render(){
        return(
            <div>
                <ul>
                    <Child name='张良' age='17'></Child>
                    <Child name='韩非' age='24' ></Child>
                    <Child name='卫庄' age='20' ></Child>
                </ul>
            </div>
        )
    }
}

class Child extends Component{
    render(){
        return(
            <li>姓名：{this.props.name}--年龄：{this.props.age}</li>
        )
    }
}

export default Parent

this.props.children：获取该组件内部的全部内容

import React,{Component} from 'react';

class Parent extends Component{
    render(){
        return(
            <div>
                <ul>
                    <Child name='张良' age='17'>儒家三叔公</Child>
                    <Child name='韩非' age='24' >韩国九公子</Child>
                    <Child name='卫庄' age='20' >流沙领导人</Child>
                </ul>
            </div>
        )
    }
}

class Child extends Component{
    render(){
        return(
            <li>姓名：{this.props.name}--年龄：{this.props.age}--{this.props.children}</li>
        )
    }
}

export default Parent

 4.父组件数据传递到子组件及其下级demo:

　　注意事项：

　　1.在提取公共组件时，组件应该很小，一个组件只做一件事，当此组件变大的时候就应该考虑将它拆分成更小　　的单元

　　2.根据项目的布局和线框图，决定组件之间的层次结构

　　3.提取组件，趋向于分离出代表数据模型的部分

5.state：数据动态交互