Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ciromirkin/userslist_react
User list card wit React.js
https://github.com/ciromirkin/userslist_react
react
Last synced: about 5 hours ago
JSON representation
User list card wit React.js
- Host: GitHub
- URL: https://github.com/ciromirkin/userslist_react
- Owner: CiroMirkin
- Created: 2023-11-04T13:15:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-04T21:31:52.000Z (about 1 year ago)
- Last Synced: 2024-04-23T05:25:41.481Z (7 months ago)
- Topics: react
- Language: JavaScript
- Homepage:
- Size: 46.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React
Para correr el servidor de desarrollo:
```
npm run dev
```
El servidor esta en el puerto [5173](http://localhost:5173/).
## Docs
* Las *Props* deberian ser inmutables, es una buena practica.
* Entre { } se intruducen sentencias que retornan un valor.
* Un componente retorna un elemento, React renderiza un elemento no un componente.
### Primer componente
```jsx
const IconButton = ({text}) => {
return (
{text}
)
}
ReactDOM.createRoot(document.getElementById('root')).render(
)
```
### Comentarios en JSX
```jsx
<>
{/* Comentario */}
>
```
### Estilos en linea
```jsx
Seguir
```
### Template literals (Template strings)
```jsx
const avatarSrcImage = `https://unavatar.io/${userName}`
```
### Parametro Booleano
```jsx
<>
>
```
Por defecto es *True*.
### Elemento como parametro
```jsx
function App() {
const formattedUserName = () => (@react)
return (
)
}
```
```jsx
export function FollowCard({ formatUserName, userName }) {
return (
{formatUserName}
)
}
```
### Parametro por defecto
```jsx
export function FollowCard({ name="No hay un nombre" }) {
return (
{name}
)
}
```
### children
* Es una pabra reservada.
*children* es el contenido de un elemento, todo lo que esta dentro.
```jsx
OwO
```
```jsx
export function FollowCard({ children }) {
return (
{children}
)
}
```
### Callbacks
```jsx
function App() {
const formatUserName = (userName) => `@${userName}`
return (
)
}
```
```jsx
export function FollowCard({ formatUserName, userName }) {
return (
{formatUserName(userName)}
)
}
```
### Renderizar una lista de elementos
```jsx
const users = [
{
userName: "react",
name: "React.js"
},
{
userName: "midudev",
name: "Miguel Ángel Duran"
},
{
userName:"freecodecamp",
name:"Free Code Camp"
}
]
```
* Usar como *key* el index de un elemento solo si sabes que ese inde no va a cambiar, osea que el elemento siempre estara en el mismo sitio.
Un *uuid* solo tiene sentido si se han establecido anteriormente, cada vez que se renderizen deben ser los mismos id.
```jsx
{
users.map(({ userName, name }) => (
))
}
```
### useState - Estado interno en un componente
```jsx
import { useState } from 'react'
export function FollowCard(props) {
const [ isFollowing, setIsFollowing ] = useState(false)
const text = isFollowing ? "Siguiendo" : "Seguir"
const handleClick = () => {
setIsFollowing(!isFollowing)
}
return (
{text}
)
}
```
**Puedes** inicializar un *state* con un *prop*, no se pueden llamar igual y es por eso que se suele usar el prefijo *initial* (inicial).
* Un estado en el padre se pasa como prop a un hijo y el hijo lo usa para inicializar su propio estado.
Al cambiar el estado en el padre no va a cambiar el estado en el hijo, **los estados se inicializan una sola vez**.
```jsx
import { useState } from 'react'
export function FollowCard({ initialIsFollowing}) {
const [ isFollowing, setIsFollowing ] = useState(initialIsFollowing)
const text = isFollowing ? "Siguiendo" : "Seguir"
const handleClick = () => {
setIsFollowing(!isFollowing)
}
return (
{text}
)
}
```