Getting Started

ReactJS is a JavaScript library, used in web development to build interactive elements on websites. But don't worry if you're not quite sure how it works yet, we're going to start with a simple concept, and if you follow this guide, by the end of it you'll be able to create two divs under each other in ReactJS.

What is a Div?

Before we dive in, let's take a moment to understand what a div is. In the world of web development, we often use an analogy of building blocks. Think of div as one of those blocks. It's a container that holds other parts of your website. You can style them, place them anywhere on your layout, and even put other divs inside them!

The Basics: Creating a Single Div in React

Let's start by creating a single div. In React, everything is a component. Components are like the blueprints of the building blocks. They describe what you want to see on the screen. In simple terms, a component is a JavaScript function that returns a piece of code describing the layout of a part of a webpage. This piece of code is written in a syntax called JSX, which is a syntax extension for JavaScript and is used with React.

Here is an example of a React component that renders a div:

function MyComponent() {
  return (
    <div>Hello, world!</div>
  );
}

In the example above, MyComponent is a React component. It's a JavaScript function that returns a JSX element. The returned JSX element is a div containing the text "Hello, world!".

Adding Two Divs

Now that we know how to create a single div, let's move on to creating two divs under each other.

function MyComponent() {
  return (
    <div>
      <div>Hello, world!</div>
      <div>Welcome to ReactJS!</div>
    </div>
  );
}

In this example, we have a parent div containing two child divs. The parent div acts as a container for the two child divs, positioning them one below the other in the layout.

However, you can also return multiple divs without a parent div using a React feature called Fragments.

function MyComponent() {
  return (
    <>
      <div>Hello, world!</div>
      <div>Welcome to ReactJS!</div>
    </>
  );
}

In the example above, <> and ` are shorthand forReact.Fragment`. Fragments let you group a list of children without adding extra nodes to the DOM.

Styling the Divs

Now, what if we want to add some style to our divs? React has that covered too. You can add inline styles to your divs by using the style attribute. The style attribute accepts a JavaScript object where properties are written in camelCase and values are strings.

function MyComponent() {
  return (
    <>
      <div style={{ color: 'blue' }}>Hello, world!</div>
      <div style={{ color: 'red' }}>Welcome to ReactJS!</div>
    </>
  );
}

In this example, the first div will render the text "Hello, world!" in blue, and the second div will render the text "Welcome to ReactJS!" in red.

Wrapping Up

Congratulations, you just created your first two divs in ReactJS! This might seem like a small step, but remember, every journey begins with a single step. You've just embarked on an exciting journey into the world of ReactJS, and there's much more to learn and explore.

In this tutorial, we've learned how to create components in React, how to return JSX from these components, and how to use divs to structure our layout. We also learned about fragments and how to add styles to our divs.

Remember, learning to code is like learning a new language. It might seem intimidating at first, but with practice, you'll become more comfortable and start to enjoy it. So, keep experimenting, keep building, and most importantly, have fun!