#### React vs Vue popularity in February 2020
#### React vs Vue popularity in February 2020
React Official GitHub Repository
React Official GitHub Repository
Vue Official GitHub Repository
Vue Official GitHub Repository
Why we choose to use react ? We use react because of the following reasons:
Why we choose to use react ? We use react because of the following reasons:
@ -106,7 +107,7 @@ const jsxElement = <h1>I am a JSX element</h1>
The above strange looking code seems a JavaScrip but it is not JavaScript and it seems an HTML but not completely an HTML element. It is a mix of JavaScript and and an HTML element. JSX can allow us to use HTML in JavaScript. The HTML element in the above JSX is h1.
The above strange looking code seems a JavaScrip but it is not JavaScript and it seems an HTML but not completely an HTML element. It is a mix of JavaScript and and an HTML element. JSX can allow us to use HTML in JavaScript. The HTML element in the above JSX is h1.
### JSX Element
#### JSX Element
As you have seen in the above example, JSX has a JavaScript and HTML like syntax. JSX element could be a single HTML element or many HTML elements wrapped in a parent HTML element.
As you have seen in the above example, JSX has a JavaScript and HTML like syntax. JSX element could be a single HTML element or many HTML elements wrapped in a parent HTML element.
@ -148,7 +149,7 @@ const header = (
As you can see the header element is a parent element for all the inner HTML elements and JSX must be wrapped by an outer parent element. Without the header HTML element or other parent HTML element the above JSX is invalid.
As you can see the header element is a parent element for all the inner HTML elements and JSX must be wrapped by an outer parent element. Without the header HTML element or other parent HTML element the above JSX is invalid.
### Rendering JSX Element
#### Rendering JSX Element
To render a JSX element to HTML document. We should create on index HTML. The index.html is the only HTML file you will have in any react application. That is why every react application is a single page application. Let us create an index.html file.
To render a JSX element to HTML document. We should create on index HTML. The index.html is the only HTML file you will have in any react application. That is why every react application is a single page application. Let us create an index.html file.
@ -462,9 +463,9 @@ Let us apply some style to our JSX elements and see the result.
Now, lets us apply style the header part only [Live on code pen](https://codepen.io/Asabeneh/full/ZEGBYBG).
Now, lets us apply style the header part only [Live on code pen](https://codepen.io/Asabeneh/full/ZEGBYBG).
## Style and className
#### Style and className in JSX
So far, we did apply any style. Now, let us add style to our JSX elements. Inline style became very popular after the emergence of react. Let us add border to the header JSX element.
So far, we did not apply any style in the JSX elements. Now, let us add style to our JSX elements. Inline style became very popular after the emergence of react. Let us add border to the header JSX element.
To add style to a JSX element we use inline style or className. We inject the style object using {}. Every CSS properties become a key and every CSS properties value become value for the the object. For instance, in the example below, border is a key and '2px solid orange' is a value, color is a key and 'black' is a value, fontSize is a key and '18px' is a value. All two word CSS properties will change to camelCase when we use them as key in the CSS object in react or JavaScript.[Live on code pen](https://codepen.io/Asabeneh/full/ZEGBYbY).
To add style to a JSX element we use inline style or className. We inject the style object using {}. Every CSS properties become a key and every CSS properties value become value for the the object. For instance, in the example below, border is a key and '2px solid orange' is a value, color is a key and 'black' is a value, fontSize is a key and '18px' is a value. All two word CSS properties will change to camelCase when we use them as key in the CSS object in react or JavaScript.[Live on code pen](https://codepen.io/Asabeneh/full/ZEGBYbY).
@ -779,7 +780,9 @@ Instead of style object using regular styling method is more easier than the abo
🌕 You are awesome. You have just completed day 2 challenges and you are two steps ahead on your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 You are awesome. You have just completed day 2 challenges and you are two steps ahead on your way to greatness. Now do some exercises for your brain and for your muscle.
### Exercises: What is React?
### Exercises
#### Exercises: What is React?
1. What is React?
1. What is React?
2. What is a library ?
2. What is a library ?
@ -790,13 +793,13 @@ Instead of style object using regular styling method is more easier than the abo
7. What is React Virtual DOM
7. What is React Virtual DOM
8. What does a web application or a website(composed of) may have?
8. What does a web application or a website(composed of) may have?
### Exercises: Why React?
#### Exercises: Why React?
1. Why you chose to use react?
1. Why you chose to use react?
2. What measures do you use to know popularity ?
2. What measures do you use to know popularity ?
3. What is more popular, react or Vue ?
3. What is more popular, react or Vue ?
### Exercises: JSX
#### Exercises: JSX
1. What is an HTML element ?
1. What is an HTML element ?
2. Write is a self closing HTML element ?
2. Write is a self closing HTML element ?
@ -805,20 +808,20 @@ Instead of style object using regular styling method is more easier than the abo
5. What is babel ?
5. What is babel ?
6. What is a transpiler?
6. What is a transpiler?
### Exercises:JSX Elements
#### Exercises:JSX Elements
1. What is JSX element
1. What is JSX element
2. Write your name in JSX element and store it in a name variable
2. Write your name in JSX element and store it in a name variable
3. Write a JSX element which displays your full name, country, title, gender, email, phone number. Use h1 for the name and p for the rest of the information and store it in a user variable.
3. Write a JSX element which displays your full name, country, title, gender, email, phone number. Use h1 for the name and p for the rest of the information and store it in a user variable.
4. Write a footer JSX element
4. Write a footer JSX element
### Exercises - Inline Style
#### Exercises - Inline Style
1. Create a style object for the main JSX
1. Create a style object for the main JSX
2. Create a style object for the footer and app JSX
2. Create a style object for the footer and app JSX
Asabeneh
4 years ago