React总结-01

要点

  • create app use npx and lanch
  • folder File structure and main entry point in react
  • what is jsx
  • useState
shell 复制代码
npx create-react-app my-app
cd my-app
npm start

开始你的第一个react程序

删除除了index.js其他文件

js 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <h1 style={{ textAlign: 'center' }}>hello world</h1>
);

如何渲染:
const root = ReactDOM.createRoot(document.getElementById('root'));

获取要挂载的dom对象

你的整个react App 就挂载这个dom上
ReactDOM.createRoot()

包装为一个react对象

调用render函数,参数是一个jsx

jsx 简单来说就是用js写html, 当然这种语法其实是一种语法糖,个人觉得jsx是一种非常自然的方式来创建组件

对于组件来说,一个很重要的问题是如何管理变化

在react里可以使用useState

js 复制代码
const [num, setNum] = useState(0)

当我们需要管理一个变化点的时候可以使用useState函数来创建,入参是一个初始状态, 返回状态和设置状态的函数

当需要改变num值的时候需要调用setNum来重新赋值,此时组件会重新渲染

感悟:

学编程不能执着于把所有知识点都学了才敢写,因为长时间的学习得不到反馈的话人会没有动力,没有动力的话很难学会东西,也很容易中途放弃,反复重新开始学习

其次其实也不要需要学会全部知识点,因为百分之七八十可能就用不上,作为一个后端开发来说,深刻的体会到在日常的开发工作中用到的api或者技术其实就那么几点,完美主义更是不可取,甚至先写出烂代码,在一步步去优化才是更加符合人类的步骤,不要害怕写出烂代码

先想想自己想要实现什么功能,哪怕是一个很小的需求,哪怕不会写css, 先把最基础的想法实现出来,不要苛求自己

另外不要焦虑,作为一个程序员是有很多东西给要学的,东西是学不完的,而且有些东西用的时候再去查也没关系,例如正则表达式, css样式

相关推荐
知识分享小能手14 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
gnip10 小时前
JavaScript事件流
前端·javascript
小菜全10 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json