React Router
What is routing?
Routing is the way we navigate through websites and web applications today.
What can be built with a form tag?
Signup, login, search, create, edit, drop downs, checkboxes, radio buttons, regular buttons and more.
How would you set a default for a checkbox?
<input type="checkbox" name="nameOfChoice" value="1" checked>
In this instance, checked would be defaulted to true.
What is static testing?
Static tests catch typos and errors as you write your code. If you have any type of debugging software in your IDE, it is running static tests.
_______ are physical devices, usually housed with other _______ in large warehouses, that run the “behind the scenes” work of the internet like data storage. When you route, you’re routing to a _______.
Server
What do the <form>, <input>, and<label> elements represent?
The HTML <form> element represents a document section that contains interactive controls for submitting information to a web server.
The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.
The HTML <label> element represents a caption for an item in a user interface.
________ menus are really important for gathering mass data because they insure data quality. This is done with the ______ element.
Hint: Two different words.
Dropdown, <select>
What is unit testing?
Unit testing verifies that individual, isolated parts of your code (like functions) work as expected. For example, unit testing can verify that a return is of a certain type or that a particular string or image is rendered on a page.
How do you create a route path for a login component?
<Route path = '/login' component={login}/>
What are "synthetic events" and why do we use them in React?
Synthetic events effectively simulate DOM events inside the virtual DOM.
React operates out of a virtual DOM. When React is deciding what to render to the page, the DOM doesn’t even exist yet. This is why we use synthetic events.
How do you add radio buttons?
To make radio buttons all we need to do is add input elements with the type "radio".
example:
<input type="radio" onChange={event => handleChange(event)} />
What is integration testing?
Integration testing works to test several units at one time - verifying that they work together as expected. For example, if you have a function that relies on the output of another function, you might write an integration test to confirm that they’re working together as expected. For example, you might simulate a user action to enter login credentials and submit a form, then verify that the submission links a user to a new page. Here, you’re not testing the full app, but not testing just one function, either.
What does a useParam hook allow us to do?
The useParam hook allows us to create dynamic routes that will render content based on the URL. So, instead of requiring that all routes are written out ahead of time, the URL determines what renders on the page.
The ________ handler on an input captures the typing event.
OnChange
How do you validate a string?
First, you’ll need to install yup with npm install --save yup.
Then, we simply declare a schema with let schema = yup.string(); and test our schema on a new line with await schema.isValid('hello world');. This would return “true” since ‘hello world’ is a string.
Describe end to end testing.
End to end tests focus on UI and mimic how a user might interact with an app, simulating real events like button clicks, scrolls, form submits, and the like.
What is the difference between client side routing and server side? What is something that happens in one and not the other?
In server side, the page will refresh as new information is requested.
In client slide, the page will not refresh, but will just display what we've asked of it.
How is a basic handleChange set up for a form?
const handleChange = event => {
setState(event.target.value);
};
How would you structure a form schema to be validated through yup?
const formSchema = Yup.object().shape({
email: Yup
.string()
.email("Must be a valid email address.")
.required("Must include email address."),
password: Yup
.string()
.min(6, "Passwords must be at least 6 characters long.")
.required("Password is Required")
terms: Yup
.boolean()
.oneOf([true], "You must accept Terms and Conditions")
// required isn't required for checkboxes.
});
All testing, of all kinds uses the framework _____, _____, _______ where a test is written to do the following.
Describe what each is.