React.js Flashcards Preview

Web Development > React.js > Flashcards

Flashcards in React.js Deck (23)
Loading flashcards...
1

What is React?

A JavaScript library for building user interfaces

2

What is a React element?

An element created in react.

Ex:

const $h1 = React.createElement(
'h1',
null,
'Hello, React!'
);

3

How do you mount a React element to the DOM?

ReactDOM.render( )

Ex:

ReactDOM.render($h1, $root);

4

What is JSX?

JSX is an inline markup that looks like HTML and gets transformed to JavaScript. A JSX expression starts with an HTML-like open tag, and ends with the corresponding closing tag. JSX tags support the XML self close syntax so you can optionally leave the closing tag off.

JavaScript Syntax Extension

5

Why must the React object be imported when authoring JSX in a module?

So the JSX can be converted into valid JavaScript that a browser can understand.

6

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

Use/install babel-loader. (devDependencies)

It needs this for webpack to convert the JSX to JavaScript and throw it into main.js.

Ex:

module.exports = {
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
plugins: [
'@babel/plugin-transform-react-jsx'
]
}
}
}
]
},
performance: {
hints: false
}
};

7

What is a React component?

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Purpose is to return React elements.

8

How do you define a function component in React?

function Welcome(props) {
return

Hello, {props.name}

;
}

const element = ;
ReactDOM.render(
element,
document.getElementById('root')
);
9

How do you mount a component to the DOM?

function CustomButton(props) {
return Click Me!;
}

const $root = document.querySelector('#root');

ReactDOM.render(, $root);

10

What are props in React?

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. Furthermore, props data is read-only, which means that data coming from the parent should not be changed by child components.

11

How do you pass props to a component?

insert it directly into the element

12

How do you write JavaScript expressions in JSX?

return {props.text};

13

How do you create "class" component in React?

class ClassName extends React.Component{
render( ) {
return Sample
}

14

How do you access props in a class component?

Getting it from "this" object

15

What is the purpose of state in React?

The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. The change in state can happen as a response to user action or system-generated events and these changes determine the behavior of the component and how it will render.

Tells the component what to render.

State is a data-model.

16

How do you pass an event handler to a React element?

Via a prop.

Ex:

render( ) {
if (this.state.isClicked === false) {
return Click Me!;
} else {
return Thanks!;
}
}
}

17

What Array method is commonly used to create a list of React elements?

map

Ex:

const pokedex = [
{ number: '001', name: 'Bulbasaur' },
{ number: '004', name: 'Charmander' },
{ number: '007', name: 'Squirtle' },
{ number: '025', name: 'Pikachu' },
{ number: '039', name: 'Jigglypuff' }
];

class PokemonList extends React.Component {
render() {
const pokemons = pokedex.map(pokemon =>
  • {pokemon.name}

  • );
    return
      {pokemons}
    ;
    }
    }

    ReactDOM.render(
    , document.querySelector('#root'));

    18

    What is the best value to use as a "key" prop when rendering lists?

    id that is unique amongst the siblings.

    19

    What are controlled components?

    An input form element whose value is controlled by React is called a “controlled component”.

    React is fully wired into it .

    20

    What two props must you pass to an input for it to be "controlled"?

    value and onChange.

    21

    When does React call a component's componentDidMount method?

    componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

    22

    Name three React.Component lifecycle methods.

    constructor( )
    render( )
    componentDidMount( )
    componentDidUpdate( )
    componentWillUnmount( )

    23

    How do you pass data to a child component?

    You pass a prop.