diff --git a/.gitbook/assets/image (1).png b/.gitbook/assets/image (1).png deleted file mode 100644 index f4f12e8..0000000 Binary files a/.gitbook/assets/image (1).png and /dev/null differ diff --git a/.gitbook/assets/image (10).png b/.gitbook/assets/image (10).png deleted file mode 100644 index 3ff65c3..0000000 Binary files a/.gitbook/assets/image (10).png and /dev/null differ diff --git a/.gitbook/assets/image (11).png b/.gitbook/assets/image (11).png deleted file mode 100644 index cce308b..0000000 Binary files a/.gitbook/assets/image (11).png and /dev/null differ diff --git a/.gitbook/assets/image (12).png b/.gitbook/assets/image (12).png deleted file mode 100644 index 7501211..0000000 Binary files a/.gitbook/assets/image (12).png and /dev/null differ diff --git a/.gitbook/assets/image (13).png b/.gitbook/assets/image (13).png deleted file mode 100644 index 8acbbb0..0000000 Binary files a/.gitbook/assets/image (13).png and /dev/null differ diff --git a/.gitbook/assets/image (14).png b/.gitbook/assets/image (14).png deleted file mode 100644 index c9268cc..0000000 Binary files a/.gitbook/assets/image (14).png and /dev/null differ diff --git a/.gitbook/assets/image (15).png b/.gitbook/assets/image (15).png deleted file mode 100644 index 5d013ae..0000000 Binary files a/.gitbook/assets/image (15).png and /dev/null differ diff --git a/.gitbook/assets/image (16).png b/.gitbook/assets/image (16).png deleted file mode 100644 index ddc791f..0000000 Binary files a/.gitbook/assets/image (16).png and /dev/null differ diff --git a/.gitbook/assets/image (17).png b/.gitbook/assets/image (17).png deleted file mode 100644 index f26b23a..0000000 Binary files a/.gitbook/assets/image (17).png and /dev/null differ diff --git a/.gitbook/assets/image (18).png b/.gitbook/assets/image (18).png deleted file mode 100644 index c74a246..0000000 Binary files a/.gitbook/assets/image (18).png and /dev/null differ diff --git a/.gitbook/assets/image (19).png b/.gitbook/assets/image (19).png deleted file mode 100644 index f26b23a..0000000 Binary files a/.gitbook/assets/image (19).png and /dev/null differ diff --git a/.gitbook/assets/image (2).png b/.gitbook/assets/image (2).png deleted file mode 100644 index 1f4dc17..0000000 Binary files a/.gitbook/assets/image (2).png and /dev/null differ diff --git a/.gitbook/assets/image (20).png b/.gitbook/assets/image (20).png deleted file mode 100644 index 130aabf..0000000 Binary files a/.gitbook/assets/image (20).png and /dev/null differ diff --git a/.gitbook/assets/image (21).png b/.gitbook/assets/image (21).png deleted file mode 100644 index bc790bb..0000000 Binary files a/.gitbook/assets/image (21).png and /dev/null differ diff --git a/.gitbook/assets/image (22).png b/.gitbook/assets/image (22).png deleted file mode 100644 index 183bf11..0000000 Binary files a/.gitbook/assets/image (22).png and /dev/null differ diff --git a/.gitbook/assets/image (23).png b/.gitbook/assets/image (23).png deleted file mode 100644 index 8362eed..0000000 Binary files a/.gitbook/assets/image (23).png and /dev/null differ diff --git a/.gitbook/assets/image (24).png b/.gitbook/assets/image (24).png deleted file mode 100644 index e75d12a..0000000 Binary files a/.gitbook/assets/image (24).png and /dev/null differ diff --git a/.gitbook/assets/image (25).png b/.gitbook/assets/image (25).png deleted file mode 100644 index 9615cf3..0000000 Binary files a/.gitbook/assets/image (25).png and /dev/null differ diff --git a/.gitbook/assets/image (26).png b/.gitbook/assets/image (26).png deleted file mode 100644 index 85af5f0..0000000 Binary files a/.gitbook/assets/image (26).png and /dev/null differ diff --git a/.gitbook/assets/image (27).png b/.gitbook/assets/image (27).png deleted file mode 100644 index f887c8a..0000000 Binary files a/.gitbook/assets/image (27).png and /dev/null differ diff --git a/.gitbook/assets/image (3).png b/.gitbook/assets/image (3).png deleted file mode 100644 index 979b036..0000000 Binary files a/.gitbook/assets/image (3).png and /dev/null differ diff --git a/.gitbook/assets/image (4).png b/.gitbook/assets/image (4).png deleted file mode 100644 index 41b38d6..0000000 Binary files a/.gitbook/assets/image (4).png and /dev/null differ diff --git a/.gitbook/assets/image (5).png b/.gitbook/assets/image (5).png deleted file mode 100644 index c49576d..0000000 Binary files a/.gitbook/assets/image (5).png and /dev/null differ diff --git a/.gitbook/assets/image (6).png b/.gitbook/assets/image (6).png deleted file mode 100644 index bf62836..0000000 Binary files a/.gitbook/assets/image (6).png and /dev/null differ diff --git a/.gitbook/assets/image (7).png b/.gitbook/assets/image (7).png deleted file mode 100644 index a38d00b..0000000 Binary files a/.gitbook/assets/image (7).png and /dev/null differ diff --git a/.gitbook/assets/image (8).png b/.gitbook/assets/image (8).png deleted file mode 100644 index 198d04c..0000000 Binary files a/.gitbook/assets/image (8).png and /dev/null differ diff --git a/.gitbook/assets/image (9).png b/.gitbook/assets/image (9).png deleted file mode 100644 index f4c2051..0000000 Binary files a/.gitbook/assets/image (9).png and /dev/null differ diff --git a/.gitbook/assets/image.png b/.gitbook/assets/image.png deleted file mode 100644 index 9d8b167..0000000 Binary files a/.gitbook/assets/image.png and /dev/null differ diff --git a/README.md b/README.md index 1c2afd1..a106e19 100644 --- a/README.md +++ b/README.md @@ -1,596 +1,9 @@ ---- -description: English to Target Language Translator. ---- - -# Notes - - - - - -## React - -> React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript - -> because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX - -> include the code you want to be treated as JavaScript within curly braces: { 'this is treated as JavaScript code' } - -> JSX code must be compiled into JavaScript - -> under the hood the challenges are calling ReactDOM.render\(JSX, document.getElementById\('root'\)\) - -> One important thing to know about nested JSX is that it must return a single element. - -> For instance, several JSX elements written as siblings with no parent wrapper element will not transpile. - -#### Valid JSX: - -```text -
-

