为什么要使用React框架？
起初的前端，一个页面可能要引用多个css样式文件或者js脚本文件，但是由于样式名称或函数名可能存在重复，而且样式和函数都是全局变量，所以容易造成混乱，不利于页面修改也不利于代码复用。
react框架通过用JS来写HTML和CSS实现代码组件化，消除了全局变量带来的危害，方便修改和代码复用。
react install
- 首先确保电脑上安装了node。
可以用如下方法测试是否安装了node(windows环境)：
- 打开cmd，输入
node -v,如果显示了相关版本信息，说明node已安装 - 在cmd中输入
npm -v,如果显示了相关版本信息，说明npm已安装。
- 安装react
npm install -g create-react-app
3.新建react项目
create-react-app my-app
- 查看react是否正确安装
cd my-app
npm start
ES6语法
- class 是ES6定义类的关键词。
- 当要引用多个类或者函数时，除第一个类或函数，其余都写在花括号内
- extends 是ES6定义 继承 的关键词，后面跟着要继承的父类。
- export 表示导出，单个函数/类在文件尾部加上
export default（默认导出）+ 类/函数名；多个函数或类导出时，要用export {class1，class2}导出，否则类/函数 不可被其他文件调用。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Hello React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
什么是JSX？
JSX是JavaScript Xhtml 的简写。
Xhtml 相较于其他html，语法要求更为严格。
例如：所有标签必须闭合，单个闭合标签尾部必须写/。
<h1> </h1>
<img />
JSX语法
- 所有标签必须闭合，单个闭合标签尾部必须写/ ；
- 由于html关键词与JSX关键词冲突，在JSX代码中用className代替class，htmlFor代替for ；
- JSX代码执行规则：遇见<>时，用html语法解析，遇见{ }用js语法解析 ;
- render表示渲染，render是Component下的方法，此处是重定义render方法 ;
- return 后的内容必须写在小括号内,括号里的内容必须是一个闭合的标签 。
- 在JSX中我们通常是通过 {} 的方式插入值，但是设置style属性需要{{ }} ,否则系统会报错。
import classes form './myCss.css'
{/*JSX 中的注释方式*/}
{/*style属性必须使用 {{}} */}
<div style={{width: 20px; height=30px}}>
{ props.text }
</div>
{/*html class属性*/}
<div className="myClass"></div>
{/*html input标签, JSX中所有的标签都必须有闭标签*/}
<input type="text" />
{/*html label标签 */}
<label htmlFor="name" class="mayName"></label>
{/*调用.css 文件中的css属性, mycss 为css文件中的类*/}
<div className={classes['mycss']}></div>
react语法
- React 要求class 类名首字母必须大写，否则无法渲染 ;
- Component 是React的组件，所有自定义的React组件必须继承Component ;
部署React应用到python-django生产环境
- 运行
npm run build将会在 build 文件夹中创建一个编译好的应用， - 将
build文件夹下的static下的css和js添加进django工程文件中的statics文件夹下； - 将
build文件夹下的index.htm文件复制到templates文件夹中； - 在django
views文件夹下创建新的视图函数并添加一个链接 ； - 在django settings文件下添加
STATIC_URL = '/statics/'设置读取静态文件的路径。
在React中添加样式
方法一：导入css文件
- import CSS文件
import "./App.css"; - 在React代码中设置标签属性来添加样式，属性名为className ，属性值为css文件中对应的样式名。
Html 块级元素和行内元素
区别：默认在一行内显示的元素是行内元素，默认分行显示的元素是块级元素
转换：在CSS样式中，通过 display属性进行转换，属性值block表示块级元素，属性值inline表示行内元素
import "./App.css";
class App extends Component{
render(){
return(
<div>
<h1>Hello {"Word"}</h1>
<form>
<input type="text" placeholder="name" className="button"/>
<input type="password" placeholder="password" className="button"/>
<input type="button" value="submit" className="button"/>
</form>
</div>
)
}
}
方法二：内联样式
- 在类/函数的方法内，创建一个新的dict变量，以key-value的形式保存样式。
- 此dict变量名，必须用驼峰式命名，不能用连字符。
- value值必须为字符串；
- 在同个类/函数的方法的return括号内，直接在<>内引用样式
style={button}
class App extends Component{
render(){
let button = {
display:"block",
border:"solid 2px red",
color:"white",
backgroundColor:"grey",
}
return(
<div>
<h1>Hello {"Word"}</h1>
<form>
<input type="text" placeholder="name" style={button} />
<input type="password" placeholder="password" style={button}/>
<input type="button" value="submit" style={button}/>
</form>
</div>
)
}
}
方法三：CSS in JS
- 安装styled-components：
在cmd内输入npm install styled-components
(必须是局部安装，如果加上-g 全局安装npm install -g styled-components，就无法找到这个模块) - import sytled
import styled from "styled-components" - 在类/函数的方法内，用关键字
const直接定义一个常量，常量名首字母必须大写，等号右边styled.+ 标签名 + ```（一对反引号），在反引号内直接写css样式代码 - 在类/函数的return括号内，直接以常量名作为组件来使用，可以在组件内增加属性（组件其实就是用JS写的自定义标签）。
import styled from "styled-components"
class App extends Component{
render(){
const Input = styled.input`
display:block;
border:solid 2px red;
color:red;
background-color:yellow
input:hover{background-color:blue}
`
let button = {
display:"block",
border:"solid 2px red",
color:"white",
backgroundColor:"grey",
}
return(
<div>
<h1>Hello {"Word"}</h1>
<form>
<input type="text" placeholder="name" style={button} />
<input type="password" placeholder="password" style={button}/>
<Input type="number" />
<input type="button" value="submit" style={button}/>
</form>
</div>
)
}
组件react和setState
- 在react中，属性值不能修改，要在类的顶部初始化
this.state的值
constructor () { //函数constructor()类同于django里的def __init__():{}
super() //The super keyword is used to access and call functions on an object's parent.
this.state = { isLiked: false } //以dict形式初始化this.state值。this类同于django里的self
}
- 方法中，当要修改this.state属性值时，要用关键字
this.setState
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked // ‘！’表示逻辑“非”
})
}
- 三元表达式
function three(x){
if (x){
return 1
}else{
return 2
}
}
等同于
function four(x){
return x?1:2
}
React中props的用法？
- 在React中，需要改变的值用this.state来定义；不需要改变，只需要传参的值用this.props来定义。
- “this."是在ES6语法类中的定义，相当于python中类中的“self”
- 调用React组件时，要给组件传参
<Ctable hea={hea} colu={colu} />
如何在React里跨文件调用组件？
- 在文件顶部
import要调用的组件及来自的文件。
例如：import Ctable from "./static/css_table.js" - 在组件内引用外部组件时，只需要以
< componentName 参数名称={具体数据} />格式就可以
例如：<Ctable hea={hea} colu={colu} />
