Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Coding 2 > apps > Flashcards

apps Flashcards

1
Q

what is the internet?

A

a network of smaller networks which allows data to be transferred between computers around the world

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

what is the web?

A

the web, built on top of the internet, is a system of interlinked documents and other resources with rules and tools to govern how those resources are shared

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

what are the two parts of a web app?

A

clients and servers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

what do clients do?

A

make requests to servers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

what do servers do?

A

send back responses to a client

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

what is AJAX

A

is a technology that allows apps to retrieve and display data through an API and through another server without having to reload the page

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

what is an example of AJAX in use?

A

the unlimited scroll function on twitter or facebook or instagram.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are HTTP messages?

A

They are the requests and responses made by the client and the server

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Do both response and request HTTP messages follow the same structure?

A

Yes they both follow the same 4 part structure

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What are the 4 parts of an HTTP message?

A

Startline, headers, an empty line for spacing, and the body

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

which part of the HTTP message describes the message?

A

the startline and the header

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

which part of the http message contains the message data?

A

the body

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

what is postman?

A

it is a tool that allows you to view the requests and responses as raw data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

what are 4 of the most popular HTTP request formats youll see?

A

GET, POST, PUT, DELETE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What does GET do?

A

READ: requests a visual representation of the document to read of the specified source

(getting search results)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What does POST do?

A

CREATE: submits an addition to the source

submit a tweet/comment

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

what does PUT do?

A

UPDATE: replaces all current representations of source

edit account info

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

what does DELETE do?

A

DELETE: deletes source

delete a photo, item

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What are “CRUD” operations/apps?

A

they mean ones that can create, read, update and delete resources

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

what two parts does the start line consist of?

A

the version type

and the HTTP status code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Which are the 5 most common HTTP status codes?

A 
200 - Ok
201 - created
401 - unauthorized 
404 - Not Found
500 - Internal Server Error
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

can servers respond with data in JSON format?

A

yes they can

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is JSON

A

Javascript object notation. Its the same thing as regular objects expect that the keys must be strings - thats the main difference

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

what is a fetch API used for?

A

to make requests to various web API’s

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

what type of requests does a fetch api make?

A

requests using any of the HTTP methods –

GET POST PUT DELETE etc

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What two parameters does FETCH take?

A

a required one, which is a URL

and the method type,
GET POST DELETE etc

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

what is the default method to a fetch?

A

a GET

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What type of response does a fetch return?

A

A promise

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

what is a promise?

A

they are values that are promised to be returned. This allows the app to do other things under the assumption that when the value is found it will be retrieved.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

what three types of blocks do we need to use to handle a promise?

A

a .then( response = response.json()) block

a .then ( responseJson => do whatever you want) block

.catch ( do this if something goes wrong block)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

what type of data is a returned promise?

A

a returned object that can be used in the future

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

catch blocks on fetch only work under what circumstance?

A

that an uncaught error happens in one of the previous promise statements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

how can we turn a multiline string into an array?

A

use the .trim( ).split(“ “ ) a variable name containing the string.

let sentence = “ this is a sentence”

newArray = sentence.trim().string(“ “)

return array [“this”, “is”, “a”, “sentence”}

make sure you put a qoutes and a space between qoutes inside of the parens otherwise it will break the string by letter and not by the word

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What is an anchor point in react?

A

It is the empty element in which the react application gets rendered into.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

what does the two library files do for us in React?

A

it creates tow global variables fo rus to use in our script.

React
React DOM

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Do we need both parts of React (react and reactDOM) in order for the library to be available for use in a webpage?

A

yes we do

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

the react.development.js file does what exactly?

A

it creates the global variable ‘react’.

it is the “non specific” part.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

what does reat-dom.development. js do?

A

This part contains methods that live on the global variable

‘reactDOM’ which is sued to connect our react code to the DOM

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

What is the difference between using the

‘development version’ of react as opposed to another version?

A

The development version gives us more detailed error messages which are helpful when developing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

what is ‘document’ in javascript?

