zoukankan      html  css  js  c++  java
  • React和JSX基础

    脚手架工具

    选用react官方推荐的脚手架工具create-react-app

    安装npm install create-react-app -g

     

    项目初始化步骤

    1、在github上创建一个项目仓库:首页 > new

    2、将github上创建的仓库clone到本地:git clone git@github.com:startjcu/react-demo.git

    3、使用脚手架工具初始化项目:create-react-app react-demo

    4、进入项目,进行初始化提交:cd react-demo/、git add .、git commit -m 'react initial'

    5、将本地代码推送到远程仓库:git push

     

    项目结构

    public > index.html 主页

    src > index.js 程序入口

    registerServiceWorker,用来实现PWA,Progressive Web App渐进式网页应用,初次访问后,断网也能访问

    public > minifest.json用来定义实现了PWA的网页当作App使用时的展示样式等内容

    资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

    React中的组件

    组件:页面上的一部分,将一个大的网页拆分成很多小的部分,前端组件化

    import React, { Component } from 'react'
    //JSX语法,必须使用React才能实现编译
    class App extends Component {
        render() {
            return <div>hello world</div>
        }
    }
    
    export default App
    

    将组件挂载到DOM节点下

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

     

    JSX语法基础

    JavaScript + XML

    直接在JS文件中写H5标签;可用标签写自定义组件,必须以大写字母开头。

    在JSX中写JS代码,用{}包裹,在页面中实现逻辑操作;写注释:{/**/}。

    标签属性与JS关键字冲突处理:用className代替class,用htmlFor代替for。
    dangerouslySetInnerHTML={{__html:item}}属性用于将输入的html标签进行转义。

  • 相关阅读:
    浅谈iOS7 AVFoundation 二维码扫描
    使用ZBarSDK生成和读取二维码
    NSURLConnection与NSURLSession大比拼
    iOS开发------之runtime的运用-类与对象&&&获取当前网络状态
    XML之解析------使用NSXMLPaser(SAX)和GDataXML(DOM)
    Beta阶段项目总结
    星光小组第二阶段团队绩效
    第二阶段冲刺第十天
    第二阶段冲刺第九天
    第二阶段冲刺第八天
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14132659.html
Copyright © 2011-2022 走看看