Building a React App from Scratch with Webpack and Exploring React Fundamentals

This repository serves as a step-by-step guide to build a React application from the ground up using Webpack as the bundler. Along the way, we'll explore essential React fundamentals such as useState, useMemo, and useContext. We'll also dive into configuring various styling approaches including CSS modules, SCSS modules, and Styled Components.

By following the commits in this repository, you'll be able to learn and understand the process of setting up a React application, implementing key React concepts, and configuring different styling techniques. Whether you're new to React or looking to solidify your understanding, this repository has you covered.

Table of Contents

• Prerequisites
• Getting Started
• Commit Walkthrough
• React Fundamentals Explored
• Styling Techniques Covered
• Usage
• Contributing
• License

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js and npm (Node Package Manager)
• Git

Getting Started

1. Clone this repository: git clone https://github.com/VitornscSilva/react-fundamentals.git
2. Navigate to the project folder: cd react-fundamentals
3. Install dependencies: yarn

Commit Walkthrough

Throughout the commits in this repository, you'll witness the step-by-step process of building the React app and integrating various concepts and techniques. Each commit is designed to be concise and focused, making it easier to understand the progression.

React Fundamentals Explored

1. useState: Managing Component State

We'll learn how to use the useState hook to manage component state effectively.

2. useMemo: Optimizing Performance

Explore how to utilize the useMemo hook to optimize component rendering performance.

3. useContext: Global State Management

Learn about the useContext hook to manage global state within your React app.

Styling Techniques Covered

1. CSS Modules

Discover how to set up and use CSS modules to locally scope styles for your React components.

2. SCSS Modules

Explore the configuration and usage of SCSS modules for more advanced styling capabilities.

3. Styled Components

Learn how to integrate Styled Components for writing component-scoped CSS with the power of JavaScript.

Usage

After following the commit history to build the app and explore various concepts, you can run the app locally:

1. Run the development server: yarn dev
2. Open your browser and navigate to http://localhost:3000

Contributing

Contributions are welcome! If you find any issues or would like to add more explanations to the commits, feel free to open a pull request.

License

This project is licensed under the MIT License.