Building your first React app

React

React is a popular JavaScript library for building user interfaces. It allows different companies like Scrrum Labs  to build reusable components that can be easily composed to create complex UI. In this tutorial, I'll walk you through the process of building your first React app.

Before we begin, you'll need to have Node.js and npm (the package manager for Node.js) installed on your computer. 

To create a new React app, you can use the create-react-app command-line tool. Open a terminal and run the following command:

npx create-react-app my-app

This will create a new directory called my-app with the necessary files and structure to start building a React app. To start the development server, navigate to the my-app directory and run the following command:

npm start

This will start the development server and open the app in your default web browser. By default, the app will display a "Welcome to React" message.

The main file for your app is located in the src directory and is called index.js. This file imports React and ReactDOM, and renders the root component of your app to the DOM. The root component is defined in the src/App.js file.

To start building your app, you can begin by modifying the src/App.js file. Let's create a simple component that displays "Hello, World!" on the screen.

import React from 'react';

function App() {
  return <h1>Hello, World!</h1>;
}

export default App;

This is a very basic example of a React component. The 'import React from 'react'; line is importing the React library, and the function App() is a simple JavaScript function that returns a JSX expression. JSX is a syntax extension for JavaScript that allows you to write HTML-like elements in your JavaScript code.

You might have noticed that you didn't have to import any specific react package for JSX. React automatically converts the JSX to javascript using the babel library.

Now, if you save the file and look at the browser, you'll see that the app displays the "Hello, World!" message.

In order to build more complex UIs, you can create additional components and then compose them together to create your overall app structure. To create a new component, you can create a new file in the src directory with a .js extension, and then import it into the src/App.js file.

In addition to building your own components, you can also use pre-built components from libraries like Material-UI or antd. These libraries provide a wide variety of pre-built UI components that you can use to quickly build your app with a consistent look and feel.

You can also use state and props to manage your components, which allow you to pass data from parent components to child components. State is an object that contains data that can change, and props are an object that contains data that will not change.

In addition to that, React also come with a set of lifecycle methods like componentDidMount and componentWillUnmount etc which allows you to handle different events when the component is created, updated, or deleted.

File Structure in React

 

A well-organized file structure is important for any application, and React is no exception. There are many ways to structure a React app, and the best approach will depend on the specific needs of your project. However, here is a basic file structure that you can use as a starting point for your React app:

my-app/
  node_modules/
  public/
    index.html
    favicon.ico
  src/
    components/
      ...
    pages/
      ...
    services/
      ...
    App.js
    index.js
    ...
  package.json
  package-lock.json
  README.md

The node_modules directory contains all of the packages that your app depends on, which are listed in the dependencies and devDependencies sections of the package.json file.

The public directory contains the index.html file, which is the main HTML file for your app, as well as any other static assets such as images or fonts.

The src directory contains the source code for your app. Inside the src directory, you can create a directory for components and another for pages.

The components directory contains all of the reusable components that make up your app, such as buttons, forms, and navigation elements.

The pages directory contains the components that represent the different pages of your app. Each page should have its own subdirectory with the same name of the page that contains all of the components for that page

The services directory is where you put utility functions, API calling functions and so on.

The App.js file is the root component of your app and it is responsible for rendering the other components. It is typically imported into the index.js file, which is the entry point for your app.

The index.js file is the entry point for your app and it is responsible for rendering the root component to the DOM.

The package.json and package-lock.json files are used by npm to manage the dependencies for your app.

The README.md file is a markdown file that contains information about your app, such as how to run it, how to contribute, and so on.

This is just a basic file structure, but it is a good starting point to organize your application.