当前位置:   article > 正文

React基础技术点与JSX语法_jsx 如何用theme

jsx 如何用theme

1.核心技术点

  • create-react-app脚手架
  • 组件化思维
  • JSX
  • 开发调试工具
  • 虚拟DOM
  • 生命周期
  • React-transition-group
  • Redux等

2.基本知识

reactJS——网页

react native——原生app

react vr——开发vr全景应用

react 16版本之后的内容可以称之为React Fiber强调优先级

3.开发环境搭建

(1)引入.js文件使用React【性能低,维护性差】

(2)通过脚手架工具来编码

【脚手架:前端开发过程中的辅助工具,自动构建开发流程和目录,允许以一定的方式实现js的相互引用,使使用者更方便的对项目进行管理】

在脚手架中写的代码不能直接运行,需要脚手架工具进行代码的编译,编译出的代码才可以让浏览器直接运行

我们通常借助grunt、gulp、webpack帮助我们编写脚手架。

官方提供的脚手架工具:Create-react-app

(3)安装流程

npm install -g create-react-app //安装脚手架工具
create-react-app my-app//创建react项目
cd my-app
yarn start
  • 1
  • 2
  • 3
  • 4

(4)工程目录简介

cd my-add
npm run start //脚手架工具分析源代码,启动服务器运行源代码
  • 1
  • 2

这里写图片描述

  • yarn.lock : 项目依赖的安装包的版本号

  • README.md : 项目的说明文件【自行修改成自己项目的内容】

  • package.json : node的包文件,有项目介绍【之所以npm run start可以启动项目,是因为在此文件中的scripts下有: "start":"react-scripts start"

  • .gitignore : 不想传到git仓库中,则将文件名写到此文件中

  • node_modules : 项目依赖的包

  • public

    • favicon.ico 网站图标
    • index.html 项目首页的html模板
    • manifest.json 定义此网页如果当成app使用,就可以把它存储在桌面上【PWA理念】
    • icons : 定义图标
    • start_url : 定义网址
    • theme_color : 主题颜色
    • 等…
  • src : 项目的源代码

    • index.js 整个程序运行的入口文件

      • react设计理念是:all in js 故:import ‘./index.css’引入css文件

      • import App from ‘./App’相当于引用App.js文件

      • import registerServiceWorker from ‘./registerServiceWorker’:registerServiceWorker也是一个文件

      前端流行说法PWA progressive web application理念:通过写网页的形式写手机的app应用

      引入registerServiceWorker就是用于写网页从而写手机应用的功能,作用:帮助把之前浏览的网页存储于浏览器之内,下一次即使没有网络也可以浏览该网页

    • App.js 组件文件

    • logo.svg 只是用于生成一个图片

    • App.test.js 自动化测试文件

4.react中的组件[前端组件化]

  • 定义组件

    • import { Component } from ‘react’ 【es6解构赋值】

    等价于

    import React from ‘react’;

    const Component = React.Component;

    class App extends Component{…}

    • 或class App extends React.Component{…}
  • 返回组件渲染的内容[显示的内容]

    • render(){return (…);}
  • 导出组件

    • export default App;
  • 引入组件

    • import App from ‘./App’
  • 利用ReactDOM组件将组件挂载到页面DOM上

    • ReactDOM.render(,document.getElementById(‘root’));

    将App组件挂载到id为root的节点下

    上述代码由于使用<App/>而不是App,故是JSX语法,使用JSX语法就必须引入React 即 import React from 'react'

5.JSX语法

​ 在js中使用html标签或自己定义的标签

​ 在JSX语法中,如果我们要使用我们自己创建的组件,直接使用组件名的标签名即可

注意:JSX的组件名第一个字母必须是大写

​ 故如果看到大写字母开头的标签,通常是组件;小写字母开头的标签,通常是html标签

注意:在JSX语法中,要求一个组件render函数返回的内容,外层必须有一个包裹元素

eg.
import React ,{Component}from 'react';
class TodoList extends Component{
    render(){
        return(
            <div><!-- 外层有一个元素包裹 -->
                <input type="text"/><button>提交</button>
                <ul>
                    <li>学英语</li>
                    <li>Learning React</li>
                </ul>
            </div>
        )
    }
}
export default TodoList;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/138987
推荐阅读
相关标签
  

闽ICP备14008679号