Building a Simple Project with React

1. WebStorm
2. Visual Studio Code

WebStorm:

Step 1: Set Up the Development Environment

1. Install Node.js:

   • If you don't have Node.js installed, download and install it from https://nodejs.org/ (opens in a new tab).

2. Create a React App:

   • Open WebStorm.
   • Create a new project and choose "React" as the project type.
   • Follow the wizard to create the project.

3. Start the Development Server:

   • Open the terminal in WebStorm.
   • Run the following command to start the development server:

     npm start

   This will open a new browser window with your React app.

Step 2: Create Todo Components

1. Create a Todo Component:

   • In the src folder, create a new file named Todo.js.

     // Todo.js
     import React from 'react';
      
     const Todo = ({ todo, onDelete }) => {
       return (
         <div>
           {todo.text}
           <button onClick={() => onDelete(todo.id)}>Delete</button>
         </div>
       );
     };
      
     export default Todo;

2. Create a TodoList Component:

   • In the src folder, create a new file named TodoList.js.

     // TodoList.js
     import React from 'react';
     import Todo from './Todo';
      
     const TodoList = ({ todos, onDelete }) => {
       return (
         <div>
           {todos.map(todo => (
             <Todo key={todo.id} todo={todo} onDelete={onDelete} />
           ))}
         </div>
       );
     };
      
     export default TodoList;

Step 3: Manage State and User Interactions

1. Modify src/App.js:

   • Open src/App.js and modify it as described in the previous example.

2. Run the App:

   • Save your changes and check your browser to see the updated app.
   • You can add more todos and delete them using the provided buttons.

Visual Studio Code:

Step 1: Set Up the Development Environment

1. Install Node.js:

   • If you don't have Node.js installed, download and install it from https://nodejs.org/ (opens in a new tab).

2. Create a React App:

   • Open Visual Studio Code.
   • Open the terminal and run the following command to create a new React app:

     npx create-react-app react-todo

3. Navigate to the Project:

   • Change into the project directory.

     cd react-todo

4. Start the Development Server:

   • Run the development server with:

     npm start

   This will open a new browser window with your React app.

Step 2: Create Todo Components

1. Create a Todo Component:

   • In the src folder, create a new file named Todo.js.

     // Todo.js
     import React from 'react';
      
     const Todo = ({ todo, onDelete }) => {
       return (
         <div>
           {todo.text}
           <button onClick={() => onDelete(todo.id)}>Delete</button>
         </div>
       );
     };
      
     export default Todo;

2. Create a TodoList Component:

   • In the src folder, create a new file named TodoList.js.

     // TodoList.js
     import React from 'react';
     import Todo from './Todo';
      
     const TodoList = ({ todos, onDelete }) => {
       return (
         <div>
           {todos.map(todo => (
             <Todo key={todo.id} todo={todo} onDelete={onDelete} />
           ))}
         </div>
       );
     };
      
     export default TodoList;

Step 3: Manage State and User Interactions

1. Modify src/App.js:

   • Open src/App.js and modify it as described in the previous example.

2. Run the App:

   • Save your changes and check your browser to see the updated app.
   • You can add more todos and delete them using the provided buttons.

Both WebStorm and Visual Studio Code provide excellent environments for developing React applications. Choose the one that suits your preferences and enjoy building React projects with ease.