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:

// 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!');
  }

  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">
      <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:

// 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

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!