Sege's Blog

Introduction to React:

Introduction to React:

Getting Started with React. Part 1

Owolabi olusegun's photo
Owolabi olusegun
·

7 min read

Introduction

You might be thinking about upping your game in your web development journey. By now, you are already comfortable with HTML, CSS, and Javascript. You have probably built a couple of websites and have probably hosted some of them on GitHub or any other popular free hosting site. You are feeling comfortable now, and you feel you can add a JavaScript framework to your tech stack. If this is you, then you are in the right place.

React

React is a popular JavaScript library for building user interfaces. React was developed by Facebook and is widely used by developers around the world. React allows you to create reusable UI components and manage the state of your application in a clear and concise manner.

To get started with React, you'll need to download and install Node.js and a code editor like Visual Studio Code. You can then use the create-react-app tool to create a new React app and install its dependencies using the npm package manager. The package.json file contains all the necessary information about your app, including its dependencies and scripts.

With React, you can build powerful, interactive user interfaces that are easy to maintain and scale. Whether you're building a simple app or a complex web application, React is a great choice for modern web development.

Getting Started

Download Node.js: React is built on top of Node.js; which is an open-source JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser. It is built on top of the V8 JavaScript engine used in the Google Chrome browser and provides a number of useful features for server-side and command-line JavaScript development. When we say that React is built on top of Node.js, what we mean is that React applications can be built and run using Node.js as a development and deployment platform. For example, as we will soon see, you can use Node.js and tools like create-react-app to set up a development environment for your React app, and you can use Node.js to deploy your React app to a web server.

So the first step is to download and install it on your computer. You can download the latest version of Node.js from the official website.

Install Visual Studio Code: Visual Studio Code is a popular code editor for developing React applications. You can download it for free from the official website.

Create a React App: Once you have Node.js and Visual Studio Code installed, you can create a new React app using the create-react-app tool. Open a terminal or command prompt and enter the following command:

npx create-react-app my-app

This will create a new React app in a directory called my-app. You can replace my-app with any name you like; let's say mytodo-app.

Package.json: The package.json file is the configuration file for your React app. It contains all the information about your app, including its name, version, and dependencies. Here's an example package.json file with some common dependencies for a React app:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

When you run npm install or npm update, npm reads the package.json file and installs the dependencies listed there. These dependencies are usually other libraries or packages that your project needs in order to run. For example, from the dependencies listed above, we see react, react-script, and react-dom.

package.json also contains scripts, which are command-line instructions for various tasks related to your project.

When you run npx create-react-app, a new React application is created with a file structure and initial codebase set up for you. One of the files created is index.js, which is a JavaScript file that serves as the entry point of your React app.

Here's a breakdown of what happens in index.js:

  1. Import React and ReactDOM: The first lines of index.js import the React and ReactDOM libraries:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

Reactis the core library for building user interfaces with React, whileReactDOM is a package that provides methods for rendering React components to the DOM (Document Object Model).

  1. Import App: The next line imports the App component from App.js. This is the root component of your React app, which contains other components and logic.
import App from './App';

./Apprefers to theApp.js file located in the same directory as index.js.

  1. Render the App component: The final line of index.js uses the ReactDOM.render() method to render the App component to the DOM:
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render() takes two arguments: the first argument is the component to render, which is the App component(this term would soon be explained in detail. For now, think about it as a function) in this case. The second argument is the DOM element where the component should be rendered, which is the element with the ID root.

The React.StrictMode component is a development-only feature that highlights potential issues in your app and enforces best practices. It is not necessary for your app to function, but it is recommended for debugging and improving code quality.

Overall, the index.js file is an essential part of any React app, as it serves as the entry point and initial setup of the application. It imports the necessary libraries, renders the root component to the DOM, and kicks off the React application.

Starting a Development Server

In a React app created withnpx create-react-app, thenpm start command is used to start the development server. When you run this command, it compiles your React code, starts a local development server, and opens your app in a web browser.

This allows you to see your changes in real-time as you edit your code.

Here's what the output npm start typically looks like:

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.101:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

The first line of the output, "Compiled successfully!", confirms that your code has been successfully compiled by the development server. If there are any errors in your code, the server will display an error message instead.

for example;

Failed to compile.

./src/App.js
Syntax error: Unterminated string constant (8:15)

   6 | function App() {
   7 |   return (
>  8 |     <div className="App">
     |                ^
   9 |       <header className="App-header">
  10 |         <img src={logo} className="App-logo" alt="logo" />
  11 |         <p>

This error message tells you that there is a syntax error in the App.js file at line 8, column 15. Specifically, there is an unterminated string constant in the className attribute of a div element. The error message also includes a caret symbol (^) under the location of the error in your code.

If you see an error message like this when running npm start, it means that there is an issue with your code that needs to be fixed before you can successfully compile and run your React app. You can fix the error by correcting the syntax issue in your code and then saving the file. Once you save the file, the development server should automatically re-compile your code and refresh the page in your browser to show your changes.

The next few lines tell you where to find your app in the browser. The local URL, http://localhost:3000, is the address you can use to view your app on your local machine. The "On Your Network" URL, http://192.168.1.101:3000 in this example, is the address you can use to view your app on other devices on your network.

Finally, the last line reminds you that the development build is not optimized for production use, and suggests using npm run build to create a production build of your app. This will generate a compressed and optimized version of your code that is ready for deployment to a web server.

In summary, npm start is a command that starts the development server for your React app and opens it in a web browser. It allows you to see your changes in real-time and makes it easy to develop and test your app locally.

In conclusion, starting React is a simple and powerful way to build user interfaces with JavaScript. By setting up your development environment, creating a new React app, and running it with npm start, you can quickly get up and running. With a solid understanding of React's core concepts, you can begin building dynamic and interactive user interfaces for your web applications. So, stick with this series, and you will be amazed at how much you will have learned by the time you are done.

Reactnewbieintroduction to react