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
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
3
Q
what are the two parts of a web app?
A
clients and servers
4
Q
what do clients do?
A
make requests to servers
5
Q
what do servers do?
A
send back responses to a client
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
7
Q
what is an example of AJAX in use?
A
the unlimited scroll function on twitter or facebook or instagram.
8
Q
What are HTTP messages?
A
They are the requests and responses made by the client and the server
9
Q
Do both response and request HTTP messages follow the same structure?
A
Yes they both follow the same 4 part structure
10
Q
What are the 4 parts of an HTTP message?
A
Startline, headers, an empty line for spacing, and the body
11
Q
which part of the HTTP message describes the message?
A
the startline and the header
12
Q
which part of the http message contains the message data?
A
the body
13
Q
what is postman?
A
it is a tool that allows you to view the requests and responses as raw data
14
Q
what are 4 of the most popular HTTP request formats youll see?
A
GET, POST, PUT, DELETE
15
Q
What does GET do?
A
READ: requests a visual representation of the document to read of the specified source
(getting search results)
16
Q
What does POST do?
A
CREATE: submits an addition to the source
submit a tweet/comment
17
Q
what does PUT do?
A
UPDATE: replaces all current representations of source
edit account info
18
Q
what does DELETE do?
A
DELETE: deletes source
delete a photo, item
19
Q
What are “CRUD” operations/apps?
A
they mean ones that can create, read, update and delete resources
20
Q
what two parts does the start line consist of?
A
the version type
and the HTTP status code
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
22
Q
can servers respond with data in JSON format?
A
yes they can
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
24
Q
what is a fetch API used for?
A
to make requests to various web API’s
25
what type of requests does a fetch api make?
requests using any of the HTTP methods --
| GET POST PUT DELETE etc
26
What two parameters does FETCH take?
a required one, which is a URL
and the method type,
GET POST DELETE etc
27
what is the default method to a fetch?
a GET
28
What type of response does a fetch return?
A promise
29
what is a promise?
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.
30
what three types of blocks do we need to use to handle a promise?
a .then( response = response.json()) block
a .then ( responseJson => do whatever you want) block
.catch ( do this if something goes wrong block)
31
what type of data is a returned promise?
a returned object that can be used in the future
32
catch blocks on fetch only work under what circumstance?
that an uncaught error happens in one of the previous promise statements
33
how can we turn a multiline string into an array?
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
34
What is an anchor point in react?
It is the empty element in which the react application gets rendered into.
35
what does the two library files do for us in React?
it creates tow global variables fo rus to use in our script.
React
React DOM
36
Do we need both parts of React (react and reactDOM) in order for the library to be available for use in a webpage?
yes we do
37
the react.development.js file does what exactly?
it creates the global variable 'react'.
it is the "non specific" part.
38
what does reat-dom.development. js do?
This part contains methods that live on the global variable
| 'reactDOM' which is sued to connect our react code to the DOM
39
What is the difference between using the
| 'development version' of react as opposed to another version?
The development version gives us more detailed error messages which are helpful when developing
40
what is 'document' in javascript?
it is the object that represent your webpage. All other objects on your page are owned by document.
Document Object =>
Document Object Model => DOM
41
what does querySelector() do?
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
42
what if you want to use querySelector for all elements that have a particular class/id and not just the first one?
use
querySelectorAll()
43
The 'render()' method accepts two arguments - what are they?
element and container
.render('element', 'container')
44
what is 'element' represent in the 'render( )' method?
the contents of the container
45
what is the 'container' argument in the 'render( )' method?
the place that we want to insert the
| 'element' (contents) into
46
can we use render( ) to add HTML elements to a container ?
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
47
How do you add HTML using 'react'?
React.createElement( )
48
Is the createElement( ) method on React or ReactDOM?
it is a method that lives on React
49
How many arguments does the createElement method take?
it takes three
| 'type','props','children'
50
How can we use React to create a h1 element?
1. create a variable that contains from React.createElement
const helloWorldH1 = React.createElement('h1', null, 'Hello, world!');
2. Use that new variable with ReactDom and render method
ReactDOM.render(helloWorldH1, appRoot);
51
what is another word for rendering something?
inserting something
52
whenever we use createElement we are creating an _______ of some element?
an instance
53
What is JSX?
a convenient syntax for React developers because:
1. quick to write
2. visually distinct from non JSX Javascript
3. Easy to read
54
what is BABEL?
Babel is a tool for enabling advanced JavaScript syntax when developing?
55
When should you never use type="text/babel"?
in production code.
because it is very slow.
Its only good for learning and very simple demos
56
how can we think of JSX when using it?
we can think about it as something similar to html.
if youre using babel
you can use JSX like this
const helloWorldH1 =
Hello, world!
; babel will convert it 'behind the scenes' using React.createElement for us
57
Every time we use JSX in a way similar to the non JSX createElement( ) method we are creating _______ of elements.
instances
For example, this code is creating 3 instances of h1 elements:
```
const instance1 =
Hello, world!
; const instance2 =Hello, world!
; const instance3 =Hello, world!
; ```
58
in JSX when creating elements and inserting them into the page, do we use quotes or backticks?
No we dont not need them because we are creating elements and not creating string.
59
what is a react component?
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
What is the "element tree model" in react?
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
If we had a variable/function named 'app' and we wanted to render it using JSX, how would we do so?
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
If we had a variable/function named 'app' and we wanted to render it WITHOUT using JSX, how would we do so?
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
What is React?
React is a library for building JavaScript applications that is designed for speed, simplicity and scalability.
64
JSX props can be compared to what data type in HTML?
HTML Attributes -- The same way HTML has attributes, JSX has props
65
If you want to use backticks for a JSX Prop value, what do we need to do in order to make it work properly?
add curly brackets around the value
a href={`https://thinkful.com`} /a
66
To pass variable names as a JSX prop value using backticks what do i need to do?
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
When we want to add a class to an element for CSS styling using JSX we have to use what prop?
className
68
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.
The prop will set the class in its place
so
will become
69
If props are similar to attributes but are not attributes, then what are they?
They are function arguments.
We pass props into components in the same way we pass arguments into functions
70
How is the JSX Prop represented in the console?
as an object
{className : value}
71
How do we set JSX Prop using
| ReactDOM.render?
```
ReactDOM.render(
// Add a className to the App
,
document.querySelector('#application-root')
);
```
72
How do we get the JSX Prop (className) to have the value that we want without changing it to its HTML equivalent?
1. create component (JSX Function)
function App(props){
}
2. add place to pass Props (JSX Arguments)
function App(props){
}
3. Create element with a JSX Prop key and object notation key to access value of that key.
span id='app-id' className={props.className}
4. 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
Can we add multiple key/value pairs to our props object when we use render method?
Yes. everything we add gets put inside the props object.
ReactDOM.render(
,
document.querySelector('#application-root')
);
74
All JSX Prop values, besides strings need to be wrapped in what?
Curly brackets
foo='bar'
boolProp={false}
numberProp={123}
75
In the render( ) method the JSX Prop key value that we set go where?
They go within the same tag as the JSX Component name
ReactDOM.render(
76
When using the render( ) method, how do we nest an element inside of the Component that will be passed?
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
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 key named "children" with a
| value of an object with a lot weird looking key value/ pairs inside of it
78
How do we use the children prop in JSX?
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
what is a Compiler?
A tool that takes JavaScript code and transforms it to new JavaScript code, such as Babel.
80
what is a CDN?
content delivery network to serve files across the globe in an optimized manner, such as the react.development.js file.
81
what is JSX?
A syntactical sugar for JavaScript similar to HTML to help write UI code.
82
what is a react element?
A building block in React, the output from writing a tag in JSX.
83
what is a Component?
A reusable piece of code to create elements.
84
what are Props?
The inputs or arguments to a React component. Similar to HTML element attributes.
85
what is props.children?
A special prop containing embedded/nested elements.
86
What is a dependency?
its a Node package that your app depends on
87
Whenever you create some JSX what does babel do?
It transforms into a function call
88
How many "return" root nodes can we return from any function or method?
one.
there can be children of that node but there cannot be siblings or more than one root
89
When adding props to an element what do we NOT use curly braces for?
Strings values
stringProp="string"
90
When adding props to elements we use curly braces for what?
Everything else besides strings.
numProp={123}
booleanProp={true}
obj = { foo: 'bar' }
91
What are JSX experessions?
They are anything that can be equated to a value.
So they can be variables, values , returns from functions....etc
92
Where do expressions go when you place them inside JSX?
They must go inside of curly braces
93
what is an example of using a value expression in JSX?
name = 'beyoncé
Hello, {capitalize(name)}
94
what is an example of using a variable expression in JSX?
name = 'Beyoncé'
Hello, {name}
95
what is an example of using a function expression in JSX?
name = 'beyoncé
Hello, {capitalize(name)}
96
what is an example of using another JSX expression in JSX?
jsxName = span Beyoncé span
Hello, {jsxName}
97
Can you put JSX inside of an 'If statements' and loops etc?
Yes you can put JSX anywhere you would put a function call
98
in JSX every element needs what?
A closing tag or to be self closing
99
Does a component need a closing tag or to be self closing?
Yes it does.
100
When creating custom Components how should you write them?
With the first letter Uppercase (not camel case)
101
What does React do?
This library gives you a robust set of tools for controlling the different views of your app
102
what is a relative import?
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
what is an example of how a relative import would look..
import App from './App'
This is saying import the variable named App from the javascript file named App.js
104
what is a default export?
a default export is an export that allows a variable to be found by another file and be imported into it
105
what would an example of an export default look like?
export default App
App would be the name that would be searched for by another file and imported when found
106
what does the ./ signify when seen in a relative import?
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
In order to use a relative import what does a developer have to do?
The developer has to write both import and export code
108
How can we create a new react project?
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
Instead of adding class to react elements to add css what do you have to put?
className
110
What are the only type of elements that you can add className to?
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
How do we use inline style a react element?
we use the style property.
function App(){
return (
h1 style =
)
112
What data type is the value of the style property on a react element?
it has to be an object
```
function App() {
return (
h1 style = {color: "red"}
```
113
what do we need to make sure we add with our non string values of our react element properties?
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
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?
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
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?
Use camelCase instead
background-color: "red"; will work in normal css
but in react we have to make it
style = {{backgroundColor: "red"}}
116
what is the default number measurement in react element objects?
pixels, so we dont need to specify px when writing them
{
color: red,
fontSize: 23
}
this is ok
117
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?
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
what data type is props that you pass in through a react component?
it is an object