A

it is the object that represent your webpage. All other objects on your page are owned by document.

Document Object =>
Document Object Model => DOM

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

what does querySelector() do?

A

it finds the first element that matches a specified CSS selector in the document.

document.querySelector(“.apples”)

this would select the first element with apples as a class

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

what if you want to use querySelector for all elements that have a particular class/id and not just the first one?

A

use

querySelectorAll()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

The ‘render()’ method accepts two arguments - what are they?

A

element and container

.render(‘element’, ‘container’)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

what is ‘element’ represent in the ‘render( )’ method?

A

the contents of the container

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

what is the ‘container’ argument in the ‘render( )’ method?

A

the place that we want to insert the

‘element’ (contents) into

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

can we use render( ) to add HTML elements to a container ?

A

No you cannot, it will add the characters as you put them, not the element it represent.

adding H1 tags and a string will not make a headline – it will literally just show the element tags and string. thats it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

How do you add HTML using ‘react’?

A

React.createElement( )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

Is the createElement( ) method on React or ReactDOM?

A

it is a method that lives on React

49
Q

How many arguments does the createElement method take?

A

it takes three

‘type’,’props’,’children’

50
Q

How can we use React to create a h1 element?

A
  1. create a variable that contains from React.createElement

const helloWorldH1 = React.createElement(‘h1’, null, ‘Hello, world!’);

  1. Use that new variable with ReactDom and render method

ReactDOM.render(helloWorldH1, appRoot);

51
Q

what is another word for rendering something?

A

inserting something

52
Q

whenever we use createElement we are creating an _______ of some element?

A

an instance

53
Q

What is JSX?

A

a convenient syntax for React developers because:

  1. quick to write
  2. visually distinct from non JSX Javascript
  3. Easy to read
54
Q

what is BABEL?

A

Babel is a tool for enabling advanced JavaScript syntax when developing?

55
Q

When should you never use type=”text/babel”?

A

in production code.

because it is very slow.

Its only good for learning and very simple demos

56
Q

how can we think of JSX when using it?

A

we can think about it as something similar to html.

if youre using babel

you can use JSX like this

const helloWorldH1 = <h1>Hello, world!</h1>;

babel will convert it ‘behind the scenes’ using React.createElement for us

57
Q

Every time we use JSX in a way similar to the non JSX createElement( ) method we are creating _______ of elements.

A

instances

For example, this code is creating 3 instances of h1 elements:

const instance1 = <h1>Hello, world!</h1>;
const instance2 = <h1>Hello, world!</h1>;
const instance3 = <h1>Hello, world!</h1>;
58
Q

in JSX when creating elements and inserting them into the page, do we use quotes or backticks?

A

No we dont not need them because we are creating elements and not creating string.

59
Q

what is a react component?

A

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function.

60
Q

What is the “element tree model” in react?

A

a mental model for how react is laid out.

The anchor point is the soil

the app is the trunk

the components are the branches

61
Q

If we had a variable/function named ‘app’ and we wanted to render it using JSX, how would we do so?

A

