Download ReactJS Interview Questions and Answers Study Guide and more Exams Advanced Education in PDF only on Docsity!
ReactJS complete questions and answers study guide ReactJS - This is a JavaScript (user-interface framework) library developed by engineers at Facebook. JSX - This is an HTML-like syntax extension for JavaScript written to be used with React. This is specifically how React adds XML syntax to JavaScript which is compiled to JavaScript at runtime. JSX element - A basic unit of JSX found in a JavaScript file which is treated as, and has the functionality of, a JavaScript expression. It can also have attributes, just like HTML elements. If a JSX expression takes up more than one line - you must wrap the multi- line expression in parentheses. A JSX expression must have - exactly one outermost element. import React - from 'react' import ReactDOM - from 'react-dom' ReactDOM - This is a JavaScript library that contains several React-specific methods, all of which deal with the DOM in some way or another. ReactDOM.render()'s first argument should be - a JSX expression to be rendered to the screen ReactDOM.render()'s second argument - indicates the element the first argument will be appended to and where on the screen it will appear.
the virtual DOM - a representation of a DOM object (i.e. a lightweight copy). It has the same properties as a real DOM object, but it lacks the real DOM's power to directly change what's on the screen. diffing - comparing the new virtual DOM with a pre-update version to figure out which virtual DOM objects have changed. 'class' is a reserved word in JavaScript - so use 'className' in JSX A self-closing tag in JSX - requires a forward-slash / ( e.g.
) JSX written between {curly braces} - will render like a regular JavaScript expression not like JSX. These are markers that signal the beginning and end of a JavaScript injection into JSX. - curly braces You can access variables while inside of a JSX expression, - even if those variables were declared on the outside of the JSX expression A JSX element event listener attribute's name should be like - 'onClick' or 'onMouseOver' or similar 'on' event In JSX, event listener names are written in - camelCase This is a JSX callback function - ReactDOM.render(greeting, onClick={someCallbackFunc}); && - works best in conditionals that will sometimes do an action, but other times do nothing at all based on the condition
The body of your component class - acts as a set of instructions, explaining to your component class how it should build a React component. There is only one property that you have to include in your instructions: - a render method; e.g. render( ) A render method must contain - a return statement. A render method is a property whose name is render, - and whose value is a function. JSX elements can be either HTML-like, - or component instances. JSX uses capitalization to distinguish between - JSX elements that are HTML-like and component instances. A render() function can also have simple calculations and conditional statement but they must be placed - inside the render( ) function and before the return statement In React, you define event handlers as methods on a component class placing them - inside the component class but before the render( ) function. This command generates a boilerplate version of a React application. - npm install -g create-react-app Starts the development server - npm start Bundles the app into static files for production. - npm run build
Starts the test runner. - npm test Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can't go back! - npm run eject React uses a tool called 'webpack' - which transforms the directories and files into static assets. Visitors to your site are served those static assets. "private": true (within package.json) - is a failsafe setting to avoid accidentally publishing your app as a public package within the npm ecosystem. dependencies (within package.json) - contains all the required node modules and versions required for the application. scripts (within package.json) - specifies aliases that you can use to access some of the react-scripts commands in a more efficient manner (e.g. npm test) Within your React app, this directory contains assets that will be served directly without additional processing by webpack. - public This file within the "public" directory provides the entry point for the web app. - index.html This file with the "public" dir configures how your web app will behave if it is added to an Android user's home screen - manifest.json This directory contains the JavaScript that will be processed by webpack and is the heart of the React app. - src
If a component has more than one child between its JSX tags, then this.props.children will return those children in an... - array If a component has only one child, then this.props.children will return the single child, - not wrapped in an array How do you pass a prop? - by giving an attribute to a component instance How do you accessing a passed-in prop? - via this.props.prop-name How do you set default props on a component - MyComponent.defaultProps = { }; Dynamic information - information that can change There are two ways for a component to get dynamic information: - props and state Besides props and state, every value used in a component should... - always stay exactly the same. To make a component have state, - give the component a 'state' property declared inside of a constructor method. this.state should be equal to - an object representing the initial "state" of any component instance (e.g. this.state = { mood: 'decent' };) React components always have to call ________ for constructors to be set up properly. - super(props); Methods should never be comma-separated, - if inside of a class body. This emphasizes the fact that classes and object literals are different.
To read a component's state, use the expression - this.state.name-of- property A component changes its state by calling the function - this.setState( { someKey: newValue} ); whenever you define an event handler that uses 'this' - you need to add this.methodName = this.methodName.bind(this) to your constructor function. you can't call this.setState() from inside of - the render function Any time that you call this.setState(), this.setState() AUTOMATICALLY calls
- .render() as soon as the state has changed. Why can't you call this.setState() from inside of the .render() method? - this.setState() automatically calls .render(). If .render() calls this.setState(), then an infinite loop is created. Rendering is the only way for a component - to pass props to another component. A React component should use 'props' to store information that can be - changed, but can only be changed by a different component. A React component should use 'state' to - store information that the component itself can change. Passing information: pass props from a stateful parent component - to a stateless child component
render( ) belongs to two lifecycle categories: mounting and... - updating lifecycle methods If your React app uses AJAX to fetch initial data from an API, which lifecycle method is best to use? - componentDidMount
