Lesson-3-Run-Custom-Code

Example Code 1: In the example, we display “Hello World”.

Open “App.js” and update App() function such that it will become as shown below.
After updating the code, run the application.

// File: App.jsx
function App() {
  return (
    <h1>Hello World</h1>
  );
}

Example Code 2: In the example, we displayed name of author for this website.

Code is just like above example but here we wrote name instead of “Hello World”.

// File: App.jsx
function App() {
  return (
    <h1>Muhammad Abo Bakar Aslam</h1>
  );
}

Example Code 3: In the example, we changed the icon that appears in the browser tab when we open the app. We used an icon in which “Pf” is written because we are focusing to develop author’s portfolio. You can use either your own icon or download our PNG file by click on following button. Our file is in PNG format. You will have to convert it into .ico file by yourself.

Download PNG File

Your icon should be with .ico extension. If download our icon, then you should convert it into .ico file because own downloaded icon is in PNG format. You can use any online converter.
Save your .ico file in “public” folder. For example, your icon file name is “portfolioIcon”.
Open “index.html” file. In this file, line 1 is written. You should update it such that this line will look like line 2. In line 2, we just used our file-name instead of “favicon”.

<!--File: index.html-->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/portfolioIcon.ico" />

Example Code 4: Showing name of author at middle of the web-page.

Method 1: update App() function in App.js like as shown below. In this method, we used inline CSS.

// File: App.jsx
function App() {
  return (
    <h1 style={{textAlign: 'center'}}>Muhammad Abo Bakar Aslam</h1>
  );
}

Method 2: Use external CSS.

In App.css file, “App” class is used to align text as center. Therefore, we can use class name directly to <h1>.

// File: App.jsx
function App() {
  return (
    <h1 className='App'>Muhammad Abo Bakar Aslam</h1>
  );
}

Example Code 5: Displaying an introduction about author below his name. Introduction will also be shown at middle.

If you write <p> below <h1>, then it will generate an error (Just as shown below). Because function should return only one element at a time.
Same style property is used. Now double quotation marks are used. In other words, both single and double quotation marks can be used for value of style-property.

Code With Error:

// File: App.jsx
function App() {
  return (
      <h1 className='App'>Muhammad Abo Bakar Aslam</h1>
      <p className="App">Introduction about author</p>
  );
}

In React, when you want to return multiple HTML elements or components from a single component function, you should wrap them in a common parent element or component. To do this, you can use a feature called a “Fragment”. In code, a fragment is represented using the <></> syntax.
Above error can be solve by Keyed Fragments such as shown below. We used a container that will hold all HTML elements.

Code Without Error

// File: App.jsx
function App() {
  return (
    <div>
      <h1 className='App'>Muhammad Abo Bakar Aslam</h1>
      <p className="App">Introduction about author</p>
    </div>
  );
}

Example Code 6:

If you don’t want to use external classes, then you can write code using inline CSS, like as below.

In this code, we used multiple classes separated by comma (,).
When you used “textAlign” property in inline CSS, then write it in camel casing style and without white space. But in case of external CSS, it will be written by using hyphen(-) i.e., text-align.

// File: App.jsx
function App() {
  return (
    <div>
      <h1 style={{margin: '25px 0px', textAlign: 'center'}}>Muhammad Abo Bakar Aslam</h1>
      <p  style={{textAlign: 'center'}}>Introduction about author</p>
    </div>
  );
}

Example Code 7:

Here, we did same work as in previous example, but by using external CSS file. Following are two files. One is App.css and other is App.js.

First line in both files are commented. Note the method of commenting, that is different in both files.

// File: App.jsx
function App() {
  return (
    <div>
      <h1>Muhammad Abo Bakar Aslam</h1>
      <p>Introduction about author</p>
    </div>
  );
}

/* File: App.css */
h1{
  text-align: center;
  margin: 10px 0px;
}
p{
  text-align: center;
}

Example Code 8: Displaying image.

Some lines are commented.
Online inline styles are used here so that property is fixed to a specific image. If you have multiple image and you want to display in same size, then you shall specify property in your style sheet.
It is noted that there is a portion of line that is commented. In this way, you can also comment any HTML part in react environment.
Line 1 is also commented. In this way, you can comment any non-HTML content in react environment. To comment multiple lines, you can use /* and */ at starting and ending of lines, respectively.

// File: App.jsx
function App() {
  return (
    <div>
        <div> {/*outer-container*/}
          <div style={{width:'107px', height:'142px', border:"1px solid black"}}> {/*image-container*/}
            <img src="imgs.jpg" alt="Abo Bakar" style={{maxWidth:"100%", height:"auto"}} />
          </div>
        </div>
    </div>
  );
}

Share this: