a-quick-intro-to-reactjs

a-quick-intro-to-reactjs
A quick introduction to React.js
React is a JavaScript library for building user interfaces. It was developed by Facebook and allows developers to
create large web applications where data can change without reloading the page. React is component-based, meaning
the UI is divided into independent, reusable pieces of code.

Prerequisites
You should be familiar with:

HTML
CSS
JavaScript (ES6+)
Basics of Node.js and npm/yarn for package management

Setup
First, ensure you have Node.js and npm installed. If not, download it from Node.js official site.

To create a React project, use the following command in your terminal:

npx create-react-app my-react-app

Navigate into the project folder:

cd my-react-app

To start the development server:

npm start

You’ll see the default React starter app running at http://localhost:3000.

Project Structure
public/ : Contains static files like index.html .
src/ : The main folder where your components, styles, and logic reside.
App.js : The main component, acting as the entry point of your app.

Creating a Basic Component

In React, everything is built using components. Components can be functional or class-based.

1. Functional Component

Create a simple functional component:

1/6
 a-quick-intro-to-reactjs
// src/components/Greeting.js
import React from 'react';

function Greeting() {
return <h1>Hello, welcome to React!</h1>;
}

export default Greeting;

Now, let's use this component in our App.js :

// src/App.js
import React from 'react';
import './App.css';
import Greeting from './components/Greeting';

function App() {
return (
<div className="App">
<Greeting />
</div>
);
}

export default App;

Here, Greeting is imported and used inside the App component.

JSX (JavaScript Syntax Extension)

React uses JSX, which allows you to write HTML-like syntax in JavaScript. JSX makes your code more readable and
expressive.

Example:

const element = <h1>Hello World!</h1>;

JSX is then compiled to:

const element = React.createElement('h1', null, 'Hello World!');

Handling Events
React handles events similarly to DOM elements but uses camelCase for event names and the event handler should
be passed as a function reference.

Example of a button with a click event:

// src/components/Button.js
import React from 'react';

function Button() {
function handleClick() {
alert('Button clicked!');
}

2/6
 a-quick-intro-to-reactjs
return <button onClick={handleClick}>Click Me!</button>;
}

export default Button;

Now, include the Button component in your App.js :

// src/App.js
import React from 'react';
import './App.css';
import Greeting from './components/Greeting';
import Button from './components/Button';

function App() {
return (
<div className="App">
<Greeting />
<Button />
</div>
);
}

export default App;

Managing State with Hooks

React uses state to manage dynamic data in components. You can manage state using React Hooks such as
useState .

Example of a counter component:

// src/components/Counter.js
import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

export default Counter;

Add it to App.js :

// src/App.js
import React from 'react';
import './App.css';
import Greeting from './components/Greeting';
import Button from './components/Button';
import Counter from './components/Counter';

function App() {
return (
<div className="App">

3/6
 a-quick-intro-to-reactjs
<Greeting />
<Button />
<Counter />
</div>
);
}

export default App;

Now, each time you click the "Increment" button, the counter will increase.

Props (Passing Data Between Components)

Props are used to pass data from one component to another. It allows you to make your components dynamic.

Example:

// src/components/User.js
import React from 'react';

function User({ name }) {

return <h2>Hello, {name}!</h2>;
}

export default User;

Now use the User component in App.js and pass a name as a prop:

// src/App.js
import React from 'react';
import './App.css';
import Greeting from './components/Greeting';
import Button from './components/Button';
import Counter from './components/Counter';
import User from './components/User';

function App() {
return (
<div className="App">
<Greeting />
<Button />
<Counter />
<User name="Alice" />
<User name="Bob" />
</div>
);
}

export default App;

In this example, the User component receives the name prop and renders it.

Conditional Rendering
React allows you to conditionally render components based on the state or props.

Example:

4/6
 a-quick-intro-to-reactjs
// src/components/Status.js
import React, { useState } from 'react';

function Status() {
const [loggedIn, setLoggedIn] = useState(false);

return (
<div>
{loggedIn ? <h2>Welcome Back!</h2> : <h2>Please log in.</h2>}
<button onClick={() => setLoggedIn(!loggedIn)}>
{loggedIn ? 'Log out' : 'Log in'}
</button>
</div>
);
}

export default Status;

Add the Status component in App.js :

// src/App.js
import React from 'react';
import './App.css';
import Greeting from './components/Greeting';
import Button from './components/Button';
import Counter from './components/Counter';
import User from './components/User';
import Status from './components/Status';

function App() {
return (
<div className="App">
<Greeting />
<Button />
<Counter />
<User name="Alice" />
<User name="Bob" />
<Status />
</div>
);
}

export default App;

Now, you can toggle the login status dynamically.

Conclusion
You've now learned the basics of React, including:

Setting up a project
Creating functional components
Using JSX
Handling events
Managing state with hooks
Passing props between components
Conditional rendering

5/6
 a-quick-intro-to-reactjs
From here, you can start exploring more advanced topics like routing with React Router, state management with
Redux, and styling with CSS-in-JS libraries.

If you want to further customize and extend this project, consider adding:

1. CSS for styling.

2. Routing to create multi-page applications using react-router-dom .
3. API calls using fetch or axios .

Let me know if you need any help with more advanced topics!

Reference
https://maduranga.com/a-quick-intro-to-reactjs

6/6