FNB App Academy Notes

The Shift from Web Pages to Web Apps

Web development has evolved significantly over the years. Initially, websites were static, providing limited user interaction. However, with advancements in technology, web apps have become increasingly popular, offering dynamic and interactive experiences. As a developer, it’s essential to understand the differences between static websites and web apps.

Web apps handle logic, store and process data, and often communicate with backends and APIs. They track data over time, such as login status and user input, and have multi-step user journeys. Dynamic interfaces render components differently based on user interaction or data.

To bridge the gap between a “developer who designs” and a “developer who builds systems,” focus on building interactive, data-driven applications. Try converting your static portfolio into a mini web app with a contact form and validation. Use JavaScript to show/hide sections based on menu selection.

Introduction to Front-End Frameworks (React Basics)

Front-end frameworks like React make building and maintaining web apps easier. React allows component-based architecture and easier state management. Its key features include:

1. Reusable components: Break down the UI into reusable parts.
2. Powerful state and event handling: Manage state and handle events effectively.
3. Integration with APIs and other tools: Seamlessly integrate with APIs and other tools.

Key React concepts include:

1. JSX: Write HTML inside JavaScript.
2. Components: Split the UI into reusable parts.
3. Props and State: Pass data and track changing values.
4. Hooks: Functions like useState and useEffect that add interactivity.

Practice building a simple React app that shows a list of items. Add a form to add or remove items.

Project File Structure and Modular Design

As projects grow, organizing code becomes critical. A sample file structure for a React project might include:

– src/
– components/
– Header.js
– Footer.js
– pages/
– Home.js
– Contact.js
– App.js
– index.js

Best practices include:

1. Breaking the UI into components: Make components reusable and focused on specific functionality.
2. Using folders to group related logic: Organize code into logical folders.
3. Keeping styles scoped to components: Use CSS Modules or styled-components to scope styles to individual components.

Refactor a project into multiple files and components. Use props to pass data between them.

Using State for Interactivity

State makes apps feel alive. Use the useState hook to add state to functional components. For example:

jsx
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>Click Me</button>

Common use cases for state include:

1. Form inputs: Store user input in state.
2. Toggles: Manage toggle state, such as dark mode or menu visibility.
3. Dynamic content: Update content dynamically, such as comments, likes, or cart items.

Practice building a counter, a like button, and a form that stores input in state.

Routing in Web Apps

Routing allows you to create multi-page apps without refreshing the browser. React Router is a popular library for routing in React apps.

Key concepts include:

1. <BrowserRouter>: Wraps the app.
2. <Routes> and <Route>: Define paths.
3. <Link>: Enables navigation without page reload.

Practice adding routes like /, /about, and /contact to your app.

Forms and Validation

Forms are a crucial part of web apps, allowing users to input data. Key concepts include:

1. Controlled components: Manage form state using React state.
2. Basic validation: Validate form inputs, such as required fields and email formats.
3. Error messages and user feedback: Provide feedback to users about form errors.

Libraries like Formik, React Hook Form, and Yup can help with form management and validation.

Try creating a login form with email and password. Add error handling for empty fields.

Connecting to APIs

Web apps often communicate with APIs to retrieve or send data. Key concepts include:

1. Fetching data: Use fetch or libraries like Axios to retrieve data from APIs.
2. Async/await syntax: Write asynchronous code that’s easier to read and maintain.

Practice building a news or weather app using a public API.

Authentication Basics

Most apps have secure sections that require authentication. Key concepts include:

1. Frontend-only auth: Login via hardcoded credentials (for practice only).
2. JWT-based Auth: Token sent