Paragraph One

-

Paragraph Two

-

Paragraph Three

-
-``` - -#### Invalid JSX: - -```text -

Paragraph One

-

Paragraph Two

-

Paragraph Three

-``` - -**To put comments inside JSX, you use the syntax {/\* \*/} to wrap around the comment text.** - -**To put comments inside JSX, you use the syntax {/\* \*/} to wrap around the comment text.** - -The code editor has a JSX element similar to what you created in the last challenge. Add a comment somewhere within the provided div element, without modifying the existing h1 or p elements. - -```text -const JSX = ( -
- {/* This is a comment */} -

This is a block of JSX

-

Here's a subtitle

-
-); -``` - -> With React, we can render this JSX directly to the HTML DOM using React's rendering API known as ReactDOM. - -> ReactDOM offers a simple method to render React elements to the DOM which looks like this: - -`ReactDOM.render(componentToRender, targetNode)` - -* the first argument is the React element or component that you want to render, -* and the second argument is the DOM node that you want to render the component to. - -> ReactDOM.render\(\) must be called after the JSX element declarations, just like how you must declare variables before using them. - -> key difference in JSX is that you can no longer use the word class to define HTML classes. - -* ---> This is because class is a reserved word in JavaScript. Instead, JSX uses className - -> the naming convention for all HTML attributes and event references in JSX become camelCase - -> a click event in JSX is onClick, instead of onclick. Likewise, onchange becomes onChange. While this is a subtle difference, it is an important one to keep in mind moving forward. - -### Apply a class of myDiv to the div provided in the JSX code. - -* The constant JSX should return a div element. -* The div should have a class of myDiv. - -```text -const JSX = ( -
-

Add a class to this div

-
-); -``` - -#### Ans: - -```text -const JSX = ( -
-

Add a class to this div

-
-); -``` - -## React: Learn About Self-Closing JSX Tags - --Another important way in which JSX differs from HTML is in the idea of the self-closing tag. - -> In HTML, almost all tags have both an opening and closing tag: `
;` the closing tag always has a forward slash before the tag name that you are closing. - -> there are special instances in HTML called "self-closing tags", or tags that don't require both an opening and closing tag before another tag can start. - -> For example the line-break tag can be written as `
` or as `
,` but should never be written as `

