React总结-01-CSDN博客

本文链接：https://blog.csdn.net/lsk_shah/article/details/131818805

文章介绍了如何使用npxcreate-react-app创建React应用，然后通过修改主要入口文件并使用JSX进行渲染。讲解了useState钩子在管理组件状态中的作用，鼓励实践驱动学习，不必追求完美，可以从实现小功能开始，逐步优化代码。

摘要由CSDN通过智能技术生成

要点

create app use npx and lanch
folder File structure and main entry point in react
what is jsx
useState

npx create-react-app my-app
cd my-app
npm start

开始你的第一个react程序

删除除了index.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


const [num, setNum] = useState(0)

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

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

感悟：

学编程不能执着于把所有知识点都学了才敢写，因为长时间的学习得不到反馈的话人会没有动力，没有动力的话很难学会东西，也很容易中途放弃，反复重新开始学习
其次其实也不要需要学会全部知识点，因为百分之七八十可能就用不上，作为一个后端开发来说，深刻的体会到在日常的开发工作中用到的api或者技术其实就那么几点，完美主义更是不可取，甚至先写出烂代码，在一步步去优化才是更加符合人类的步骤，不要害怕写出烂代码
先想想自己想要实现什么功能，哪怕是一个很小的需求，哪怕不会写css，先把最基础的想法实现出来，不要苛求自己
另外不要焦虑，作为一个程序员是有很多东西给要学的，东西是学不完的，而且有些东西用的时候再去查也没关系，例如正则表达式， css样式