Day 2 of React — As a Beginner

Things I’ve learned on day 2 of React…

Photo by Caspar Camille Rubin on Unsplash

Things I Have Covered In This Blog:

1. Create your first Component.
2. Display the Output.

Create Your First Component

Let’s try to display an image using a component.

• Click the “src” folder and create a folder inside it called “Image”.
• Then click the ImageComponent folder and then create a file called “image.js”. Make sure to name your files in a title case like ThisIsAFolder.js. This enables React to understand it’s a component and not an HTML tag and try to provide correct solutions in case there’s any error occurred.
• Download the image from this link — https://unsplash.com/photos/8gxiL7WfcEE — and store the image in the ImageComponent folder.
• Import this image into the “Image.js” file like this (There are many methods by which you can use an image in React. This is one of them.)👇

Importing the unsplashImage

• Now go ahead and create a function called Image.
• Return an img tag with the src attribute like this👇

Image function returns an image with some attributes

• You should use {unsplashImage} in order to use that image. You can assume it as a variable now so you have to use this variable inside the curly braces. Otherwise, it’ll throw an error. This is one of the main differences between vanilla JS and React.
• Now you have to export this function as export default Image at the end of this file.
• Then go to the App.js file and import it there like — import Image from './ImageComponent/Image' Here you don’t need the “.js” extension. React can understand that it’s a JavaScript file. However, if you’re importing files like CSS then you have to include the ”.css” extension.
• Then you can simply use this component like a normal HTML tag by using it’s name “Image” like this👇

Importing the “Image” component in the App.js file

• If you want to return this component more than once, then you must include () and enclose those components with a div or an empty tag (Fragment). Like this👇

• This is because JSX looks like HTML, but under the hood, it is transformed into plain JavaScript objects. You can’t return two objects from a function without wrapping them into an array. This explains why you also can’t return two JSX tags without wrapping them into another tag or a Fragment.
• Finally, make sure to close all the tags.

Display the Output

• Use npm start to run Your React App.

Congratulations🎉 You’ve created your first-ever component in React.

HACK

• Make sure to practice these things by asking ChatGPT to provide some problems to you. Make sure to not beat yourself up. Just go easy on it, okay?
• And JSX is nothing but HTML inside JavaScript. You can easily convert any HTML that you want to convert as JSX using this link — https://transform.tools/html-to-jsx

I hope you find this blog useful. If you did then make sure to follow me to stay updated whenever I’m publishing valuable blogs just like this.

Make sure to follow me on Twitter.

Bye for now…😁👋

Check Out My Other Blogs As Well

Day 1 of React — As a Beginner

Day 1 of TypeScript — As a Beginner