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!
- 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.
- 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.
- 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: https://nodejs.org/en/download/prebuilt-installer 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!
Components
This is an example of a basic button and I will break down what each part of this does
import React from ‘react’;
function Button() {
return (
<button>
Click Me!
</button>
);
}
export default Button;
import React from ‘react’;
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() {
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.
return (
<button>
Click Me!
</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;
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
import React from ‘react’;
function Navbar() {
return (
<nav>
<h1>My Website</h1>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
);
}
export default Navbar;
Modify “app.js” with this
import React from ‘react’;
import Navbar from ‘./Navbar’;
function App() {
return (
<div>
<Navbar /> {/* Use the Navbar component */}
<header>
<h1>Welcome to My React App</h1>
</header>
</div>
);
}
export default App;
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