React Getting Started Guide: Building Your First User Interface from Scratch

React is a JavaScript library for building user interfaces. It is developed and maintained by Facebook and has become one of the most popular tools in front-end development. This guide will take you from scratch, step by step to understand the basic concepts of React, and build a simple user interface.

Why Choose React?

React has the following advantages:

Component-based: React breaks down the user interface into independent, reusable components. This makes the code easier to maintain and understand.
Declarative: React uses a declarative programming style, which means you only need to describe what you want to present, and React will automatically handle updates and rendering.
Efficient: React uses a virtual DOM and intelligent diff algorithm to efficiently update the user interface and reduce unnecessary rendering.
Large Community Support: React has a large community and a rich ecosystem, you can find a lot of tutorials, libraries and tools to help you develop.
Cross-platform Capability: React Native allows you to use React to develop native mobile applications (iOS and Android).

Preparation

Before you start, you need to make sure you have the following tools installed on your computer:

Node.js: Node.js is a JavaScript runtime environment for running React development tools. You can download and install it from https://nodejs.org/.
npm or yarn: npm (Node Package Manager) and yarn are JavaScript package managers for installing and managing React dependencies. npm is usually installed along with Node.js. yarn can be installed from https://yarnpkg.com/.

Create Your First React App

We will use create-react-app to quickly create a React project.

Create with npm:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

Create with yarn:

yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

After executing the above commands, create-react-app will automatically create a directory named my-first-react-app and initialize a React project in that directory. The npm start or yarn start command will start the development server, and you can visit http://localhost:3000 in your browser to view your React application.

Directory Structure

The project directory structure created by create-react-app is as follows:

my-first-react-app/
├── node_modules/         # Libraries that the project depends on
├── public/               # Static resources (e.g., HTML files)
│   ├── index.html        # The application's entry HTML file
│   └── ...
├── src/                  # React source code
│   ├── App.css           # CSS styles for the App component
│   ├── App.js            # App component
│   ├── App.test.js       # Test file for the App component
│   ├── index.css         # Global CSS styles
│   ├── index.js          # The application's entry JavaScript file
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # Git ignore file
├── package.json          # Project metadata and dependencies
├── README.md             # Project documentation
└── yarn.lock             # Dependency version lock file (if using yarn)

Understanding React Components

React applications are made up of components. Components are independent, reusable blocks of code used to render specific parts of the user interface.

In the src/App.js file, you can see a default App component:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Code Explanation:

import React from 'react'; Imports the React library.
function App() { ... } Defines a function component named App.
return ( ... ) Returns a JSX expression that describes what the component should render.
export default App; Exports the App component for use in other files.

JSX (JavaScript XML)

JSX is a JavaScript syntax extension that allows you to write HTML-like code in JavaScript code. In the example above, ... is a JSX expression. JSX code is converted into standard JavaScript code by Babel so that the browser can understand it.

Modifying the App Component

Let's modify the App component to create a simple counter.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
``````javascript
const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Counter

      Current Count: {count}

      +
      -
    
  );
}

export default App;

Modification Instructions:

import React, { useState } from 'react'; Import the useState Hook. useState is a React Hook used to add state to functional components.
const [count, setCount] = useState(0); Use the useState Hook to create a state variable named count and initialize it to 0. setCount is a function used to update the count state.
const increment = () => { setCount(count + 1); }; Defines a function named increment to increment the count state by 1.
const decrement = () => { setCount(count - 1); }; Defines a function named decrement to decrement the count state by 1.
Current Count: {count} Displays the value of the count state on the page. {count} is a JSX expression used to insert JavaScript variables into JSX code.
+ and - Create two buttons, binding the increment and decrement functions respectively. onClick is an event handler that executes the specified function when the button is clicked.

After saving the src/App.js file, the browser will automatically refresh, and you will see a simple counter. Clicking the "+" button will increase the count, and clicking the "-" button will decrease the count.

Using CSS Styles

You can use CSS to beautify your React application. create-react-app supports CSS Modules and regular CSS files.

Using CSS Modules:

CSS Modules allow you to create independent CSS styles for each component, avoiding style conflicts. To use CSS Modules in a component, you need to create a file ending in .module.css.

For example, create a file named App.module.css and add the following CSS styles to it:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Then import CSS Modules in the src/App.js file:

import React, { useState } from 'react';
import styles from './App.module.css'; // Import CSS Modules

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Use the styles object to reference CSS classes */}
      

# Counter

      Current count: {count}

      +
      -
    
  );
}

export default App;

Using a regular CSS file:

You can also use a regular CSS file to define global styles. In the src/index.css file, you can define global styles.

For example, add the following CSS styles:

body {
  font-family: sans-serif;
}

This style will be applied to the entire application's body element.

Next Steps

Congratulations, you have completed your first React application! Next, you can learn more about React, such as:

Component Communication: Learn how to make different components communicate with each other.
Form Handling: Learn how to create and handle forms.
Routing: Learn how to use React Router to create multi-page applications.
Redux or Context API: Learn how to manage application state.
Hooks: Learn more about React Hooks, such as useEffect, useContext, etc.

Remember that React is a technology that requires constant practice and learning. Happy learning!