This is where we write our first codes in our react track (kinda).
But before we proceed, it is important that we all have an understanding of the following
- Basic understanding of HTML and CSS
- Basic Knowledge of JavaScript (ES6+ syntax and features).
- Basic knowledge of the DOM and DOM manipulation.
- You should also have Node.js and npm installed globally on your computer.
If you haven't, you can download Node.js and npm here. Make sure you download the latest stable version.
Adding react to a project
There are a few different ways of using the react library for your project(s), depending on why you need react for your webpage.
Recall that react is used to add dynamic content to your web page
So it follows that, maybe, only a little section (component) of your web page (probably a widget) needs dynamic content.
The first way to use react in you web application is to embed it in your HTML file like any other javascript library.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Home!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// all react codes will be here
</script>
</body>
</html>
The code above is the basic way to get started with react applications. You would notice that the only difference between this and your everyday HTML document is the script tags (of course you have used script tags a lot), so it's basically no difference.
The script tags are used to load in the libraries needed for react to run:
- React - the first script tag imports the react library
- React DOM - the second script tag imports react-DOM, which allowas us to use DOM specific methods in our script.
- Babel - this is a third-party compiler that allows our applications run ES6+ on older browsers.
For now, we only focus on the script tag at the bottom of the component where all our react logic would go.
Within the script tags, input the following code:
<script type='text/babel'>
const Hello = () => {
return <h1>Hello World</h1>
}
ReactDOM.render(<Hello />, document.querySelector('root'));
</script>
The code above defines the component Hello like any normal arrow function. However, you would notice the html-like code in the code, but React is a JavaScript framework, right? Well react allows us to write JSX, which is JavaScript and XML, in our code. So the html-like parts of the code are actually XML.
On the last line, we call the ReactDOM's render function (this comes with the react-dom package we added to our script) and pass in our component and where we want it to be displayed on the DOM, in this case the root div.
Notice that in naming the Hello component, we capitalized the first letter, this is the way to tell react that it is a user-defined component and not a regular html tag.
This is how the whole code should look now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<title>Home!</title>
</head>
<body>
<div id="root"></div>
<script type='text/babel'>
const Hello = () => {
return <h1>Hello World!</h1>
}
ReactDOM.render(<Hello />, document.querySelector('#root'))
</script>
</body>
</html>
The result:
.
The next post will deal with the second way of using react in our application. This is to ensure that we don't consume too much at a time.
Top comments (0)