`, since it doesn't contain any content. - -> In JSX, the rules are a little different. Any JSX element can be written with a self-closing tag, and every element must be closed. The line-break tag, for example, must always be written as `
` in order to be valid JSX that can be transpiled. A `
`, on the other hand, can be written as `
` or`
`. The difference is that in the first syntax version there is no way to include anything in the `
`. - -### Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don't change any of the content - you only need to close tags where they are needed. - -```text -const JSX = ( -
-

Welcome to React!


-

Be sure to close all tags!

-
-
-); -``` - -### Ans: - -```text -const JSX = ( -
-

Welcome to React!


-

Be sure to close all tags!

-
-
-); -``` - -### React: Create a Stateless Functional Component - -> There are two ways to create a React component. The first way is to use a JavaScript function. - -> Defining a component in this way creates a stateless functional component. - -> think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data. - -**To create a component with a function, you simply write a JavaScript function that returns either JSX or null** - -* React requires your function name to begin with a capital letter. - -> Here's an example of a stateless functional component that assigns an HTML class in JSX: - -```text -// After being transpiled, the
will have a CSS class of 'customClass' -const DemoComponent = function() { - return ( -
- ); -}; -``` - -> Because a JSX component represents HTML, you could put several components together to create a more complex HTML page. - -### The code editor has a function called MyComponent. Complete this function so it returns a single div element which contains some string of text. - -Note: The text is considered a child of the div element, so you will not be able to use a self-closing tag. - -```text -const MyComponent = function() { - // Change code below this line - - - - // Change code above this line -} -``` - -### ANS: - -```text -const MyComponent = function() { - // Change code below this line - -return ( -
Some Text
- ); - - // Change code above this line -}; -``` - -## React: Create a React Component - -> The other way to define a React component is with the ES6 class syntax. In the following example, Kitten extends React.Component: - -```text -class Kitten extends React.Component { - constructor(props) { - super(props); - } - - render() { - return ( -

Hi

- ); - } -} -``` - -> This creates an ES6 class Kitten which extends the React.Component class. - -> So the Kitten class now has access to many useful React features, such as local state and lifecycle hooks. - -> Also notice the Kitten class has a constructor defined within it that calls super\(\) - -> It uses super\(\) to call the constructor of the parent class, in this case React.Component - -> The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component's constructor with super, and pass props to both. - -> This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. - -### MyComponent is defined in the code editor using class syntax. Finish writing the render method so it returns a div element that contains an h1 with the text Hello React!. - -```text -class MyComponent extends React.Component { - constructor(props) { - super(props); - } - render() { - // Change code below this line - - - - // Change code above this line - } -}; -``` - -### ANS: - -```text -class MyComponent extends React.Component { - constructor(props) { - super(props); - } - render() { - // Change code below this line - return ( -
-

Hello React!

-
- ); - - - // Change code above this line - } -}; -``` - -## React: Create a Component with Composition - -> Imagine you are building an App and have created three components, a Navbar, Dashboard, and Footer. - -> To compose these components together, you could create an App parent component which renders each of these three components as children. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. - -* For example, in the render method you could write: - -```text -return ( - - - -