react实例大众点评（1）webpack配置及jsx基础

react实例大众点评

webpack配置

Windows用户的修改package.json中的配置：start：set NODE_ENV=dev
搭建webpack环境1 - 学习目的
一、项目说明文档
项目的一些说明性文字可以写在根目录下的README.md文件中。如果项目比较复杂需要写的说明性文档比较多，可以新建一个docs文件夹，然后在文件夹里面创建README.md文件。

安装插件
一、保证node和npm的安装成功
一般在node安装完成之后自带的npm安装成功；
二、安装时–save-dev和–save的区别
①–save-dev是开发中需要使用的
②–save是开发和发布之后运行时都需要使用的；

使用官方脚手架
create-react-app
先要使用node安装工具npm安装create-react-app

---

介绍jsx

一、在render中返回节点的时候如果有多个相同的节点一定要有一个根节点
比如

Render（）{
 return(
    <div>
      <p>hello_word</P>
      <p>hello_word</P>
<p>hello_word</P>
</div>
)
}

如果没有根节点就会报错；
二、在render中返回的节点中的文本内容里面需要插入js内容（变量或者表达式），则需要用大括号包裹起来。
三、注释：需要在注释的内容外面添加大括号

四、className:即给标签定义类名，因为class是js的一个保留字，所以不能使用class，则改成使用className；

五、style={{color:’red’,fontSize:’20px’}}需要用双花括号包裹；

六、ECMA6中采用驼峰式命名：在css中采用横杠的命名方式，在这里要修改，比如：font-size：fontSize；margin-top：marginTop等等

---

jsx事件

举例说明:
①在需要使用事件的标签内调用事件；

<p onClick={this.事件.Bind（this）}>

在render方法的同级定义事件函数
Bind（this）的使用方法
Bind（this）是ECMA5中的一种使用方法
原因是：在事件函数中会使用this：比如this.setState()
那么这个this就是调用事件函数时的第一个this，如果在调用函数时不将这个this绑定，那么在事件函数中的这个this将会寻找不到对象，会报错。

---

jsx循环

定义一个数组arr=[“yangfang”,”liufang”]遍历

<ul>
  {
   Arr.map(function(item,index){
Return(
 <li key={index}>{item}</li>
);
}
  }
</ul>

同一个级别下通过循环返回的li;针对返回多个li,需要给每一个li添加不同的key,可以直接给key定义（react的建议）

---

jsx判断

在react中多使用三元表达式
A？B:C
表示：A表达式的结果为真则执行B表达式，A表达式的结果为假则执行C表达式

---

代码分离方案

代码分离的层级
第一层：页面层
Container：
放置各个页面的代码
每一个页面里面有入口文件index.js
每一页中还有一个subpage文件夹，这个文件夹中放置单个页的各个组件。
第二层：组件层
Component：存放不属于每一个页面私有的组件，基本每一个页面都会使用到的组件。

---

props和state

Props可以用于获取组件的初始值
State是在值首先被初始化以后，然后通过setState来重新设置组件的属性的值，然后调用state来不断地跟踪组件的属性值。让组件的属性值可以不断地更新。

---

智能组件和木偶组件

一、智能组件
就是私有的组件，只能被页面单独使用
放在container组件层
二、木偶组件
就是公有的组件，是很多的页面都需要是用的。
放在component组件层。