Learn what react is and how to create your first react app in this web development tutorial.
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript Framework, or kind of.
Actually React is a JavaScript library that is declarative, efficient, and flexible for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.
React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js.
However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.
How dos React work ?
React functions by using a couple of tools like
Declarative programming in React
Declarative programming paradigm is React core philosophy. This means that you will design views for each state of an application, and React updates by rendering each component when data changes.
React Components
React code is made of entities called components. These components are reusable and must be formed in the SRC folder following the Pascal Case as its naming convention (capitalize camelCase). Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass the values between components through “props”
What is JSX?
JSX is a syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax. The nice thing about JSX is that apart from following three JSX rules, you don’t need to learn any new symbols or syntax outside of HTML and JavaScript.
Note that browsers don’t understand JSX out of the box, so you’ll need a JavaScript compiler, such as a Babel, to transform your JSX code into regular JavaScript.
Run React
HTML vs the DOM
If you look at the DOM elements inside your browser developer tools, you will notice the DOM includes the <h1>element. The DOM of the page is different from the source code – or in other words, the original HTML file you created.
This is because the HTML represents the initial page content, whereas the DOM represents the updated page content which was changed by the JavaScript code you wrote.
Updating the DOM with plain JavaScript is very powerful but verbose. You’ve written all this code to add an <h1>element with some text:
Getting Started with React
To use React in your project, you can load two React scripts from an external website called unpkg.com:
UNPKG : https://unpkg.com/
react is the core React library.
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>react-dom provides DOM-specific methods that enable you to use React with the DOM.
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>Instead of directly manipulating the DOM with vanilla JavaScript, you can use the ReactDOM.render() method from react-dom to tell React to render our<h1> title inside our #app element.
ReactDOM.render(<h1>My React App</h1>, app);But if you try to run this code in the browser, you will get a syntax error:
This is because<h1>...</h1> is not valid Javascript. This piece of code is JSX.
Add JavaScript compiler, Babel to your project
To add Babel to your project, copy and paste the following script in your index.html file:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>Video Tutorial
For a more in depth understanding of the subject, check out the video tutorial.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<h1>What is React js</h1>
<!-- React -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- React DOM -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById("app");
// Use DOM Methods
// Create a new H1 element
const header = document.createElement("h1");
// Create a new text node for the H1 element
const headerContent = document.createTextNode("My First React App 🚀");
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
app.appendChild(header);
</script>
<!-- Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById("app")
ReactDOM.render(<h1>My first React App 🚀</h1>, app)
</script>
</body>
</html>