Creating the First Component on React - React.js Foundation.

Hi there, In this post, we will talk about some React foundations. Let's touch on the main concepts to start using react in your projects.

To start, I assume that you have already React up and running on the machine, or you can use CodeSandbox to do it on the browser.

Let's start:

The first to do is, on your /src folder, leave only the files index.js and App.js, and take off all CSS references. We won't use it for now.

Your index.js file will look like this:

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

On your App.js file, let's delete all and rewrite one function returning a simple “Hello React!”.

App.js

export default function App(){
  return(
    <div>
      <h1>
        Hello React!
      </h1>
    </div>
  )
}

You have to can see the phrase “Hello React!” on your browser.

You can see one structure that looks like an HTML inside one JavaScript function in the code above. It is a JSX, the way that you have to write your code to after React compiles everything on JavaScript.

First Component.

The React applications are components based, and now let's create our first one: Let's create one folder to add our components (/src/components). Inside components, let's add a file called First.js.

This file will export our component. Let's write a simple function to return a text and understand the component until your browser shows the text. We will make changes to our two files: App.js and First.js.

First.js

export default function First() {
  return (
    <div>
      <h1>First Component</h1>
    </div>
  );
}

As you can see, this file is ready to export as the default function. First, that returns an h1 tag with one text sentence.

App.js

import First from "./components/First";

export default function App() {
  return (
    <div>
      <First />
    </div>
  );
}

In our App.js, we first imported the First component from the First file in the components folder.

The next step was to create a function again but now return the First component. Now App will use all our First component returns.

You can notice that App is a component as well exported as default. The index.js file will call that:

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";
body {
  font-family: Oswald, sans-serif;
  font-weight: 300;
  font-size: 2rem;
  background-color: #444;
  color: #fff;
  text-align: center;
}

h1,
h2 {
  font-weight: 300;
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

This file will render our code on the DOM, and you will see (First Component) written on the browser.

On the React documentation, you can read more about it.

Now, let's change our component to see the results:

First.js

export default function First() {
  return (
    <div>
      <h1>First Component</h1>
      <h2>React Component Example</h2>
    </div>
  );
}

Now let's conclude this topic with the First Component. It is because we will use this code forward on another post. Before, we will add some CSS globally direct on our index to put some style on our tags.

Create a src/index.css:

src/index.css

body {
  font-family: Oswald, sans-serif;
  font-weight: 300;
  font-size: 2rem;
  background-color: #444;
  color: #fff;
  text-align: center;
}

h1,
h2 {
  font-weight: 300;
}

Import it on our index.js:

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

// Importing css.
import "./index.css";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

It is how it will look like this:

Thank you for reading.