How to organize your code using Import and Export in React

Desiree Ann Zarco — Mon, 09 Oct 2023 02:03:56 +0000

As a developer, it is important to keep your code clean and well organized, especially when you're working with long blocks of code. Learning import and export was a little challenging for me when I first started to learn React, but it is actually pretty straightforward. We basically give "access" to the codes within files that will be using it. Sounds confusing, but let's go with this simple example:

NavBar.js file

import React from "react";

function NavBar() {
  return (
    <nav>
      <a href="#home">I'm a link!</a>
    </nav>
  );
}

export default NavBar

When you want to use your code in another component, you share it by writing export default at the bottom of your code.

App.js file

import React from "react";
import NavBar from './NavBar'

function App() {
  return (
    <div>
      <NavBar />
    </div>
  );
}

export default App;

When you need to use a component, you need to import it at the top of the file, like the example above.
import NavBar from './NavBar'

If you noticed at the top of the file, it usually starts with import React from "React"; and that is because in React, we are writing in JSX. JSX is JavaScript XML. JSX allows us to write HTML and React Components in React.
Let's import another component to our App.js file.

About.js file 

import React from "react";

function About() {
  return (
    <div id="about">
      <h2>About Me</h2>
    </div>
  );
}

export default About

App.js file

import React from "react";
import NavBar from './NavBar';
import About from './About';

function App() {
  return (
    <div>
      <NavBar />
      <About />
    </div>
  );
}

export default App;

If you want to practice, try adding another component to the App.js file. Make a new file, name it Home.js, and inside the Home.js file, you can write a basic function, then you would export the name of your file that you want to share and use in your other files
export default Home;

Move to the App.js file and import that file at the top, like so:

App.js file

import React from "react";
import NavBar from './NavBar';
import About from './About';
import Home from "./Home';

function App() {
  return (
    <div>
      <NavBar />
      <About />
      <Home />
    </div>
  );
}

export default App;

Don't forget to add the component itself, inside your function.

Test this out on your own and see that it works! This is just the basics on how to import and export in between your files and work with usable components.

What's a function in JavaScript?

Desiree Ann Zarco — Sat, 22 Jul 2023 22:57:05 +0000

Hello everyone, this is my very first technical blog post ever, so I will do my best to explain this topic the best I could. I am currently a student in a front-end web development bootcamp. I wanted to dedicate my first blog post to the basic and fundamental concept that I struggled with as a coding newbie: Functions.

First, let's define what a function is in Javascript. According to Mozilla.org, a function is, "a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output."

In simpler terms, a function is a block of code that executes a task. It takes in arguments, and passes bits of code into the function (inside the curly braces) to execute whatever is inside the function.

Are you still confused? Let's take a closer look at the syntax of a function.

function variableName(parameter){
     //written code to be executed when function is called
}

To create a function, you start by typing in the keyword function.

function

Then you are going to need to declare a variable name after the function keyword. If it's more than one word, make sure to camel case it (e.g., camelCase, first word is lowercased with no space, and first letter of second word is uppercased)! Then after you name the variable, there needs to be a set a parenthesis and curly braces. Inside the parenthesis are what you'd call values. Then after parenthesis comes a set of curly braces. Whatever lies in between the curly braces are the written code to be executed. For example, let's start with:

function greetHello(){
     //code to execute when function is called.
}

The variable name is greetHello. Currently, there is nothing inside the curly braces, so the function isn't going to do anything. There are no values or arguments inside the parenthesis, but that is totally okay. You could even have more than one values, and you'll see in another example.
If I want a function to work, we need to have bits of code to work with. For example, I want to use console.log to print out a message, and insert it in between the curly braces.

function greetHello(){
     console.log("Hello")
}

To execute the function, I need to call the function outside of the curly braces.

function greetHello(){
     console.log("Hello")
}

greetHello()

After you've called the function greetHello(), if you look at the web console, you will see "Hello" being outputted due to what is written inside the braces.

Let's take a look at another example:

This time, we'll work with numbers and have two values in our parameters.

Remember, we first need to write the function keyword and a variable. Since we'll have two values, they need to be separated by commas, (a, b):

function sum(a, b)

The variable is sum followed by the parameters. After you have the function, variable and parameters, you then need to add curly braces for the bits of code that you want the function to execute.

function sum(a, b){

}

Currently, there's nothing in between the curly braces for the function to work, so in order for us to determine if the function is working, we can use console.log(). If you did not know already, console.log() is also a function, and it print out any message or information into the web console.

function sum(a, b){
     console.log()
}

To find the sum of the two values inside our parameters, you would need to write it as console.log(a + b), like a simple addition equation, but what is a and b? In this example, we can assign any number to those values. First, to find the sum, we have to "call" the function itself, but remember important to write it outside of the function, or outside of the curly braces. For this example, we will assign a = 1 and b = 2

function sum(a, b){
     console.log(a + b)
}

sum(1, 2)

After you have assigned values to the variables, the next thing is to check the value of the sum in the console. It will print out:

You've successfully called the function sum, and received 3 is your output. This is just a couple of easy examples of how functions work, and it can get really complex, especially when you're working with other data types. I hope this made sense and is helpful!

Resources:
MDN contributors, "Functions." , Developer.mozilla.org, Jul 22, 2023, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#predefined_functions,

DEV Community: Desiree Ann Zarco

How to organize your code using Import and Export in React

What's a function in JavaScript?