编程导航会员会员
登录/注册

学React的第一天

创建项目

npx create-react-app my-app //my-app项目名


组件


编写

import React from 'react';

export default function HelloComponent (){
return (
<div>
HelloWord
</div>
);
}

/* 与上面导出方法作用相同
const WordComponent = () => {}
export default WordComponent
*/


引入

import React,{useState} from 'react';
import WordComponent from "./WordComponent";

export default function HelloComponent (){
return (
<div>
<WordComponent/>
</div>
);
}


传参


传递

import React from 'react';
import WordComponent from "./WordComponent";

export default function HelloComponent (){
return (
<div>
<WordComponent
person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
/>
</div>
);
}
person只能有一个值，所以需要用里边的{}


使用

import React from 'react';

export default function WordComponent({ person }) {
return (
<div>
{person.name}
{person.imageId}
</div>
)
};
注意函数的形参{ person }
使用时，如果是对象，就必须直接用person. 的方式
也可以使用const { name, imageId } = person


动态视图

import React,{useState} from 'react';

export default function HelloComponent (){
const [Hello, setHello] = useState('Hello')

const set = () => setHello('hello')

return (
<div>
{Hello}
<button onClick={set}>设置Hello</button>
</div>
);
}
useState 用来修改动态的值
Hello是变量，setHello是函数，用来修改Hello 的值


样式

.word{
font-size: 100px;
}


外链

import React from 'react';
import "./Word.css"

export default function WordComponent() {

return (
<div className='word'>
Word
</div>
)
};
通过className设置div 的类名，直接引入样式即可


行内

import React from 'react';

export default function WordComponent({ person }) {

const Style = {
fontSize: '20px'
}

return (
<div className='word' style={Style}>
Word
</div>
)
};



0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
非常喜欢
非常喜欢
等级
内容推荐
更多
Day 21✅ 今天做了：AI 大模型八股面试通关120问；解决项目部署Redis连接失败问题。⏰ 明天计划：AI 大模型八股面试通关120问；算法训练；项目答疑。📚 今日感悟：秋招陆续开启，时间已经不多了，要继续加油。
1
由于个人老是磨洋工，做AI智能体总是磕磕绊绊，目前刚起步不久刚学到RAG部分，为了提高效率故接受打卡的监督Day 1✅ 今天做了：RAG实战⏰ 明天计划：把RAG部分看完实践并理解完一遍，完成常规化笔记记录📚 今日感悟：将RAG基本流程、实战中向量数据库中的过程走了一遍，大体理解这一部分内容（觉得某些设计很巧妙），抽时间再回顾
1
Day 34✅ 今天做了：1、扇贝英语单词打卡2、英语听说读写、听力练习3、微信阅读15分钟4、编程导航学习⏰ 明天计划：待定📚 今日感悟：Keep going！
1
day25看了ai知识库，用ai自动编写了小网站，贪吃蛇小游戏。明天试试部署用户管理中心。
0
从零造一个知识图谱编辑器：GBrain 全架构深度解析
2
作者分享
更多
租房
15
第二天（类组件）(生命周期)
10
vscode写vue的时候都拥有什么插件好用呀，特别是代码格式，总是出错，没法按快捷键格式化
5
鱼友们，新网站上线了( https://github.com/huoshicang/chatgpt-3 )欢迎大家来提出建议#项目# #前端#
5
关于编程导航的markdown编辑器，有一个基于vue开发的，并且支持vue3，不仅仅可以渲染markdown文本，还可以渲染html标签，支持代码高亮、图片上传及宽高目录导航等，还有其他的，一个链接( https://code-farmer-i.github.io/vue-markdown-editor/zh/ )有兴趣的看一看
4
下载 APP