React ile Proje Geliştirmek -1 / Kurulum - Dosya Yapısı

Introduction

In this tutorial, we will guide you through the initial setup and file structure of a React project, based on the video by Tayfun Erbilen. This foundational knowledge is crucial for anyone looking to develop applications using React, providing you with the necessary tools and understanding to organize your project effectively.

Step 1: Setting Up Your Development Environment

To start developing with React, you need to ensure your development environment is properly configured.

1. Install Node.js

   • Visit the Node.js official website and download the latest LTS version.
   • Install Node.js by following the prompts in the installation wizard.

2. Install Create React App

   • Open your terminal or command prompt.
   • Run the following command to install Create React App globally:

     npm install -g create-react-app
     

Step 2: Creating Your React Project

With your environment ready, you can create a new React project.

1. Initiate a New Project

   • In your terminal, navigate to the directory where you want to create the project.
   • Execute the following command, replacing my-app with your desired project name:

     npx create-react-app my-app
     

2. Navigate to Your Project Directory

   • Change into the project directory:

     cd my-app
     

Step 3: Understanding the File Structure

Now that your project is created, let's explore the default file structure.

• node_modules: Contains all the dependencies required for your project.
• public: Holds static files like index.html and images.
• src: This is where your React components and styles will live. Key files include:
  • index.js: The entry point of your React application.
  • App.js: The main component that renders the application.

Step 4: Running Your React Application

To see your React application in action, follow these steps.

1. Start the Development Server

   • In your terminal, run the command:

     npm start
     

   • This will open your application in the default web browser at http://localhost:3000.

2. Make Changes and See Results

   • As you edit files in the src folder, the application will automatically reload, allowing you to see changes in real-time.

Conclusion

You have successfully set up your React project and explored its file structure. The next steps include diving deeper into React components, state management, and routing. With this foundation, you are well on your way to building dynamic web applications. Consider exploring additional resources or tutorials to expand your React knowledge further.