A Quick Intro to React.js

React is used to build websites that run entirely in the browser.

The main thing in React.js is JSX. JSX is similar to HTML or XML.

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</to>
  <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 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 withing 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 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}>Increment</button>
      {value}
    </div>
  );
}

Writing React Apps With Vite

Tools like Vite should 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 https://react.dev/learn.

Source link
lol