As I have decided to learn ReactJS, I will document every learning with a blog and ensure that it will help me and the person reading this.
What is the building block of ReactJS?
We all know there is a basic building block or unit for everything in the universe and ReactJS is not out of this world.
The answer is "COMPONENTS". Now the question arises here is what is Component?
Components are a piece of UI which has its own logic and appearance
function Helloworld(){
return (
<h1> Hello world!! this is my first line of React </h1>
);
}
The above function helloworld is a component.A component can be as small as this and can be as big as an entire page.
Now that we have created our first component, we can now nest it into another component.
the above code or component i.e Helloworld can be nested into another component, it can be of two types
- FIRST IS:- if the component is in the same file then you just have to do this:-
// THIS IS COMPONENT 1:-
function Helloworld(){
return (
<h1> Hello world!! this is my first line of React </h1>
);
}
// THIS IS COMPONENT 2 or the main component:-
export default function Helloworld(){
// here export default is telling that this component is the main component of the file
return (
<Helloworld/> // just have to nest it in
<button> click me</button>
);
}
Here you can see that the tag is starting from capital letter by this you can identify that:-
THE TAG IS A REACT COMPONENT
IT ALWAYS STARTS WITH CAPITAL LETTER
Now the second arises here is, what to do when one components are on different files.
// This file name is hello.jsx (jsx for react file)
function Helloworld(){
return (
<h1> Hello world!! this is my first line of React </h1>
);
}
export deafult Helloworld; // it can also be exported like this
And in the other file or main file
//other import syntax and other things
import Helloworld from './hello.jsx' // importing hello.jsx from above as Helloworld
// remember about capital letter
export default function Helloworld(){
return (
<Helloworld/> // just have to nest it in
<button> click me</button>
);
}
Now that we have learned about components we will now learn about how to get started with ReactJS in the next blog.