ReactJS Tutorial for Beginners

ReactJS Tutorial for Beginners

React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components".

We'll start by learning how to use React's "Hello World" example. Then we'll move on to setting up a development environment and creating a simple React component. By the end of this tutorial, you'll be able to create a basic React app and understand how React works.

1. Hello World

React's "Hello World" example is a simple one, but it illustrates the basic usage of React. We create a component called <Welcome /> and render it to the DOM with the ReactDOM.render() method.

import React from 'react';

import ReactDOM from 'react-dom';

const Welcome = () => {

return <h1>Hello, world!</h1>;

};

ReactDOM.render(

<Welcome />,

document.getElementById('root')

);

2. Setting up your Development Environment

Before we can start writing React code, we need to set up a development environment. This will allow us to use a JavaScript transpiler (such as Babel) and a bundler (such as webpack).

We'll use the create-react-app tool to set up our environment. This will give us a simple development server and a basic directory structure.

To install create-react-app, open a terminal and run:

npm install -g create-react-app

Once it's finished installing, we can create our new React app with the create-react-app command:

create-react-app my-app

This will create a new directory called my-app with our React app inside.

To start the development server and open our app in a browser, we can run:

cd my-app

npm start

3. Creating a React Component

Now that we have a basic React app up and running, let's create our first React component.

Components are the building blocks of React apps. A component is a piece of UI that can be reusable throughout your app. In other words, if you have a section of your app that you want to use in multiple places, you can create a component for it.

React components are written in JavaScript, but they use a special syntax called JSX. JSX is a syntax extension for JavaScript that lets you write HTML-like code inside JavaScript.

Don't worry if you've never seen JSX before. It's not required to use React and we won't be using it much in this tutorial. However, it's good to know that it exists and how to use it, as you'll see JSX in many React examples and codebases.

Let's create a new file called src/components/Welcome.js and add the following code:

import React from 'react';

const Welcome = () => {

return (

<div>

<h1>Hello, world!</h1>

<p>I'm a React component</p>

</div>

);

};

export default Welcome;

This defines a new React component called Welcome. The component is a function that returns a JSX element. In this case, it returns a <div> element with a <h1> and a <p> inside.

We then use the export keyword to make the component available for other files to import.

4. Rendering a React Component

Now that we have a component, we need to render it to the DOM.

We can do this with the ReactDOM.render() method. This method takes two arguments: the JSX element to render and the DOM element to render it into.

Let's import our Welcome component into the src/index.js file and render it:

import React from 'react';

import ReactDOM from 'react-dom';

import Welcome from './components/Welcome';

ReactDOM.render(

<Welcome />,

document.getElementById('root')

);

If we restart the development server and open our app in the browser, we should see the component rendered to the page:

Hello, world!

I'm a React component

And that's it! You've now learned the basics of React. In the next tutorial, we'll learn about state and props, which are the two main ways to pass data to React components.