react入门到实战 学习笔记1 搭建

一、React是什么

一个专注于构建用户界面的 JavaScript 库,和vue和angular并称前端三大框架

React有什么特点

1- 声明式UI(JSX)

写UI就和写普通的HTML一样,抛弃命令式的繁琐实现

2- 组件化

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

3- 跨平台

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

二、环境初始化

使用React脚手架创建一个react项目

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

bash 复制代码
npx create-react-app 项目名字
如:npx create-react-app react-basic

npx create-react-app 是固定命令,create-react-app是React脚手架的名称

react-basic表示项目名称,可以自定义,保持语义化

npx 命令会帮助我们临时安装create-react-app包,然后初始化项目完成之后会自自动删掉,所以不需要全局安装create-react-app

启动项目

bash 复制代码
$ yarn start
or
$ npm start

三、项目目录说明调整

目录说明

1、src目录是我们写代码进行项目开发的目录

2、package.json 中俩个核心库:react 、react-dom

目录调整

删除src目录下自带的所有文件,只保留app.js根组件和index.js

创建index.js文件作为项目的入口文件,在这个文件中书写react代码即可

入口文件说明:

javascript 复制代码
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件App
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

但是,实操需要修改,删掉严格模式节点,会影响useEffect的执行时机(React18问题说明)

javascript 复制代码
//React:框架的核心包
//ReactDOM:专门做渲染相关的包
import React from 'react';
import ReactDOM from 'react-dom/client';

//应用的全局样式文件
import './index.css';
//引入根组件
import App from './App';
//渲染根组件APP到一个id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
)
//严格模式节点需要去掉
//会影响useEffect的 执行时机
//root.render(
 // <React.StrictMode>
 //   <App />
 // </React.StrictMode>
//);

结构搭建好了,可以开始下一步学习 jsx

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT3 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
努力的小雨5 小时前
点我!1分钱获取你的专属表白网页,浪漫由大模型代运营
经验分享·ai智能
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
巴伦是只猫5 小时前
【机器学习笔记Ⅰ】13 正则化代价函数
人工智能·笔记·机器学习
伍哥的传说5 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
好好研究6 小时前
学习栈和队列的插入和删除操作
数据结构·学习
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端