react 从0-1

为什么使用/学习React

1.简单易用
2.开发迅速
3.有大公司背书–facebook
4.很受欢迎–开源star比较多

什么是React

用于构建用户界面的JavaScript库

特性:

1.声明式编程
声明式编程:通过代码告诉计算机,你想要的的式什么,让"计算机"想出如何去做.
命令式编程(对比):用代码告诉"计算机"去做什么.

2.组件化
3.一次学习,随处编写

• React DOM 编写前端页面
• React Native 编写app
• React electron开发PC端应用
• React 360 编写VR界面
• React Taro来开发小程序

从零开始搭建

Create React App 简称CRA,是React官方提供的脚手架工具(多看官方英文文档)

1. 打开cmd 输入 (新建项目)

npx create-react-app helloworld;
// helloworld 是项目名称

2.把src下的文件都删除,只留下index.js(方便学习)
react项目没有暴露 webpack打包相关的配置文件,这是因为CRA把相关配置统一收口在了CRA的依赖里面,这样就导致无法修改打包配置,如果有修改webpack的场景,可以运行npm run eject命令,来将打包配置暴露到项目里,就可以随便修改了.但是ejeci命令不可逆;所以一般使用customize-cra;

package.json里面

3.删除index.js里的代码,并键入

import React from 'react'
import ReactDOM from "react-dom";

const element = <h1>hello world !</h1>;

ReactDOM.render(element, document.getElementById("root"));

4.保存 运行一下npm start ;运行成功
5.为了更好的开发体验,还要再配置一下VSCode Debug功能

• 新建一个.vscode文件夹
• 文件夹下新建launch.json
• 键入代码

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Chrome",//配置名称
        "type": "chrome",//启动的浏览器
        "request": "launch",//启动方式
        "url": "http://localhost:3000",//启动后访问的地址
        "webRoot": "${workspaceRoot}/src",//项目源代码所在目录
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"//sourcemap所在目录
        }
      }
    ]
}

JSX

JSX:JavaScript的语法扩展
React Element是不可变的对象
为什么使用jsx:(官方解释)
一个页面或者组件的渲染逻辑应该与其他UI逻辑放在一起:比如像事件的绑定,状态改变后渲染内容的变化.

f(data) = UI data不变 ui就不变