File Extensions
.JS: Stands for JavaScript. This file extension contains regular JavaScript code and is used for general logic and components.
.JSX: Stands for JavaScript XML. It combines JavaScript with HTML-like tags, making it easier to design UI components.
Class vs Function Components
Class Components: These are stateful and can manage state and lifecycle. They have access to lifecycle methods but can be verbose with more boilerplate code. Not preferred anymore.
Functional Components: Initially stateless, these components can use hooks for state and effects. They are simpler, more concise, and have become more popular in modern React development.
What is JSX?
Definition: JSX determines how the UI will look wherever the component is used.
Not HTML: Although it resembles HTML, you are actually writing JSX, which stands for JavaScript XML.
Conversion: JSX gets converted to regular JavaScript. You can use tools like Babel (babeljs.io/reps) to see how JSX is transformed into JavaScript.
Exporting Components
Default Export: Allows exporting a single component as the default from a module.
Named Export: Enables exporting multiple items from a module.
Example of Default Export and Named Export Component
const DefaultExportComponent = () => (
<div>
<p>This is the default export component</p>
</div>
);
export default DefaultExportComponent;
const Component1 = () => (
<div>
<p>This is Component 1</p>
</div>
);
const Component2 = () => (
<div>
<p>This is Component 2</p>
</div>
);
export { Component1, Component2 };
Importing Components
To use an exported component, you need to import it in the destination file using the import syntax.
Example of Importing
// Import Default Exported Component
import MyComponent from './MyComponent';
// Import Named Exported Components
import { Component1, Component2 } from './Components';
Other Important Points
Naming: Component names must be capitalized for default HTML.
HTML: Unlike vanilla JS where you can't directly write HTML in React, you can embed HTML-like syntax using JSX.
CSS: In React, CSS can be directly imported into component files, allowing for modular and component-specific styling.
Props: Data passed down to components. It can contain any type of data, including objects or arrays.
Dynamic Components
Dynamic Content: JSX allows the creation of dynamic and interactive UI components.
JavaScript Expressions: Using {}, we can embed any JS expression directly within JSX. This includes variables, function calls, and more.
Example Component
const DynamicComponent = ({ value }) => (
<div>
<p>Dynamic Content: {value}</p>
</div>
);
Reusable Components
Modularity: Components are modular, allowing for easy reuse across different parts of an application.
Consistency: Reusing components ensures UI consistency and reduces the chances of discrepancies.
Efficiency: Reduces development time and effort by avoiding duplication of code.
Maintainability: Changes made to a reused component reflect everywhere it's used, simplifying updates and bug fixes.
Example Component
// Reusable Button Component
const Button = ({ onClick, label }) => (
<button onClick={onClick}>{label}</button>
);