SQL helps us handle data with relational databases. When it comes to having different tables in a database, we need to find a way to connect the tables’ data, and this is where joins come in to save the day!
There a couple of different types of joins:
See the image below to give you a visualization of those different joins:
An inner join will allow us to return data records that have a matching value in both tables.
For an example, I’m going to pull from an example database. We will explore the relationship between these two tables.
We can create an INNER JOIN between the two tables via the shared ArtistId value, see the syntax of using inner join to connect the tables data here:
A left join keyword will return all data records from the left table and the data records that meet a condition from the right table.
The right join is actually quite similar to the left join!
With the right join, we get the flip side of results! The RIGHT JOIN will return all rows from the right table and all matched rows from the left table.
A full join will go ahead and return all the rows from the joined tables whether they are matched or not.
- Important, SQLite does not support the use of a full join sometimes referred to as a full outer join
Bonus: Cross Join
Not mentioned earlier, but something worth knowing in your backpocket is the cross join!
A cross join creates a product of rows from the two tables, without a join condition. Syntax for a cross join:
You can see there are some duplicate data results, a use case for a cross join would be to create an initial data set that would allow for further queries or analysis.
3 Ways to style in React
Recently, I have been creating a few clones using React and have encountered various ways to style in React. It was confusing to me as to why there was not a unique way to do so, but it gives more options to the developers and some methods would not be appropriate depending the situation.
In this article, I am going to explore the different methods of styling such as:
- Inline Styling
- CSS Modules
Method #2: styled-components
First, we need to install it, so run the following in your React app’s directory:
npm install --save styled-components
In the following example on a Linkedin-clone project that I am working on, I used the styled component to style the ‘Join Now’ and ‘Sign In’ components.
Method #3: CSS Modules
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
CSS class names and animation names are scoped globally by default. This can lead to conflict, especially in large stylesheets; one style can override another. This is the problem CSS Modules solves. CSS classes are only available within the component where they are used.
In this example, I’m going to style the Sign In button in my Linkedin-clone app using the CSS Modules. First, I am going to create a Login.module.css file in my components folder. Then I will import this file in my Login component, using styles as a name. Note that I could use any name but this the standard.
Finally, I will create a button tag and pass this style attribute to it, after adding some simple CSS to see the result.