@ -111,9 +111,9 @@ JSX stands for JavaScript XML. JSX allows us to write HTML elements with JavaScr
// JSX syntax
// we don't need to use quotes with JSX
const jsxElement = <h1>I am a JSX element</h1>
const welcome = <h1>Welcome to 30 Days of React Challenge</h1>
const data = <small>Oct 2, 2020</small>
const jsxElement = <h1>I am a JSX element</h1>;
const welcome = <h1>Welcome to 30 Days of React Challenge</h1>;
const data = <small>Oct 2, 2020</small>;
```
The above strange looking code seems like JavaScript and it seems like , but it is not JavaScript and it seems like HTML but not completely an HTML element. It is a mix of JavaScript and an HTML elements. JSX can allow us to use HTML in JavaScript. The HTML element in the JSX above is _h1_ and _small_.
@ -125,13 +125,13 @@ As you have seen in the example above, JSX has a JavaScript and HTML like syntax
This JSX element has only one HTML element which is _h1_.
```js
const jsxElement = <h1>I am a JSX element</h1> // JS with HTML
const jsxElement = <h1>I am a JSX element</h1>; // JS with HTML
```
Let's make more JSX elements by declaring a new variable named title and content inside _h2_.
```js
const title = <h2>Getting Started React</h2>
const title = <h2>Getting Started React</h2>;
```
Let us add a subtitles and other contents to this JSX element by adding additional HTML elements. Every HTML element should be wrapped by an outer HTML element to create a valid JSX element. The name title variable also should be changed to header because our JSX element is containing almost all of the header of the application.
@ -143,7 +143,7 @@ const header = (
<h2>Getting Started React</h2>
<h3>JavaScript Library</h3>
</header>
)
);
```
Let us keep adding more elements. Additional HTML elements to display the author name and year.
@ -157,7 +157,7 @@ const header = (
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</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.
@ -247,13 +247,13 @@ The babel library is linked to our document and now we can make use of it. The n
Now the index.html has everything we need to write React code. Let us get the root element using document.querySelect('.root') and assign it to a variable name rootElement. The is the only place we directly interact with DOM.
Now the index.html has everything we need to write React code. Let us get the root element using document.querySelect('.root') and assign it to a variable name rootElement. This is the only place we directly interact with DOM.
Now, you knew JSX and JSX element. Let us render the JSX element on the browser, in order to do so we need the React and ReactDOM library. In addition to the React and ReactDOM we need babel to transpile the JSX to JavaScript code. The ReactDOM package has a method render. The render method takes two arguments:a JSX element or a component and the root document. See the code below. [Live on code pen](https://codepen.io/Asabeneh/full/JjdbjqK).
@ -280,14 +280,14 @@ Now, you knew JSX and JSX element. Let us render the JSX element on the browser,
@ -332,11 +332,11 @@ Let us render more content. To render more content, the JSX element should have
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
)
);
// we render the JSX element using the ReactDOM package
// ReactDOM has the render method and the render method takes two arguments
ReactDOM.render(header, rootElement)
ReactDOM.render(header, rootElement);
</script>
</body>
</html>
@ -359,7 +359,7 @@ const main = (
<li>JavaScript</li>
</ul>
</main>
)
);
```
JSX element for the footer part of the website.
@ -370,7 +370,7 @@ const footer = (
<footer>
<p>Copyright 2020</p>
</footer>
)
);
```
Now, we have three JSX elements: the header, main and footer. The best way to render all of the three JSX elements is by wrapping them all in a parent JSX element or putting them in an array. To include JSX element inside another JSX element we use the curly bracket, {} and call the name of the JSX inside the curly bracket.
@ -385,7 +385,7 @@ const header = (
<p>Asabeneh Yetayeh</p>
<small>Oct 2, 2020</small>
</header>
)
);
// JSX element for the main part of the website
const main = (
@ -397,14 +397,14 @@ const main = (
<li>JavaScript</li>
</ul>
</main>
)
);
// JSX element for the footer part of the website
const footer = (
<footer>
<p>Copyright 2020</p>
</footer>
)
);
// JSX element which contain all, it is a container or parent
const app = (
@ -413,7 +413,7 @@ const app = (
{main}
{footer}
</div>
)
);
```
Now, let us put everything together and render it to the browser. [Live on code pen](https://codepen.io/Asabeneh/full/MWwbYWg).
@ -441,7 +441,7 @@ Now, let us put everything together and render it to the browser. [Live on code
It is good practice to open the browser console while you are developing your application to know, if everything goes well.
@ -541,13 +541,13 @@ Let us keep styling all the JSX elements we have created: the header, main and t
In JSX element we write className instead of class because class is a reserved word in JavaScript. Similar to className, htmlFor instead of for in label tag. See the example below.
```js
const title = <h1className='title'>Getting Started React</h1>
const title = <h1className="title">Getting Started React</h1>;
@ -769,14 +769,14 @@ Instead of style object using regular styling method is more easy than the one a
<small>Date: Oct 1, 2020</small>
</div>
</header>
)
);
// JSX element, main
const main = (
<main>
<divclassName='main-wrapper'>
<divclassName="main-wrapper">
<p>
Prerequisite to get started{' '}
Prerequisite to get started{" "}
<strong>
<em>react.js</em>
</strong>
@ -789,28 +789,28 @@ Instead of style object using regular styling method is more easy than the one a
</ul>
</div>
</main>
)
);
// JSX element, footer
const footer = (
<footer>
<divclassName='footer-wrapper'>
<divclassName="footer-wrapper">
<p>Copyright 2020</p>
</div>
</footer>
)
);
// JSX element, app
const app = (
<divclassName='app'>
<divclassName="app">
{header}
{main}
{footer}
</div>
)
);
// we render the JSX element using the ReactDOM package
ReactDOM.render(app, rootElement)
ReactDOM.render(app, rootElement);
</script>
</body>
</html>
@ -823,17 +823,17 @@ Instead of style object using regular styling method is more easy than the one a
So far, we used static data on the JSX elements, but we can also pass different data types as a dynamic data. The dynamic data could be string, number, boolean, array or object. Let us see each of the data types step by step. To inject data to a JSX we use the {} bracket.
```js
const welcome = 'Welcome to 30 Days Of React'
const title = 'Getting Started React'
const subtitle = 'JavaScript Library'
const authorFirstName = 'Asabeneh'
const authorLastName = 'Yetayeh'
const date = 'Oct 1, 2020'
const welcome = "Welcome to 30 Days Of React";
const title = "Getting Started React";
const subtitle = "JavaScript Library";
const authorFirstName = "Asabeneh";
const authorLastName = "Yetayeh";
const date = "Oct 1, 2020";
// JSX element, header
const header = (
<header>
<divclassName='header-wrapper'>
<divclassName="header-wrapper">
<h1>{welcome}</h1>
<h2>{title}</h2>
<h3>{subtitle}</h3>
@ -843,7 +843,7 @@ const header = (
<small>Date: {date}</small>
</div>
</header>
)
);
```
Similar to the header JSX element, we can implement data injection to main and footer JSX elements.
@ -853,19 +853,19 @@ Similar to the header JSX element, we can implement data injection to main and f
In this section we inject only strings
```js
const welcome = 'Welcome to 30 Days Of React'
const title = 'Getting Started React'
const subtitle = 'JavaScript Library'
const firstName = 'Asabeneh'
const lastName = 'Yetayeh'
const date = 'Oct 2, 2020'
const welcome = "Welcome to 30 Days Of React";
const title = "Getting Started React";
const subtitle = "JavaScript Library";
const firstName = "Asabeneh";
const lastName = "Yetayeh";
const date = "Oct 2, 2020";
// JSX element, header
// JSX element, header
const header = (
<header>
<divclassName='header-wrapper'>
<divclassName="header-wrapper">
<h1>{welcome}</h1>
<h2>{title}</h2>
<h3>{subtitle}</h3>
@ -875,25 +875,25 @@ const header = (
<small>Date: {date}</small>
</div>
</header>
)
);
```
##### Injecting a number to a JSX Element
```js
const numOne = 3
const numTwo = 2
const numOne = 3;
const numTwo = 2;
const result = (
<p>
{numOne} + {numTwo} = {numOne + numTwo}
</p>
)
);
const yearBorn = 1820
const currentYear = new Date().getFullYear()
const age = currentYear - yearBorn
const personAge = <p> {age}</p>
const yearBorn = 1820;
const currentYear = new Date().getFullYear();
const age = currentYear - yearBorn;
const personAge = <p> {age}</p>;
```
As you can see in the example above, it is possible to do some arithmetic calculations and ternary operations.
@ -903,14 +903,14 @@ As you can see in the example above, it is possible to do some arithmetic calcul
To give an example for an array, let us change the HTML, CSS, JavaScript to an array and inject it to the main JSX element below. We will cover more in much detail later, in rendering lists section.
```js
const techs = ['HTML', 'CSS', 'JavaScript']
const techs = ["HTML", "CSS", "JavaScript"];
// JSX element, main
const main = (
<main>
<divclassName='main-wrapper'>
<divclassName="main-wrapper">
<p>
Prerequisite to get started{' '}
Prerequisite to get started{" "}
<strong>
<em>react.js</em>
</strong>
@ -919,7 +919,7 @@ const main = (
<ul>{techs}</ul>
</div>
</main>
)
);
```
##### Injecting an object to a JSX Element
@ -952,7 +952,7 @@ Now, let us put everything together. Here, in the example below, the data is inj
body {
height: 100%;
line-height: 1.5;
font-family: 'Montserrat';
font-family: "Montserrat";
font-weight: 300;
color: black;
}
@ -1034,21 +1034,21 @@ Now, let us put everything together. Here, in the example below, the data is inj
@ -1058,36 +1058,36 @@ Now, let us put everything together. Here, in the example below, the data is inj
<small>Date: {date}</small>
</div>
</header>
)
);
const numOne = 3
const numTwo = 2
const numOne = 3;
const numTwo = 2;
const result = (
<p>
{numOne} + {numTwo} = {numOne + numTwo}
</p>
)
);
const yearBorn = 1820
const currentYear = new Date().getFullYear()
const age = currentYear - yearBorn
const yearBorn = 1820;
const currentYear = new Date().getFullYear();
const age = currentYear - yearBorn;
const personAge = (
<p>
{' '}
{" "}
{author.firstName} {author.lastName} is {age} years old
</p>
)
);
// JSX element, main
const techs = ['HTML', 'CSS', 'JavaScript']
const techs = ["HTML", "CSS", "JavaScript"];
// JSX element, main
const main = (
<main>
<divclassName='main-wrapper'>
<divclassName="main-wrapper">
<p>
Prerequisite to get started{' '}
Prerequisite to get started{" "}
<strong>
<em>react.js</em>
</strong>
@ -1098,30 +1098,30 @@ Now, let us put everything together. Here, in the example below, the data is inj
{personAge}
</div>
</main>
)
);
const copyRight = 'Copyright 2020'
const copyRight = "Copyright 2020";
// JSX element, footer
const footer = (
<footer>
<divclassName='footer-wrapper'>
<divclassName="footer-wrapper">
<p>{copyRight}</p>
</div>
</footer>
)
);
// JSX element, app
const app = (
<divclassName='app'>
<divclassName="app">
{header}
{main}
{footer}
</div>
)
);
// we render the JSX element using the ReactDOM package
ReactDOM.render(app, rootElement)
ReactDOM.render(app, rootElement);
</script>
</body>
</html>
@ -1132,8 +1132,8 @@ Now, let us put everything together. Here, in the example below, the data is inj
As you can see the lists are all in one line. Therefore, we should format the list the way we want, before we inject it to JSX. In order to format the list, we should modify the array before we will inject it to JSX. We can modify the array using _map_. As a react developer you should have a very good understanding of functional programming(map, filter, reduce, find, some, every). If you don't have good understanding of functional programming, check out day 1.
Pierre Celestin Moussa
7 months ago
committed by
GitHub