React is a popular JavaScript library for building user interfaces, particularly single-page applications where you need a fast and interactive user experience. Developed and maintained by Facebook, React allows developers to create large web applications that can update and render efficiently in response to data changes.

1. Components: The building blocks of a React application. Components can be functional or class-based.
2. JSX: A syntax extension for JavaScript that looks similar to HTML and is used to describe what the UI should look like.
3. State and Props: Mechanisms to manage data within components and pass data between components.
4. Virtual DOM: A lightweight copy of the actual DOM that React uses to optimize updates and rendering.

To start using React, you need to set up your development environment. The easiest way to do this is by using Create React App, a command-line tool that sets up a new React project with a sensible default configuration.

1. Install Node.js and npm: Ensure you have Node.js and npm installed on your machine. You can download them from nodejs.org.

2. Create a New React App:

   npx create-react-app my-react-app
   cd my-react-app
   npm start
   

   This will create a new directory called my-react-app and start a development server.

Let's create a simple React component to understand the basics.

1. Create a New Component: Create a new file named HelloWorld.js in the src directory.

   // src/HelloWorld.js
   import React from 'react';
   
   function HelloWorld() {
     return (
       <div>
         <h1>Hello, World!</h1>
       </div>
     );
   }
   
   export default HelloWorld;
   

2. Use the Component in App.js: Modify the App.js file to include the HelloWorld component.

   // src/App.js
   import React from 'react';
   import HelloWorld from './HelloWorld';
   
   function App() {
     return (
       <div className="App">
         <HelloWorld />
       </div>
     );
   }
   
   export default App;
   

3. Run the Application: Start the development server if it's not already running.

   npm start
   

   Open your browser and navigate to http://localhost:3000. You should see "Hello, World!" displayed on the screen.

JSX stands for JavaScript XML. It allows you to write HTML-like syntax within JavaScript, which React then transforms into JavaScript objects.

This JSX code is transformed by Babel into:

You can embed any JavaScript expression in JSX by wrapping it in curly braces {}.

Props (short for properties) are read-only attributes used to pass data from a parent component to a child component.

State is a built-in object that allows components to create and manage their own data.

1. Create a new component named TodoList.js:

   // src/TodoList.js
   import React, { useState } from 'react';
   
   function TodoList() {
     const [todos, setTodos] = useState([]);
     const [inputValue, setInputValue] = useState('');
   
     const addTodo = () => {
       setTodos([...todos, inputValue]);
       setInputValue('');
     };
   
     return (
       <div>
         <h1>Todo List</h1>
         <input
           type="text"
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
         />
         <button onClick={addTodo}>Add Todo</button>
         <ul>
           {todos.map((todo, index) => (
             <li key={index}>{todo}</li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default TodoList;
   

2. Use the TodoList component in App.js:

   // src/App.js
   import React from 'react';
   import TodoList from './TodoList';
   
   function App() {
     return (
       <div className="App">
         <TodoList />
       </div>
     );
   }
   
   export default App;
   

• State Management: We use the useState hook to manage the list of todos and the input value.
• Event Handling: The onChange event updates the input value, and the onClick event adds a new todo to the list.
• Rendering Lists: We use the map function to render each todo item in an unordered list.

In this section, you learned the basics of React, including setting up a React project, creating components, using JSX, and managing state and props. These fundamental concepts are crucial for building more complex and interactive applications with React. In the next section, we will dive deeper into state management with Redux.