React基础学习-React介绍与脚手架创建项目

React介绍

一个专注于构建用户界面的 JavaScript 库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内是最流行的js前端框架，最新版本已经到了18，加入了许多很棒的新特性

React英文文档（https://reactjs.org/）

React中文文档 （https://zh-hans.reactjs.org/）

React新文档（https://beta.reactjs.org/）（开发中....）

React有什么特点？

1. 声明式UI（JSX）

写UI就和写普通的HTML一样，抛弃命令式的繁琐实现         what & how

2. 组件化

组件是react中最重要的内容，组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性。

3. 跨平台

 react既可以开发web应用也可以使用同样的语法开发原生应用（react-native），比如安卓和ios应用，甚至可以使用react开发VR应用，想象力空间十足，react更像是一个 元框架  为各种领域赋能

环境初始化

目标：能独立使用React脚手架创建一个项目。

1. 使用脚手架创建项目 create react app

• 打开命令行窗口
• 执行命令

• npx create-react-app react-demo1

  说明：

• 1. npx create-react-app 是固定命令，create-react-app是React脚手架的名称
  2. react-demo1表示项目名称，可以自定义，保持语义化
  3. npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app

       启动项目

yarn start
or
npm start

项目目录说明调整

• 目录说明
  • src 目录是我们写代码进行项目开发的目录
  • package.json  中俩个核心库：react 、react-dom
• 目录调整
  • 删除src目录下自带的所有文件，只保留app.js根组件和index.js
  • 创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可
• 入口文件说明

• // React：框架的核心包
  // ReactDOM: 专门做渲染相关的包
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  // 引入全局样式文件
  import './index.css';
  // 引入根组件
  import App from './App';
  // 把App根组件渲染挂载到#root位置上
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
      <App />
  );