What is React?

React is a web framework that was developed by Facebook to help create interactive web applications. It lets any developer that understands its library to create reusable components throughout the site, handles different states with the built in state management, and change the user interface without the need to have full page reloads.

Why Use React?

The main reason to use React is to gain more control over a standard static webpage while leveraging a vast ecosystem of libraries that enhance functionality. React allows for dynamic, interactive user interfaces that a standard static website can not do at all thus making it easier to manage complex applications efficiently. With its component-based architecture and powerful state management, React enables developers to build scalable and maintainable web apps with ease from very complex to very simple websites.

Setting Up Your First React Project

First thing to do to properly setup your react project is to make sure you have Node.js installed by visiting this link Node.js Download, you then want to open your IDE, I personally use Visual Studio Code Visual Studio Code Download but you can use any that supports the use of Node after you open your IDE open an terminal within the file folder and enter in this code npx create-react-app@latest application name for this example. Once doing that you want to navigate to the folder that is created and then type into your terminal npm start this will then launch the website on localhost:3000 by default and will display the default app.js page.

Understanding JSX: The Basics of React Components

React components are the fundamental building blocks of a React application. These components allow developers to create dynamic, interactive websites by breaking down the user interface into smaller, manageable pieces. Each component represents a part of the UI, like a button, header, or even a complex section, that can be reused across multiple pages.

For example, rather than recreating the same code for a navbar or footer on each page, you can define a component once and use it everywhere in your app. This not only reduces redundancy but also helps maintain consistency, making your code more efficient and easier to maintain.

In React, components can be written using JSX (JavaScript XML), a syntax extension for JavaScript. JSX looks similar to HTML, but it’s actually a JavaScript syntax that allows you to embed HTML-like tags directly within JavaScript code. This makes it easier to define how the UI should look and behave in a declarative way.

                            
                            function Navbar() {
                              return (
                                <nav>
                                  <ul>
                                    <li>Home</li>
                                    <li>About</li>
                                    <li>Contact</li>
                                  </ul>
                                </nav>
                              );
                            }
                            
                            export default Navbar;
                            
                            

This is an example of a navbar component that can be used throughout the webpage either by having it in your app.js file which will have it on every page you create or on the specific pages you deem fit to have it on. This is a simple example of a component but you can make them as complex as you want with the use of props and state management.

Props and States

Props

Props which is short for properties is a feature of react components which allows the ability to pass data between a parent component and a child component using this key feature, essentially props are like a functions arguments where the child component is a function that uses those arguments, for example

                            
                            function Greeting(props) {
                                return <h1>Hello, {props.name}!</h1>;
                            } 
                            
                            function App() { 
                                return <Greeting name="John" />; 
                            }
                            
                            

This example the Greeting component is our child component which gets called from the app component which is the parent it passes a "prop" to the greeting which will then proper render it to the screen displaying "Hello, Example!" in a h1 header, note these are two different components, on is app.js file and one is a greeting.js file. This is a very basic example but displays the functionality of props very well.

States

States allow a component to maintain its data and change it over time, this can make a component very dynamic by allowing user interactive to change the information on the component without the need to reload the component.

                            
                            import { useState } from "react";
                            
                            function Counter() {
                              const [count, setCount] = useState(0);
                            
                              const increment = () => {
                                setCount(count + 1);
                              };
                            
                              return (
                                <div>
                                  <p>Count: {count}</p>
                                  <button onClick={increment}>Increase</button>
                                </div>
                              );
                            }
                            
                            export default Counter;
                            
                            

This example imports a useState and when the user navigates to this specific component there a counter will be displayed, if the user clicks on the "Increase button" it will increase the counter.

Handling Events in React

Handling evens within the react framework is very easy all of the standard ones you expect are avaliable such as clicks, form submissions, key presses and so on, they must be written in camel case format like onClick.

                            
                            function Button() {
                              const handleClick = () => {
                                alert("Button clicked!");
                              };
                            
                              return <button onClick={handleClick}>Click Me</button>;
                            }
                            
                            export default Button;
                            
                            

This example displays how you would create a button click on a component when clicked it will open an alert that says "Button Clicked" this is just a basic example of the onClick function within a component

Fetching Data and Using Effects

In order to fetch data you can use a hook that is built in called the useEffect hook, this allows data to be fetched and updates when it needs to this is very useful as getting data from external resources is needed with some applications.

                        
                            import { useState, useEffect } from "react"; 
                        
                            function DataFetcher() {
                                const [data, setData] = useState(null); 
                                const [loading, setLoading] = useState(true); 
                                
                                useEffect(() => { 
                                    fetch("https://api.example.com/data") 
                                    .then((response) => response.json()) 
                                    .then((data) => { 
                                        setData(data); 
                                        setLoading(false); 
                                    }) 
                                    .catch((error) => console.error("Error fetching data:", error));
                                }, []);  
                                
                                return ( 
                                    <div> {loading ? <p>Loading...</p> : <p>Data: {JSON.stringify(data)}</p>} 
                                    </div> 
                                ); 
                            } 
                            
                            export default DataFetcher;
                        
                    

This example is a basic example of fetching data from an API and displaying it on the screen when the component is loaded, this is a very basic example but can be expanded upon to make it more complex.

In Conclusion

The React framework provides developers with a vast range of options to create powerful, dynamic websites and web applications. Its component-based architecture, state management, and extensive ecosystem allow for highly interactive and scalable solutions, making the final product more efficient, maintainable, and user-friendly.