### react
### 什么是react ？
react是一个用于构建用户界面的javaScript库，很多人认为react是MVC中的V（视图）；
### react的特点：
高效、灵活、JSX、单项数据流、 声明范式编写方式、组件化开发
###react的优点：
它提高了应用的性能，可以方便的在客户端和服务器端使用，由于JSX ，代码的可读性很好，
react很容易与Meteor ,Angular等其他框架集成， 编写UI测试用例变得非常容易 ；
### 安装react的脚手架 可以从网上参考一下webpack
cnpm install create-react-app -g 只需要下载安装一次即可 ；
###创建项目
create-react-app 项目名（myapp）
###进入项目（todo）运行项目
npm start 或者在下载一个cnpm install yarn --save 后 输入yarn start 也可以启动项目
###简单介绍一下项目中的文件的含义及作用
.gitignore 忽略文件 node_modules 依赖管理 public静态资源 src是核心，写源代码的地方
###src文件夹中
App.js ： App组件
App.css ：App组件的样式
App.test.js : 测试文件
index.css ： 全局的样式文件
index.js ：入口文件
###引入文件
//--------下面的react的第一个字母要大写
import Reactfrom " react " ; //---->引入react模块
import " ./app.css " ; //---->引入样式文件
###导出文件
export default App ; //只能导出一次
export App 或{ App , To } ;//可以导出多次
###创建组件的方式 创建class名时要改成className，其他不变
1.函数的方式创建 //------------props是接受外部传入的参数
function App( ) {
return (
<div> 我是一个组件</div>
<Tp title = " 1111" >我是引入的组件</Tp>
)
}
================================================
function Tp( props ){//------------props是接受外部传入的参数
return (
<div>
{ props.title }
//------1111</div>
)
}
2.class类创建组件 在class中传递参数 要加个this
import Zi from " ./zi/zi.js " ; //----->引入zi.js文件到App.js主文件中
class App {
constructor( props ) {
super ( props ) ;
}
render( ) {
return (
< div >
< Zi title=" hello world "> < / Zi >
< / div >
)
}
}
export default App ;
============================================
import React from " react " ;
class Zi extends React.component { //---->Zi继承系统自带的父亲属性方法
constructor ( props ) {
super( props ) ;
}
render( ) {
return (
< div >
< p > this.props.title < / p > //------------>输出hello world
< /div >
)
}
}
###可用以上学到的做一个简单的todolist ,可以参考另一篇写的播客；
网友评论