Today is my first day of the #100daysofCode challenge and though this journey I have committed myself to learn react and become a front-end developer and also share what I have learn.
So the first question I had to ask myself is what is react? According to the react website react is a JavaScript library for building beautiful interfaces.
I also had to ask myself why use react to build web apps instead of using plain old JavaScript and the main reason I found is that react divides your web app into smaller reusable parts called components.
So before I go on talking about components let write a simple react program to display our name on a web page.
lets start with our html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Name App</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js">
https://unpkg.com/@babel/standalone/babel.min.js. </script>
<script src="scripts/app.js" type="text/babel"></script>
</body>
</html>
We start by writing the html element div and giving it an id of app as this is where our name will appear on the screen.
We then add links for react and react dom packages as we are using react to develop our app and need both react and react dom otherwise this would be just a plain JavaScript app.
The react package is used for writing react components while the react dom package is used to provide dom specific methods like render() that helps in displaying our app on the web page.
The Babel package included enables our browser to understand jsx (JavaScript xml).
Jsx just enable us to write html in react.
JavaScript file
ReactDOM.render(<h1>charles wachira</h1>, document.getElementById('root'));
In our JavaScript file we use the render() method provided by the react dom package to display our app on the web page.
Now lets get back to react components. What is a react component?
A react component is a basically reusable pieces of code which building blocks of your react app. They take input data and return something to be displayed on the web page using a the render method .
a simple component would look like this
const myName =()=><p> charles wachira</p>;
This is a component that takes no input but on displays my name.
There are basically two types of components
1.Class components
2.Functional components.
CLASS COMPONENTS
A class component is a component that is created or defined using ES6 class syntax.
class Hi extends React.Component {
render() {
return(<h1>my name is charles wachira </h1>)
}
}
This a simple class component which return a h1 element with my name on the web page using the render method.
FUNCTION COMPONENTS
A function component is basically a JavaScript function that return a react element.
function myName(){
return<h1>my name is charles wachira </h1>;
}
This function component returns a h1 with my name.
This has been my first day learning react and it has been a awesome one having learnt some react basics. I hope to to continue learning and become a good front-end developer .
cheers guys and happy learning .
Top comments (0)