React introduction (JSX, Component, props)

This writing provides an overview of React basics such as component, props.

1. React

• React is a JavaScript library used for building single-page applications and mobile applications, primarily focusing on web frontend development and component-based UI development.

2. JSX

• JSX is an extension of JavaScript that allows developers to write HTML-like syntax within JavaScript code. It is mainly associated with React but can also be used in other frameworks. JSX makes it easier to write and add HTML in React.

Example:

const myTeam = {
  center: <li>Benzo Walli</li>,
  powerForward: <li>Rasha Loa</li>,
  smallForward: <li>Tayshaun Dasmoto</li>,
  shootingGuard: <li>Colmar Cumberbatch</li>,
  pointGuard: <li>Femi Billon</li>
};

* Library vs Framework

• Library: A collection of pre-written code that can be called upon when building your code.
• Framework: A supporting structure where your code defines the core operations by filling out the framework’s structure.

3. Components in React

• React applications are made of components. A component is a small, reusable piece of code responsible for one job. For example:

import React from 'react';
import ReactDOM from 'react-dom/client';

function MyComponent() {
  return <h1>Hello world</h1>;
}

ReactDOM.createRoot(
  document.getElementById('app')
).render(<MyComponent />);

4. Importing React

• React is imported using:

import React from 'react';

• This creates an object named React, containing methods necessary to use the React library. Typically, the App.js file is the top level of a React application, and index.js is the entry point.

5. Creating a Function Component

• You can define a new React component using a JavaScript function, known as a function component:

import React from 'react';

function MyComponent() {
  return <h1>Hello, I'm a functional React Component!</h1>;
}

export default MyComponent;

• Ensure component names start with a capital letter so React interprets them correctly.

6. The Return Keyword in Functional Components

• A return statement must always be included in a function component:

function Button() {
  // Instructions go here
}

7. Importing and Exporting Components

• To export a component:

export default MyComponent;

• To import and use it in another file, such as index.js:

import MyComponent from './App';

8. Using and Rendering a Component

• Components can be used with HTML-like syntax and rendered to the browser using the .createRoot() and .render() methods from the react-dom library:

<MyComponent />

• Or with nested components:

<MyComponent>
  <OtherComponent />
</MyComponent>

9. Props

• Props are information passed from one component to another through attributes. Example:

function Header(props) {
  return <header>
    <h1><a href="/">{props.title}</a></h1>
  </header>;
}

function Article(props) {
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>;
}

function App() {
  const topics = [
    {id: 1, title: 'html', body: 'html is ...'},
    {id: 2, title: 'css', body: 'css is ...'},
    {id: 3, title: 'javascript', body: 'javascript is ...'}
  ];

  return (
    <div>
      <Header title="WEB"></Header>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;