Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling React Applications: Update styling recommendations #27874

Merged
merged 8 commits into from
May 10, 2024
Merged

Styling React Applications: Update styling recommendations #27874

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0a99b97
Update styling recommendations
Siriuszx Apr 27, 2024
a3d834d
Fix typo
Siriuszx Apr 27, 2024
c0e709f
Fix fragment links
Siriuszx Apr 27, 2024
1413aef
Fix lint issues
Siriuszx Apr 28, 2024
b0bc427
Update lesson structure
Siriuszx May 9, 2024
d528a32
Fix lint errors
Siriuszx May 9, 2024
fc75115
Fix grammar
Siriuszx May 9, 2024
360b9d7
Fix lint errors
Siriuszx May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions react/the_react_ecosystem/styling_react_applications.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,31 @@

This section contains a general overview of topics that you will learn in this lesson.

- Know about ways to style React applications

Check failure on line 9 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

react/the_react_ecosystem/styling_react_applications.md:9:46 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md

### Vanilla CSS

Check failure on line 11 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

react/the_react_ecosystem/styling_react_applications.md:11:16 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md

Vanilla CSS is the simplest way to style. In the previous courses, you've learned a lot of CSS and all of those skills are applicable to React. There are a couple of things we'd like to highlight.

1. `CSS Modules` let you write CSS style declarations that are scoped locally.
1. `CSS Utility Frameworks` are a popular choice for styling React applications. They provide a set of pre-defined classes that you can directly use in your HTML, or JSX in our case. [Tailwind CSS](https://tailwindcss.com) is by far the most popular choice.

Check failure on line 16 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

react/the_react_ecosystem/styling_react_applications.md:16:258 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md


Check failure on line 18 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiple consecutive blank lines 

react/the_react_ecosystem/styling_react_applications.md:18 MD012/no-multiple-blanks Multiple consecutive blank lines [Expected: 1; Actual: 2] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md012.md
### CSS in JS

Why even write CSS in CSS when you can write it in JavaScript? Just kidding, of course!

Check failure on line 21 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

react/the_react_ecosystem/styling_react_applications.md:21:88 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md

CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion i.e. based on state. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is [styled-components](https://styled-components.com/).

### Component libraries

What if everything's already done for you? Styling, behavior, and accessibility are taken care of for you in component libraries. As the name suggests, these libraries provide adaptable and reusable components that you can use directly in your project. These components include, but are not limited to, dropdowns, drawers, calendars, toggles, tabs, and all other components you can think of.

Check failure on line 27 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

react/the_react_ecosystem/styling_react_applications.md:27:392 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md

[Material UI](https://mui.com/), [Radix](https://www.radix-ui.com/), and [Chakra UI](https://chakra-ui.com/) are worth a mention when talking about component libraries.

<div class="lesson-note lesson-note--tip" markdown="1" >

For learning purposes throughout this course, we advise you to implement your component's styling from scratch i.e. use vanilla CSS or a CSS-in-JS option.
For the learning purposes throughout this course, we recommend that you avoid using CSS frameworks or component libraries, and instead implement your component's styling from scratch i.e. use [CSS Modules](#vanilla-css) or a [CSS-in-JS](#css-in-js) option.

Check failure on line 33 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

react/the_react_ecosystem/styling_react_applications.md:33:257 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
For the learning purposes throughout this course, we recommend that you avoid using CSS frameworks or component libraries, and instead implement your component's styling from scratch i.e. use [CSS Modules](#vanilla-css) or a [CSS-in-JS](#css-in-js) option.
For learning purposes throughout this course, we recommend that you avoid using CSS frameworks or component libraries, and instead implement your component's styling from scratch i.e. use [CSS Modules](#vanilla-css) or a [CSS-in-JS](#css-in-js) option.

Nit: "For learning purposes" (omitting "the") is more appropriate here.


</div>

Expand All @@ -48,7 +48,7 @@

### Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

Check failure on line 51 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Sections have default content 

react/the_react_ecosystem/styling_react_applications.md:51 TOP003/default-section-content Sections have default content [Expected: "The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge."; Actual: "This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to."] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP003.md

- [How can you use CSS Modules in your React app?](https://www.makeuseof.com/react-components-css-modules-style/)
- [What does CSS-in-JS mean?](#css-in-js)
Expand All @@ -56,7 +56,6 @@

### Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

Check failure on line 59 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Sections have default content 

react/the_react_ecosystem/styling_react_applications.md:59 TOP003/default-section-content Sections have default content [Expected: "This section contains helpful links to related content. It isn't required, so consider it supplemental."; Actual: "This section contains helpful links to related content. It isn’t required, so consider it supplemental."] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP003.md

- [Tailwind CSS documentation](https://tailwindcss.com/).
- Josh Comeau has a nice article on [getting the most out of styled-components](https://www.joshwcomeau.com/css/styled-components/).

Check failure on line 61 in react/the_react_ecosystem/styling_react_applications.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

react/the_react_ecosystem/styling_react_applications.md:61:133 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md