Week Seven

TITLE

Our lessons were as follows:

Monday - Introduction To React
React is a library used to create user interfaces by combining HTML and javascript in a programming language called JSX or JavaScript XML, react rerenders updated elements to constantly keep the site in sync whilst not having to refresh or reload the page
The main appeal of react is creating reusable components that are much faster to use than copying over elements multiple times where you'd have to manually set up each one, components are basically the functions of HTML
React creates a tree of elements that start off as one element, the root, below is an example of how the the elemnts work like a tree, the files also tend to come out this way

To create a react app, you need: npm, webpack, babel compiler, react and reactDOM and a development server to use locally
The steps to set up a react app are:
• npm install create-react-app //this installs the package used to create react apps
• npx create-react-app appname //this creates the react app, name has to be lowercase
• npm start //starts the app
You can use a react fragment to group together multiple elements together without adding more divs to the tree, you can declare a fragment in 2 ways:
• <>
• </>
• <fragment>
• </fragment>
React uses a system called components that are similar to functions that return HTML elements, an example of one would be:
• function componentName () {
• return (
• <p>text</p>
• )
• }
• export default componentName
You can also pass in javascript into the html using {}

You can pass things into components using something called props, anything in line whith the component being called will be attached to an object that is passed as a parameter, this is hard to explain so an example can be seen here:

You can use the passed in props in 2 ways, dot notation using the props object or interpreting the objects properties straight into variables using {propertyNames}

Tuesday - MongoDB Atlas and React States
On Tuesday morning we set up a mongoDB atlas account and cluster to start learning how to interact with cloud based databases, this worked similarly to mongoDB compass and MongoSH so the only completely new parts to learn were the connection strings to compass and mongoSH
We also learned about the different selection operators which are:
• $eq: //values are equal
• $ne: //values are not equal
• $gt: // value is greater than another value
• $gte: // value is greater than or equal to another value
• $lt: //value is less than another value
• $lte: //value is less than or equal to another value
• $in: //value is matched within an array
• $all: //value appears in the array at some point
Some examples of how to use these would be:
• db.Cars.find({stock: {$gte: 15}}) //finds all records where stock is greater than or equal to 15
• db.Cars.find({Fuel: {$all: ["Petrol","Hybrid"]}}) //finds all records where Fuel contains "Petrol" and "Hybrid" at some point in any order
Another thing we learned about was aggregate which allows you to group data together and $count: which returns the number of values of what you put into it
db.Cars.aggregate([{$count: "Model"}])
Would return the number of "Model"s
React States
In the afternoon we learned about react states which are a way of passing values through the program that will be tracked so that other elements can be updated, when the state changes, all associated objects rerender. It is good practice to create the state in the root folder and have it be passed down through props for other components to use
To use states you first have to import it:

Once imported you can set up and use a state using the following syntax:

We also took a look into the map function that lets you iterate through all element in an array, you can do this with an index or without an index based on your needs


Another thing we were taught is one of the ways to edit the state along with a new operator, the ... or spread operator which copies all the element sof the array it is paired with which we used to create a copy of state, alter it and then set the state to this new updated version
Functions used to update the state are often passed down through props and should be passed using empty functions () => functionName so they are not called whilst being set


Wednesday - Consitional Rendering
On wednesday we learned about conditional rendering which is rendering or not rendering certain elements based off of conditional statements
There are 3 types of conditional rendering:
• Short circuit - using && or || after a condition and followed by an expression will complete the expression if the condition is true && or the condition is false ||

• If Statements - a value is passed to a component and it will return elements based on an if statement inside the component

• Ternary Operators - using a ? after a condition and putting 2 expressions seperated by a : where the first expression will be expressed if the condition is true and the second will be expressed if the condition is false

We also learned how to take an input using a form, where you can use a form submission to update values using event.target.value in an event

Thursday - MongoDB in vs code

On Thursday we learned how to link mongoDB atlas to vs code and use code to manipulate databases

To start you need to install 2 packages, mongodb and express. The commands to install them are
npm i -s mongodb
npm i -s express

From here there is a set layout to follow, the code is fairly complicated so the best way to illustrate it is to show the layout, you start by connecting to the database, then you make changes or query the database and then you disconnect from the database



You can find a link to all the different basic mongodb command functions here

Friday -