React基础技术点与JSX语法_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