React Guide

If you are someone who has started to dip their toes into the world of web development  to learn more about frontend options and found react but you want to know why you should use it, this is the right place!

Why Use React?

Its time saving, quick and interactive!

  1. Reusable Components:

React allows you to create small, reusable pieces known as components. These components can be used throughout your website, saving time and effort. For example, you can create a button component once and use it wherever you need a button on your site.

  1. Efficient Updates:

React makes it easy to update your website. When something changes, React only updates the parts that need to be changed, rather than reloading the entire page. This makes your website faster and more efficient.

  1. Interactive User Interfaces:

React helps you build web pages that can respond to user actions, like clicks, form submissions, or navigation. This makes your website more interactive and user-friendly.

Getting started

If you don’t want to download react and you just want to use It, use this link and go to the next heading

If you do want to download react, Make sure you have JavaScript and visual studio code installed

You also need node installed:   this is needed for the installation

Open a terminal then in that terminal type create react-app and then make the name that you want of the app

Once it is loaded,  navigate to the app by typing the letters “cd” followed by the name of the react app, type npm start and it should run a window in your browser and you have your react app!


This is an example of a basic  button and I will break down what each part of this does

This line tells the code to use React.

Think of this like bringing a special toolbox into your workspace so you can use the tools inside it.

function Button() starts the creation of a Button component. A component is like a small part of your web page.

The name Button is what we call this specific part. It could be named anything, but we call it Button because it will create a button.

The return statement tells the component what it should display on the web page.

Inside the return, we have <button>Click Me!</button>. This creates a button on the web page with the text “Click Me!” on it.

<button> and </button> are HTML tags that define a button element. Everything between these tags is what will appear on the button.

export default Button; allows this Button component to be used in other parts of our project.

Think of it as making this part available to use elsewhere, like putting a tool back in the toolbox for others to use.

This is the strongest part of react, this can now be referenced using <Button> anywhere and the button will appear

Creating a navbar

A navbar/navigation bar is a menu that is located on top of a website that has the links to all the important parts of a website for easy navigation,

Navbars In react are very efficient as the nav bar can be on every page without having to be coded onto every page

Create a file called navbar.jsx

This navbar uses a mix of html and react elements, such as <Navbar> (lots of the time the elements that start with a capital letter are react elements). This helps make the navbar visible everywhere, the other elements of react are things that were in the button component

The app.js file is the one that serves as the main hub for everything