React JS Coding Basics: A Concise Guide
Table of Contents
1. Introduction to React
2. Setting Up a React Application
3. Building Components
4. State Management and Hooks
---
Chapter 1: Introduction to React
What is React?
- A JavaScript library for building user interfaces.
- Developed by Facebook, React allows developers to create large web applications that can
change data without reloading the page.
Key Features
- Component-Based Architecture: Breaks UI into reusable components.
- Virtual DOM: Efficiently updates and renders components.
- Unidirectional Data Flow: Data flows in one direction, making it easier to understand and
debug.
---
Chapter 2: Setting Up a React Application
Prerequisites
- [Link] and npm installed on your machine.
Create a New React App
```bash
npx create-react-app my-app
cd my-app
npm start
```
- This command sets up a new React application in the `my-app` directory and starts the
development server.
Project Structure
- public/: Contains static files.
- src/: Contains React components and application logic.
---
Chapter 3: Building Components
Functional Components
- Simple JavaScript functions that return JSX.
```javascript
import React from 'react';
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
export default Greeting;
```
Class Components
- ES6 classes that extend `[Link]`.
```javascript
import React, { Component } from 'react';
class Greeting extends Component {
render() {
return <h1>Hello, {[Link]}!</h1>;
}
}
export default Greeting;
```
Using Components
- Import and use components in `[Link]`.
```javascript
import React from 'react';
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
export default App;
```
Output
- Renders:
```
Hello, Alice!
Hello, Bob!
```
---
Chapter 4: State Management and Hooks
State in Functional Components
- Use the `useState` hook to manage state.
```javascript
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
export default Counter;
```
Output
- Displays the number of times the button has been clicked.
Effect Hook
- Use `useEffect` for side effects like data fetching.
```javascript
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('[Link]
.then(response => [Link]())
.then(data => setData(data));
}, []); // Empty array means it runs once after the first render.
return (
<ul>
{[Link](item => (
<li key={[Link]}>{[Link]}</li>
))}
</ul>
);
};
export default DataFetcher;
```
Output
- Renders a list of items fetched from an API.
---
Conclusion
This concise guide covers the basics of React, including setting up an application, building
components, and managing state with hooks. By understanding these core concepts, you
can start building dynamic and interactive web applications using React.
Further Reading
- Official React Documentation: [React Docs]([Link]
- Explore more advanced topics like Context API, Redux, and React Router for state
management and routing.
---
This guide serves as a foundational resource for anyone looking to get started with React. By
focusing on coding examples and outputs, it provides a practical approach to learning the
framework.