React is used to build websites that run entirely in the browser. The core feature of React.js is JSX. JSX is closely related to HTML and XML. Below table gives the differences between the three.
| Language | Full Form | Use | Tags |
|---|---|---|---|
| HTML | Hyper Text Markup Language | Build websites | Predefined set of tags like H1, H2, P etc. |
| XML | Extensible Markup Language | Build data | Custom Tags |
| JSX | JavaScript XML | Write HTML mixed with JavaScript | HTML Tags + Custom Tags |
Examples
HTML
<html>
<body>
<div>
<h1>This is heading 1</h1>
<p>This is an example paragraph in HTML</p>
</div>
</body>
</html>
XML
<example>
<title>XML Example</title>
<note>This is a note</note>
<data1>Example Data</data1>
<data2>Example Data</data2>
</example>
JSX
function ExampleReactComponent() {
return (
<div>
<h1>This is heading 1</h1>
<p>This is an example paragraph in JSX</p>
</div>
)
}
As you can see, HTML, XML and JSX are all very similar. JSX is writing HTML mixed with JavaScript. So it is called JSX - Javascript XML.
The advantage of mixing HTML with Javascript is, we can make the HTML dynamic. For example toggle a class name, when a button is clicked.
React Components
React allows us to define our own components that return JSX. A react component is just a regular JavaScript function that returns JSX.
When a root React Component renders, it automatically converts JSX into HTML and adds it the webpage.
With React you can create your own custom components (similar to custom tags) and include them in other React Components.
Here is an example component that uses the above ExampleReactComponent.
function RootReactComponent() {
return (
<div>
<h1>This is the main Component</h1>
<ExampleReactComponent />
</div>
)
}
Props
Similar to how HTML tags have attributes. React components have props.
function PropsExample(props) {
// Prints { exampleValue: "example-value" }
console.log(props);
return (
<div>
<h1>Props Example</h1>
{props.exampleValue}
</div>
);
}
function MainComponent() {
return (
<div>
<h1>This is the Main Component</h1>
<PropsExample exampleValue={"example-value"} />
</div>
);
}
When we render the MainComponent, it calls PropsExample component with props argument being { exampleValue: "example-value" }.
As you might have noticed, displaying variables in JSX, is done using {}. Anything within the braces is treated as javascript.
State
Usually we store data in variables. We use variables to display the stored data.
In React, we use something called state to store data. state can be thought of as getter and setter for variables. The reason for using state to get and set data is when data is set using state setter, React understands that it needs to update the HTML for the component.
For example, look at the below example that automatically updates the HTML when state is set.
import { useState } from 'react';
function IncrementDecrement(){
// use value for getting the data
// use setValue for setting the data
// Intial value is set to 0
// React automatically re-renders whenever the state setter is called
// This array syntax is called array destructoring
const [ value, setValue ] = useState(0);
function increment(e){
setValue(value + 1);
}
function decrement(e){
setValue(value - 1);
}
return (
<div>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
{value}
</div>
);
}
Writing React Apps With Vite
Tools like Vite can be used to build React components and JSX into a javascript bundle that can be executed in the browser.
Follow the instructions below to setup your first React.js project.
# Run this in your project folder, which will generate the needed files
npm create vite@latest my-react-app -- --template react
# Once the project is setup
cd my-react-app
npm install
npm run dev
Conclusion
I hope this gave you an intro of React.js. Once you setup a project using Vite, you can create more React components and play around to understand more.
You can learn more about React from the official React documentation.
Top comments (0)