目录
2_用命令create-react-app (脚手架)创建项目目录demo1
this.state:react中用来控制组件内部状态的数据
9_jsx中几个要注意的地方:代码注释、css的class陷阱、html解析问题dangerouslySetInnerHTML属性、label标签的for
3.html解析问题的:dangerouslySetInnerHTML属性
10_react快速生成代码插件:Simple React Snippets
2.子组件操作父组件数据(实际上是父组件向子组件传方法):在子组件加上属性的形式。
①父组件向子组件传值 、子组件向父组件传值(父组件向子组件传方法)都是在子组件加上属性的形式实现的,然后通过this.props.属性名的方式访问。
React中,使用外部(被传入传入的)数据(通过 this.props 访问),被传入的数据可在组件中通过 this.props 在 render() 访问。
组件还可以维护其内部的有状态的数据(通过 this.state 访问)。
②调用方法时要绑定this指向,可以直接在调用处bind绑定,但是更好的是在组件构造函数内绑定,这样有助于性能优化。
14_react developer tools的安装与使用
2.react developer tools插件的三种状态
由于本学习笔记过长,图片较多,编辑器打字时有些卡顿,所以之后内容写在另一篇博客:
1_开发环境搭建
①前往http://nodejs.cn/,找到自己电脑适合的版本下载并安装node.js。
②win键+r(运行),cmd打开命令行。
输入相关命令检查node.js是否安装成功,显示nodejs与npm对应的版本即为安装成功。
安装node主要为了使用npm包管理工具。
③安装官方脚手架工具create-react-app。
若无法安装create-react-app(安装失败),
可尝试更换网络环境后重新安装,若还是失败,排除网络因素后,则以管理员身份运行cmd(命令提示符)后成功安装create-react-app
看到安装了91个包就表示安装成功。
2_用命令create-react-app (脚手架)创建项目目录demo1
创建失败:
解决方法:
同样以管理员身份运行cmd(命令提示符),重新输入命令create-react-app 创建项目demo1
成功用create-react-app创建demo1,可以看到demo1里面有许多脚手架生成的文件。
根据命令提示运行我的第一个react文件
3_通过组件化开发输出helloworld
把src目录里面的文件全部删掉,然后新建index.js(入口文件)与App.js(方法组件,React核心之一就是组件化开发)
入口文件index.js代码如下(用ReactDOM的render渲染语法把APP模块渲染到public\index.html中的root上):
import React from 'react' //要用react所以引入react
import ReactDOM from 'react-dom' //要操作dom所以引入react-dom
import App from './App' //组件化开发,有了App组件后就可以通过reactdom的render方法在public\index.html的rootID上渲染出来
ReactDOM.render(<App />,document.getElementById('root')) //用react语法把App组件render到index.html中id为root的标签上
注意此时index.js中的三句导入都是导入默认组件,React、ReactDOM、App这三个组件名都是自己取得,取ABC也可以,但是为了做到望文生义,以固定写法比较好。其中React、ReactDOM是导入默认组件,App是导入的自定义组件(必须以大写字母开头)。
组件App.js代码如下(React中自定义组件名必须以大写字母开头,例如本例的App组件必须大写字母开头,不然会报错):
import React,{Component} from "react"
// import React from 'react'
// Const Component = React.Component即import {Component} from 'react'
// 这里是es6解构赋值的写法,即Component等于React.Component
class App extends Component{
render(){
return (
<div>
Hello,EasyLee
<ul className='my_list'>
<li>{true ? 'i love coding' : 'i love eating' }</li>
<li>i love react</li>
</ul>
{/* 上述jsx代码相当于如下js代码:
var child1 = React.createElement('li',null,'i love coding');
var chidl2 = React.createElement('li',null,'i love react');
var chidl3 = React.createElement('ul',{className='my_list'},child1,child2); */}
</div>
)
}
}
export default App;//在index.js文件中要引用App组件所以最后要用export default暴露(输出)App组件。
在index.js文件中要引用App组件所以最后要用export default暴露(输出)App组件。
疑问:可以把import React,{Component} from 'react'中的Component改成a吗?
答:不能,Component是react的成员组件,react官方自己定义好的,所以不能锁边取一个名字。
public目录下模板文件index.html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>EasyLee WEB</title>
</head>
<body>
<noscript>需要开启JavaScript.</noscript>
<div id="root"></div>
</body>
</html>
有几点(①②③④)要注意:
①入口文件index.js与组件App.js导入的头部文件不同,:
入口文件index.js头部通常由三部分组成:导入react默认组件、导入ReactDOM、导入自定义组件。
②入口文件index.js与组件App.js导入的底部代码不同:
入口文件index.js下方把自定义组件(以App为例)通过ReactDOM.render渲染到index.html文件上。
自定义组件App.js底部要通过export default 语句导出。
index.js(入口文件):
import React from "react"//①要用react所以引入react
import ReactDOM from "react-dom"//②要操作dom所以引入react-dom
import App from "./App"//③导入自定义组件
ReactDOM.render(<App />,document.getElementById('root'))
App.js(自定义组件以App.js为例,底部要通过export default 语句导出):
import React,{Component} from "react"
// import React from 'react'
// Const Component = React.Component即import {Component} from 'react'
// 这里是es6解构赋值的写法,即Component等于React.Component
export default App;//底部导出自定义组件
③自定义组件名首字母必须大写,如App。
④牢记自定义组件的语法结构,以App.js组件为例:
import React,{Component} from "react"
class App extends Component{
render(){
return (
<div>
</div>
)
}
}
export default App;//底部导出自定义组件
4_JSX语法
JSX就是Javascript和XML结合的一种格式。React发明了JSX,可以方便的利用HTML语法来创建虚拟DOM,当遇到<
,JSX就当作HTML解析,遇到{
就当JavaScript解析.
import React,{Component} from 'react'
// import React from 'react'
// Const Component = React.Component即import {Component} from 'react'
// 这里是es6解构赋值的写法,即Component等于React.Component
class App extends Component{
render(){
return (
<div>
{/* Hello,EasyLee! */}
<ul className='my_list'>
<li>{true ? 'i love coding' : 'i love eating' }</li>
<li>i love react</li>
</ul>
</div>
)
// 上述jsx代码相当于如下js代码:
// var child1 = React.createElement('li',null,'i love coding');
// var chidl2 = React.createElement('li',null,'i love react');
// var chidl3 = React.createElement('ul',{className='my_list'},child1,child2);
}
}
export default App;
其中 createElement(a, b, c)方法用法如下:
①参数 a:表示元素的类型,比如:h1, div 等。
②参数 b:表示该元素上的属性,使用 JavaScript 对象方式表示。
③参数 c:表示该元素内部的内容(子元素),可以是文字,可以继续嵌套另外一个 React.createElement(a, b, c)
。
这种方法其实在实际 React 开发中几乎不会使用,因为可以直接用JSX语法 。
5_小姐姐服务页面(Xiaojiejie.js)编写
疑问:为何每个自定义组件都要引入React?
答:因为webpack在解析jsx的时候会把下面代码的Component解析成React.Component这个方法,假如他发现没有引入React,就会报错。
Xiaojiejie.js代码如下:
import React,{Component} from 'react'
class Xiaojiejie extends Component{
render(){
return (
<div>
<input /><button>增加服务</button>
<ul>
<li>服务1</li>
<li>服务2</li>
</ul>
</div>
)
}
}
export default Xiaojiejie;
在index.js中加入如下代码:
ReactDOM.render(<Xiaojiejie />,document.getElementById('xiaojiejie'))
在index.html中加入如下代码:
<div id="xiaojiejie"></div>
加入Xiaojiejie.js后运行效果如图所示:
问:由于React要求必须在一个组件的最外层进行包裹,如下图的光标处的div,不加就会报错,但是在Flex布局中,return内最外层包裹div会影响布局,Flex布局中最外层不能有包裹,这时候怎么办呢?
答:Flex布局中<div>由<Fragment>替代,不过记得要在头部多引入react的成员组件Fragment(注意成员组件Fragment的首字母是大写的,引入和使用Fragment标签时要注意):
import React,{Component,Fragment } from 'react'
class Xiaojiejie extends Component{
render(){
return(
<Fragment> {/*注意Fragment标签首字母大写*/}
<div>
<input />
<button>增加服务</button>
</div>
<ul>
<li>服务1</li>
<li>服务2</li>
</ul>
</Fragment>
)
}
}
6_React响应式设计原理与数据的绑定方法、增加服务项
React如此受欢迎的原因(React响应式设计原理):
React不建议直接操作dom,而是让你通过数据的改变从而自动帮你完成界面的改变,所以程序员无需关心dom操作只关心数据操作即可,大大加快了开发速度。
需求Z:
点击增加服务按钮就能在下方列表自动增加小姐姐的服务项(为了实现需求Z,需求