Introduction to ReactJS ⚛️

Overview of React

• React: A JavaScript library (not a framework) for building and arranging user interfaces (UI) for web applications.
• Components: Key building blocks in React, similar to reusable Lego pieces. They encapsulate JavaScript and HTML.
• JSX: JavaScript XML, a syntax extension that lets you write HTML-like code inside JavaScript files.

React's Key Features

• Virtual DOM: A lightweight version of the actual DOM. React manages changes efficiently by updating only the changed parts, reducing overhead.

Prerequisites

• JavaScript: Understanding of arrays, classes, objects, and ES6 features (like Arrow functions).
• HTML and CSS: Necessary for rendering and styling components.

Installation Steps

1. Download Node.js
   • Go to nodejs.org and download the latest version.
   • Install it, keeping default settings.
2. Text Editor
   • Recommended: Visual Studio Code (VS Code).
3. Create Project Folder
   • In VS Code: File > Open Folder, create a new folder (e.g., website) and select it.
4. Set Up React Project
   • Open terminal within VS Code (Terminal > New Terminal).
   • Initialize project with: npm create vite@latest my-react-app.
   • Navigate to the directory: cd my-react-app.
   • Install dependencies: npm install.
   • Start development server: npm run dev.

Project Structure

• node_modules: Contains external libraries and packages.
• public: Holds public assets like fonts, images, etc.
• src: Main source folder where most development happens.
  • assets: For images and videos.
  • main.jsx: Main JavaScript/JSX entry file. Typically imports the main component (App).
  • App.js: Root component, tying together other components.
  • index.html: Main HTML file.
  • index.css: Global CSS styles.
• package.json: Metadata about the project, including dependencies.

Creating a React Component

Header Component Example

1. Create Header Component: header.jsx function Header() { return ( <header> <h1>My Website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <hr /> </header> ); } export default Header;
2. Import & Use Header in App import Header from './Header'; function App() { return ( <div> <Header /> </div> ); } export default App;

Footer Component Example

1. Create Footer Component: footer.jsx function Footer() { return ( <footer> <p>&copy; My Website 2023</p> </footer> ); } export default Footer;
2. Import & Use Footer in App import Footer from './Footer'; function App() { return ( <div> <Header /> {/* Other components can go here */} <Footer /> </div> ); } export default App;

Creating a Food List Component

1. Create Food Component: food.jsx function Food() { const foods = ["Apple", "Orange", "Banana"]; return ( <ul> {foods.map((food, index) => <li key={index}>{food}</li>)} </ul> ); } export default Food;
2. Import & Use Food in App import Food from './Food'; function App() { return ( <div> <Header /> <Food /> <Footer /> </div> ); } export default App;

Conditional Rendering

Example to show different greetings based on login status:

1. UserGreeting Component: userGreeting.jsx function UserGreeting({ isLoggedIn, username }) { return ( <h2> {isLoggedIn ? `Welcome, ${username}` : "Please log in to continue"} </h2> ); } export default UserGreeting;
2. Import & Use UserGreeting in App import UserGreeting from './UserGreeting'; function App() { const isLoggedIn = true; const username = "User"; return ( <div> <UserGreeting isLoggedIn={isLoggedIn} username={username} /> </div> ); } export default App;

Conclusion

• React simplifies the creation of interactive UIs by breaking them down into manageable components.
• It relies heavily on JavaScript and HTML, along with JSX for structure and virtual DOM for efficiency.
• Proper setup with tools like Node.js and VS Code helps streamline development.
• Components can be reused and organized efficiently, making React a powerful tool for modern web development.