Scribd Logo
Upload

Welcome to Scribd!

  • React Note

    Uploaded by

    Jiaqi Wu
    8 views4 pages
    frontend

    Original Title

    React note

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    frontend

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views4 pages

    React Note

    Uploaded by

    Jiaqi Wu
    frontend

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    企业级开发框架

    JavaEE spring
    javase servlet/jsp jdbc => ssm (springboot/maven...)

    React Facebook （RN）


    ES6 解决方案
    vue 尤雨溪, todolist
    github ...
    python
    学习选课系统 star 2k
    AngularJS Google

    前后台分离开发
    后台：
    springboot ssm 框架，swagger 暴露接口,不再 jsp
    前端
    html/css/js
    jQuery (dom 操作、ajax)
    弊端
    代码复用率低
    学生、教师、课程、选课
    DOM 操作过多，类似重复【封装】
    组件
    模态框、表格、列表、地址选择器、日期选择器

    基于 MVC 思想的框架 (后台主导开发，数据库、业务，视图)


    servlet/jsp;springmvc/jsp ;struts2/jsp;c#/asp;Express/jade
    页面在服务器端渲染完成(html)，在浏览器中打开（html）
    m
    model
    POJO 类 Student
    v
    view
    jsp
    jstl 标签库
    ${stu.name}
    c
    controller
    request.setAttribute('stu',studnet)
    请求 -> 页面（view）
    easyui/extjs/jquery/echarts

    基于 MVVM 思想的框架
    m
    model
    js 对象，js 数组
    v
    view
    html/组件
    vm
    viewmodel
    数据单向绑定
    双向数据绑定（表单）

    jstl
    List<Student> list
    <ul>
    <li c:forEach='item in list'>
    ${item.name}
    </li>
    <ul>

    Java 开发阶段
    eclipse -> web project -> 框架整合（jar）-> 手动部署 tomcat
    ====>
    springboot-cli(start.spring.io)
    -> 写代码
    -> 调试

    创建项目结构 html/css/js/images
    -> 编写代码 es5
    -> 手动部署到 apache
    -> 访问测试
    =====>
    cordova
    $ npm install -g cordova
    1. 安装 create-react-app
    $ npm install -g create-react-app
    2. 使用 create-react-app 创建 react 项目
    $ create-react-app app01
    app01/
    package.json
    node_modules
    build 产品代码
    index.html
    static
    src 源代码（es6）
    webpack/babel
    3. 启动
    $ cd app01
    $ npm run start

    yarn
    与 npm 类似，用于模块管理。
    react 项目中一般建议使用 yarn

    > npm init


    > npm install
    遍历 package.json 文件中的所有依赖，依次进行安装
    > npm install xxx@xxx
    安装指定版本的模块
    > npm install --save xxx
    产品依赖
    > npm install --save-dev xxx
    环境依赖
    > npm install -g xxx
    全局安装
    > npm uninstall xxx
    > npm run xxx
    运行指定命令，package.json script
    npm start / npm run start
    安装 yarn
    > yarn --version
    > yarn init
    > yarn add xxx@xxx
    产品依赖
    > yarn add --dev xxx@xxx
    环境依赖
    > yarn upgrade xxx
    > yarn remove xxx

    1. 分析项目
    index.html
    <body>
    <div id="root"></div>
    </body>

    index.js
    引用 App
    将 App 插入到 root 中

    ReactDOM.render(<App/>,root)
    2. 组件
    组件是 react 中页面元素的最小单元，可以是一个按钮，也可以是一个列表，可以是一个模态框，还可以是一
    个页面。组件一般是特殊的自定义标签，这个标签中可能包含了若干个 html 标签
    1) 组件如何定义？【自定义列表组件】
    1. 通过函数定义组件
    function List(){
    return (
    <ul>
    <li>one</li>
    <li>two</li>
    </ul>
    );
    }
    export default List;
    2) 组件如何引用？
    import List from './List'
    <List/>
    3) 组件传值
    父组件在调用子组件的时候为子组员传递参数
    App.js
    <List a="" b="" c=""/>
    子组件通过函数中的 props 属性获取传递的参数
    function List(props){
    props 为父组件传递给子组件的参数对象
    {
    a:"",
    b:"",
    c:""
    }
    }
    如果要传递非字符串的参数，需要使用大括号
    <List a='aaa' b={3} c={true} d={['terry','larry','tom']}/>

    3. JSX
    Javascript XML ,在 javascript 中可以直接使用 xml
    1) 文本渲染
    将变量的值绑定到对应的标签上
    {msg}
    2) 列表渲染
    将集合遍历输出
    <ul>
    data.map(function(item,index){
    return <li key={index}>{item}</li>
    })
    </ul>
    3) 条件渲染
    // 用户信息栏 user
    function UserInfo(props){
    let {user} = props;
    if(user) {
    return (
    <div>
    欢迎您 {user.name}
    头像
    </div>
    )
    }
    return (
    <div><a href="#">亲，请登录</a></div>
    )

    --------------------
    代码：
    https://github.com/pluslicy/bt4-react-app.git

    You might also like