Getting Started with React: A Beginner’s Tale

Ganesh Nitalikar — Fri, 09 Aug 2024 11:55:22 +0000

Introduction

Today, I dove into the world of React, and it was an exciting experience! In this article, I'll share what I learned, starting from the basics of React to creating components using JSX. Let's explore React together!

Understanding the Basics of React

React is a powerful JavaScript library used for building user interfaces. It's particularly known for its efficiency in building Single Page Applications (SPAs) like Netflix, where the entire app runs on a single webpage.

React's core concept revolves around creating reusable components, making the development process more modular and maintainable.

Use Cases of React

React shines in many scenarios, especially for:

Single Page Applications (SPAs): Think of Netflix or Facebook where content loads dynamically without refreshing the page.
Mobile Apps: Using React Native, you can build mobile apps with the same principles.
Interactive Web Applications: React makes it easy to build interactive and dynamic UIs.

Setting Up a React Project

Starting a React project is straightforward. There are two popular ways to create a new React project:

Using npm:

   npx create-react-app my-react-app

Using Vite:

   npm create vite@latest my-react-app --template react
   cd my-react-app
   npm install
   npm run dev

Both methods set up a boilerplate project structure that includes everything you need to start building with React.

Project Structure

Once you create a React project, you'll see a standard structure like this:

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

src/: Contains the main codebase including components, styles, etc.
public/: Contains static assets like images, favicon, etc.
node_modules/: Stores all the npm packages.
package.json: Manages dependencies and scripts.

Introducing JSX

JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. It allows you to write HTML structures within JavaScript, making it easier to create React components.

Here's an example of JSX:

const element = <h1>Hello, React!</h1>;

This looks like HTML, but under the hood, it's converted to JavaScript that React can render on the page.

Creating Components in React

Components are the building blocks of any React application. They can be functional or class-based.

Functional Component Example

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class-Based Component Example

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Components make it easy to manage and reuse code across your application.

Using Fragments

React fragments allow you to group multiple elements without adding an extra node to the DOM. It's useful when you want to return multiple elements from a component:

return (
  <>
    <h1>Hello</h1>
    <p>Welcome to my React journey!</p>
  </>
);

Injecting JavaScript into HTML

With JSX, you can easily inject JavaScript into your HTML-like structures. For instance, embedding a JavaScript expression within JSX is straightforward:

const name = 'Ganesh';
return <h1>Hello, {name}</h1>;

This renders as "Hello, Ganesh" on the page.

Conclusion

Today's exploration of React has given me a solid understanding of the basics, from setting up a project to building components and using JSX. I'm excited to continue this journey and dive deeper into more advanced React features.

Stay tuned for more updates as I continue to learn and build with React!

Thank you for joining me on this learning adventure. Feel free to connect with me on Hashnode to follow my journey.

DEV Community: Ganesh Nitalikar