Getting Started with React: A Beginner’s Guide to Building Your First Application

Posted by

Alfalfa

–

September 26, 2024

React JS is a popular JavaScript library for building user interfaces. It was developed by Facebook and is widely used in building single-page applications. In this tutorial, we will go through the basics of React JS and build our first application.

Setting Up the Environment
Before we start building our React application, we need to set up the environment. Make sure you have Node.js installed on your system as we will be using npm (Node Package Manager) to install the necessary packages.

First, let’s create a new directory for our project and navigate into it:

mkdir react-tutorial
cd react-tutorial

Next, initialize a new Node.js project by running the following command:

npm init -y

Now, let’s install React and ReactDOM packages using npm:

npm install react react-dom

Creating a Basic React Component
Let’s create our first React component. Create a new file named App.js in the root directory of your project. In this file, we will define a simple functional component that displays a greeting message:
```
import React from 'react';
```

function App() {
return (

Hello, React!

);
}

export default App;


3. Rendering the Component
Now, let's create an entry point for our React application. Create a new file named `index.js` in the root directory of your project. In this file, we will import our `App` component and render it to the DOM:
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Setting Up the HTML File
Create a new file named index.html in the root directory of your project. Add the following code to it:

<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="index.js"></script>
</html>

Running the Application
To run our React application, we need to compile the JSX code using Babel. We can do this using webpack. First, install webpack and babel-loader:
```
npm install webpack babel-loader @babel/core @babel/preset-env @babel/preset-react webpack-cli --save-dev
```

Next, create a webpack.config.js file in the root directory of your project with the following configuration:

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};

Now, add the following script to your package.json file to compile and bundle the code using webpack:

"scripts": {
  "build": "webpack"
}

Run the following command to compile and bundle the code:

npm run build

Finally, open the index.html file in a web browser to see your React application running. You should see the greeting message "Hello, React!" displayed on the page.

Congratulations! You have successfully built your first React application. This is just the beginning of your journey into React JS. There are many more concepts to learn and explore, such as state management, props, hooks, and more. Keep practicing and experimenting with React to become proficient in building dynamic and interactive web applications. Happy coding!

Angular, Angular.js, application., beginner’s, building, Express.js, first, Gatsby.js, getting, guide, Guides, javascript, learn react, learn react js, learn react js basics, learn react js for beginners, Next.js, node.js, React, react basics, react course, react crash course, react javascript, react js beginner projects, react js beginner tutorial, react js crash course, react js full course, react js project, react js tutorial, react js tutorial for beginners, react tutorial for beginners, react.js, reactjs course, reactjs tutorial, reactjs tutorial for beginners, started, Tutorial for Beginners, video, vite, vite.js, vue, Vue.js, with, your

Alfalfa

0 0 votes

Article Rating

19 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

@az-qf9ht

1 month ago

I finally feel like I understand React under the hood. Thank you

@thesloable

1 month ago

React is complicated and unintuitive. Vuejs is intuitive and easy to learn. I use Vue for my personal projects but had to learn React for work. I wish Vuejs gains more popularity so that we don't have hv to deal with React