React.js Flashcards Preview

Web Development > React.js > Flashcards

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

What is React?

A

A JavaScript library for building user interfaces

2
Q

What is a React element?

A

An element created in react.

Ex:

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

How do you mount a React element to the DOM?

A

ReactDOM.render( )

Ex:

ReactDOM.render($h1, $root);

4
Q

What is JSX?

A

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
Q

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

A

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

6
Q

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

A

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
Q

What is a React component?

A

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
Q

How do you define a function component in React?

A
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);
9
Q

How do you mount a component to the DOM?

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

const $root = document.querySelector(‘#root’);

ReactDOM.render(, $root);

10
Q

What are props in React?

A

“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
Q

How do you pass props to a component?

A

insert it directly into the element

12
Q

How do you write JavaScript expressions in JSX?

A

return {props.text};

13
Q

How do you create “class” component in React?

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

How do you access props in a class component?

A

Getting it from “this” object

15
Q

What is the purpose of state in React?

A

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
Q

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

A

Via a prop.

Ex:

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

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

A

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 =>
      <li>{pokemon.name}</li>
    );
    return <ul>{pokemons}</ul>;
  }
}

ReactDOM.render(
, document.querySelector(‘#root’));

18
Q

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

A

id that is unique amongst the siblings.

19
Q

What are controlled components?

A

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

React is fully wired into it .

20
Q

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

A

value and onChange.

21
Q

When does React call a component’s componentDidMount method?

A

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
Q

Name three React.Component lifecycle methods.

A
constructor( )
render( )
componentDidMount( )
componentDidUpdate( )
componentWillUnmount( )
23
Q

How do you pass data to a child component?

A

You pass a prop.