1-react（入门）

1-react

1. 依赖环境
   react一般在windows开发，依赖环境NodeJs,Npm.

2. 安装react和创建项目

   //安装react
   1):npm install -g create-react-app
   //创建项目
   2):create-react-app projectName
   //进入创建项目
   3):cd projectName
   //启动项目
   4)npm run start / npm start
   //成功启动之后，会自动跳转到浏览器中，显示项目的主页。
   

3. Yarn，类似npm，用于模块管理，在开发react，一般建议使用Yarn。

4. Yarn常用命令

   //查看Yarn是否安装成功
   1):yarn --version
   //初始化项目
   2):yarn init
   //下载产品依赖，并且选择版本
   3):yarn add xxx@xxx
   //下载环境依赖
   4):yarn add --dev xxx@xxx
   //更新依赖包
   5):yarn upgrade xxx
   //卸载依赖
   6):yarn remove xxx
   

5. react中的组件:是react中组成页面最小单元，可以是一个按钮，列表，模态框，页面，组件一般是特殊的自定义标签，这个标签中包含了若干个html标签

6. 组件如何定义
   通过函数定义组件，必须返回值，值为JSX。转换的时候需要babel和react-dom

   function List(){
   	return (
   	<ul><li></li><ul>
   	);
   }
   export default List;
   

7. 组件如何引用

   import List from ‘./List’
   <List />
   

8. JSX:JavaScript和xml的结合，页面的模板。直接在js中使用xml。

9. 1)文本渲染
   将变量的值绑定到对应的标签上
   {msg}
   2)组件之间的参数的传递,父组件在调用子组件的时候为子组件传递参数，子组件通过函数中的props获取参数，保存到对象中

   function List(props){
   	//props为父组件传递给子组件的参数对象
   	{
       		a:'',b:'',c:''
   	}
   }
   

   如果传递非字符串，用大括号{}

   <List a='aaa' b={3} c='true' d={[1,2,3,4,5]}/>
   

   3)列表渲染,遍历数组

   import React from 'react';
   import './List.css';
   function List(props){
       let {data}=props;
       return (
       <ul className="list">
          {
              data.map((item,index)=><li key={index}>{index},{item}</li>)
   
             // data.map(function(item){
              //    return <li>{item}</li>;
              //})
          }
   	</ul>
   );}
   export default List;
   

   4)：条件渲染

   	import React from 'react';
   	// 用户信息栏 参数user
   	function UserInfo(props){
   	    let {user}=props;
   	    if(user){
   	        return (
   	            <div>欢迎您{user.name}</div>
   	        );
   	    }
   	    return (
   	        <div>
   	            <a href="a.html">亲.请登录</a> 
   	        </div>
   	    );
   	}
   	export default UserInfo;