React Cheatsheet Sintaxis

Question 1

JSX Element

Answer 1

let element =

<h1>Hello, world!</h1>

;
let emptyHeading = <h1 />;

Question 2

JSX Expressions

Answer 2

let name = ‘Josh Perez’;
let element = <h1> Hello, {name} </h1>;

function fullName (firstName, lastName) {
return firstName + ‘ ‘ +
lastName;
}
let element = <h1>Hello, {fullName(‘Julie’, ‘Johnson’)}</h1>

Question 3

JSX attributes

Answer 3

const element =
<img src={user.avatarUrl} />;
const element =
<button>
Click me
</button>;

Question 4

JSX Functions

Answer 4

name() {
return “Julie”;
}

return (

<h1>
Hi {name()}!
</h1>

)

Question 5

Embed an external component

Answer 5

import React from ‘react’;
import ComponentName from ‘component-name’;

export default function UserProfile() {
return (
<div
className="UserProfile">
<ComponentName></ComponentName>
</div>
);
}

Question 6

React Element Styles inline

Answer 6

<h1 style={{ fontSize: 24, margin: ‘0 auto’, textAlign: ‘center’ }}>
My header
</h1>

Question 7

React Props

Answer 7

function App() {
return <User></User>
}
function User(props) {
return <h1>Hello, {props.name}</h1>; // Hello, John Doe!
}

Question 8

React Props, extract the value of the “name”

Answer 8

function App() {
return <User></User>
}
function User({ name }) {
return <h1>Hello, {name}!</h1>; // Hello, John Doe!
}

Question 9

React Children Props

Answer 9

function App() {
return (

<User>
<h1>Hello, John Doe!</h1>
</User>

);
}
function User({ children }) {
return children; // Hello, John Doe!
}

Question 10

React IF Conditional

Answer 10

function App() {
const isAuthUser = useAuth();
if (isAuthUser) {
// if our user is authenticated, let them use the app
return <AuthApp></AuthApp>;
}
// if user is not authenticated, show a different screen
return <UnAuthApp></UnAuthApp>;
}

Question 11

React ternary operator conditional

Answer 11

function App() {
const isAuthUser = useAuth();
return (
<>
<h1>My App</h1>
{isAuthUser ? <AuthApp></AuthApp> : <UnAuthApp></UnAuthApp>}
</>
)
}