diff --git a/react/getting_started_with_react/react_components.md b/react/getting_started_with_react/react_components.md index 7601629ea79..af2561258d3 100644 --- a/react/getting_started_with_react/react_components.md +++ b/react/getting_started_with_react/react_components.md @@ -1,6 +1,6 @@ ### Introduction -In this lesson we'll be going over the basics of React components - what they do, and how to write them. Make sure to use the project you set up in the previous lesson, but try not to copy and paste any code while you're coding along. +In this lesson we'll be going over the basics of React components - what they do, and how to write them. Make sure to use the project you set up in the previous lesson, but try not to copy and paste any code while you're coding along. ### Lesson overview @@ -12,7 +12,7 @@ This section contains a general overview of topics that you will learn in this l ### What are components? -The beauty of React is that it allows you to break a UI (User Interface) down into independent reusable chunks, which we will refer to as components. The following picture should give you an idea of how to do that when building a very basic app. +The beauty of React is that it allows you to break a UI (User Interface) down into independent reusable chunks, which we will refer to as components. The following picture should give you an idea of how to do that when building a very basic app. ![Component Example](https://cdn.statically.io/gh/TheOdinProject/curriculum/91485eec76445d86b29d35894e83324e2967f2fb/react/imgs/00.png) @@ -35,21 +35,21 @@ function Greeting() { } ~~~ -This might look mostly familiar to you - it's a simple JavaScript function, which returns JSX. Open up the project you were working on, create a new file named `Greeting.jsx`, and in that file write your own handmade functional component. Name it whatever you wish, and have it return whatever JSX you wish. +This might look mostly familiar to you - it's a simple JavaScript function, which returns JSX. Open up the project you were working on, create a new file named `Greeting.jsx`, and in that file write your own handmade functional component. Name it whatever you wish, and have it return whatever JSX you wish. Are you done? Check the naming of your function! Is it capitalized? Keep this key difference in mind. **React components must be capitalized** or they will not function as expected, which is why we capitalized `Greeting()`.
- +

HTML escape code

-In the above example, " is an escape code we use to render ". Your linter will greet you with an error if you use regular quotes. You can use this LambdaTest tool for escaping HTML characters if you run into such errors, or read more about escape codes on w3.org +In the above example, " is an escape code we use to render ". Your linter will greet you with an error if you use regular quotes. You can use this LambdaTest tool for escaping HTML characters if you run into such errors, or read more about escape codes on w3.org
#### What is HTML doing in my JavaScript? -It's JSX. It looks jarring at first, but soon we'll realize how cool it is. We'll learn all about it in the upcoming lessons! +It's JSX. It looks jarring at first, but soon we'll realize how cool it is. We'll learn all about it in the upcoming lessons! ### Where do components live @@ -103,4 +103,4 @@ This section contains questions for you to check your understanding of this less This section contains helpful links to related content. It isn’t required, so consider it supplemental. -- Geeks for Geeks has a quick [ReactJS Functional Components tutorial](https://www.geeksforgeeks.org/reactjs-functional-components/). It introduces some new ways of calling functional components you can play around with if you feel a burning desire to do so. For the time being don't worry too much about Class components, which the resource also goes into. +- Geeks for Geeks has a quick [ReactJS Functional Components tutorial](https://www.geeksforgeeks.org/reactjs-functional-components/). It introduces some new ways of calling functional components you can play around with if you feel a burning desire to do so. For the time being don't worry too much about Class components, which the resource also goes into.