ReactDom.render(< App/>, document.querySelector(‘#application-root’)

notice that we use the open and closing HTML tags around the variable/function name

note that function name doesnt need parens – ex App( )

62
Q

If we had a variable/function named ‘app’ and we wanted to render it WITHOUT using JSX, how would we do so?

A

ReactDOM.render(
React.createElement(App),
document.querySelector(‘#application-root’)

you have to use React.createElement( varaible/function name) and then choose the location to rener it / insert it using document.querySelecor ( )

63
Q

What is React?

A

React is a library for building JavaScript applications that is designed for speed, simplicity and scalability.

64
Q

JSX props can be compared to what data type in HTML?

A

HTML Attributes – The same way HTML has attributes, JSX has props

65
Q

If you want to use backticks for a JSX Prop value, what do we need to do in order to make it work properly?

A

add curly brackets around the value

a href={https://thinkful.com} /a

66
Q

To pass variable names as a JSX prop value using backticks what do i need to do?

A
  1. add the variable name value with backticks
  2. wrap the prop value in curly braces.
const thinkfulAddress = 'https://thinkful.com';
const target = '_blank';
const content = 'Thinkful'
const anchor = (
  a href={thinkfulAddress} target={target}
    {content}
  /a
);
67
Q

When we want to add a class to an element for CSS styling using JSX we have to use what prop?

A

className

68
Q

What happens when you try to use a JSX Prop as an attribute? Like using className JSX Prop on an element like you would a class attribute.

A

The prop will set the class in its place

so
<span></span>

will become

<span></span></span>

69
Q

If props are similar to attributes but are not attributes, then what are they?

A

They are function arguments.

We pass props into components in the same way we pass arguments into functions

70
Q

How is the JSX Prop represented in the console?

A

as an object

{className : value}

71
Q

How do we set JSX Prop using

ReactDOM.render?

A 
ReactDOM.render(
  // Add a className to the App
  ,
  document.querySelector('#application-root')
);
72
Q

How do we get the JSX Prop (className) to have the value that we want without changing it to its HTML equivalent?

A
  1. create component (JSX Function)

function App(props){

}

  1. add place to pass Props (JSX Arguments)

function App(props){

}

  1. Create element with a JSX Prop key and object notation key to access value of that key.

span id=’app-id’ className={props.className}

  1. Use render( ) method to set key value pair of JSX prop that will become an object when passed through a JSX Component
ReactDOM.render(
  // Add a className to the App
  ,
document.querySelector('#application-root')
);
73
Q

Can we add multiple key/value pairs to our props object when we use render method?

A

Yes. everything we add gets put inside the props object.

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

74
Q

All JSX Prop values, besides strings need to be wrapped in what?

A

Curly brackets

foo=’bar’
boolProp={false}
numberProp={123}

75
Q

In the render( ) method the JSX Prop key value that we set go where?

A

They go within the same tag as the JSX Component name

ReactDOM.render(

76
Q

When using the render( ) method, how do we nest an element inside of the Component that will be passed?

A

we split the name of the Component into opening and closing tags and add the element that we want to nest in between them.

ReactDOM.render(
  App className='my-class'
    h1 Current Page Title! /h1
  /App,
  document.querySelector('#application-root')
);
77
Q

When you use render( ) to nest an element inside of JSX component and pass it as a prop, what gets added to the Prop object?

A

a key named “children” with a

value of an object with a lot weird looking key value/ pairs inside of it

78
Q

How do we use the children prop in JSX?

A

We use it to set a nested element inside of another element by setting it inside the component with curly brackets and bracket notation

ex

{prop.children}

note that “prop” can be any name, whatever name you gave to the prop (key value of object)when you passed it in

79
Q

what is a Compiler?

A

A tool that takes JavaScript code and transforms it to new JavaScript code, such as Babel.

80
Q

what is a CDN?

A

content delivery network to serve files across the globe in an optimized manner, such as the react.development.js file.

81
Q

what is JSX?

A

A syntactical sugar for JavaScript similar to HTML to help write UI code.

82
Q

what is a react element?

A

A building block in React, the output from writing a tag in JSX.

83
Q

what is a Component?

A

A reusable piece of code to create elements.

84
Q

what are Props?

A

The inputs or arguments to a React component. Similar to HTML element attributes.

85
Q

what is props.children?

A

A special prop containing embedded/nested elements.

86
Q

What is a dependency?

A

its a Node package that your app depends on

87
Q

Whenever you create some JSX what does babel do?

A

It transforms into a function call

88
Q

How many “return” root nodes can we return from any function or method?

A

one.

there can be children of that node but there cannot be siblings or more than one root

89
Q

When adding props to an element what do we NOT use curly braces for?

A

Strings values

stringProp=”string”

90
Q

When adding props to elements we use curly braces for what?

A

Everything else besides strings.

numProp={123}
booleanProp={true}
obj = { foo: ‘bar’ }

91
Q

What are JSX experessions?

A

They are anything that can be equated to a value.

So they can be variables, values , returns from functions….etc

92
Q

Where do expressions go when you place them inside JSX?

A

They must go inside of curly braces

93
Q

what is an example of using a value expression in JSX?

A

name = ‘beyoncé

Hello, {capitalize(name)}

94
Q

what is an example of using a variable expression in JSX?

A

name = ‘Beyoncé’

Hello, {name}

95
Q

what is an example of using a function expression in JSX?

A

name = ‘beyoncé

Hello, {capitalize(name)}

96
Q

what is an example of using another JSX expression in JSX?

A

jsxName = span Beyoncé span

Hello, {jsxName}

97
Q

Can you put JSX inside of an ‘If statements’ and loops etc?

A

Yes you can put JSX anywhere you would put a function call

98
Q

in JSX every element needs what?

A

A closing tag or to be self closing

99
Q

Does a component need a closing tag or to be self closing?

A

Yes it does.

100
Q

When creating custom Components how should you write them?

A

With the first letter Uppercase (not camel case)

101
Q

What does React do?

A

This library gives you a robust set of tools for controlling the different views of your app

102
Q

what is a relative import?

A

a relative import is when you look for a js.file that has been exported in another .js file - and import it into the current file.

This is opposed to searching for it in the directory/folder and importing it from there

103
Q

what is an example of how a relative import would look..

A

import App from ‘./App’

This is saying import the variable named App from the javascript file named App.js

104
Q

what is a default export?

A

a default export is an export that allows a variable to be found by another file and be imported into it

105
Q

what would an example of an export default look like?

A

export default App

App would be the name that would be searched for by another file and imported when found

106
Q

what does the ./ signify when seen in a relative import?

A

this tells the import to look in the js file and not look in the node directory folder that was downloaded when the react app was created

107
Q

In order to use a relative import what does a developer have to do?

A

The developer has to write both import and export code

108
Q

How can we create a new react project?

A
  1. go back to command line
  2. use create-react-app and folder name
  3. generate the boiler code and configeration
  4. install dependecies
  5. remove unused boilerplate
  6. code new app
109
Q

Instead of adding class to react elements to add css what do you have to put?

A

className

110
Q

What are the only type of elements that you can add className to?

A

You can only add them react elements. Which are basically the same as html elements but used in react.. They arent not custom created components

react element is like p or ul or li

the same as html elements - these take className

custom componenets
like

MyApp

or MainContent cannot take className

111
Q

How do we use inline style a react element?

A

we use the style property.

function App(){
return (
h1 style =
)

112
Q

What data type is the value of the style property on a react element?

A

it has to be an object

function App() {
return (
h1 style = {color: "red"}
113
Q

what do we need to make sure we add with our non string values of our react element properties?

A

we need to add curly brackets, even if they have curly brackets already (for an object for instance)

function App(){
return (
h1 style = {{color: "red"}}
114
Q

What is a good idea to do if you have a lot of styling elements you want to add to an inline react element, but it would be too cumbersome to add it all on one line?

A

Since the styling has to be an object, create and object and give it a regular variable name and then
pass it on the react element instead of writing it in the line itself

let cssStyling = {
color: "red",
backgroundColor: "black"
}

h1 style = {cssStyling}

115
Q

When adding to an object inside of a react property element a variable name that has a dash, the javascript will not read it….how do we fix this?

A

Use camelCase instead

background-color: “red”; will work in normal css

but in react we have to make it

style = {{backgroundColor: “red”}}

116
Q

what is the default number measurement in react element objects?

A

pixels, so we dont need to specify px when writing them

{
color: red,
fontSize: 23
}

this is ok

117
Q

if you want ot specify pixels and use the ‘px’ along with the number in an react object what do you need to make sure that you do?

A

you need to make sure that you put both the number and the ‘px’ inside of quotes and make it a string

{
color: red,
fontSize: “23px”
}

118
Q

what data type is props that you pass in through a react component?

A

it is an object

Coding 2 (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions