Learning React Framework — Practical Examples for Beginners

Yadav, Niteesh
Frontend Weekly

--

Certainly! React is a powerful JavaScript library for building user interfaces, and it’s widely used for developing single-page applications.

How to use it?

To use React, you need to include a single JavaScript file in your page. Facebook kindly provides a CDN that you can directly link to:

<script src="http://fb.me/react-0.10.0.min.js"></script>

This gives you access to the global React object, which holds a number of useful methods, some of which you can see in these examples. The recommended way to write React web apps is by using a language called JSX. This is a slightly enhanced version of JavaScript that allows you to initialize React components by using an HTML-like syntax directly in your code. It is compiled down to JavaScript before being interpreted by the browser. JSX is completely optional — you can use regular JavaScript if you prefer.

Here are some practical examples to help you learn React:

Hello World:

The classic “Hello World” example. Start by creating a simple React component that renders a greeting message.

// HelloWorld.js
import React from 'react';

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

export default HelloWorld;

Counter:

Create a simple counter application with increment and decrement buttons.

// Counter.js
import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
}

export default Counter;

Todo List:

Build a basic todo list with the ability to add and remove tasks.

// TodoList.js
import React, { useState } from…

--

--

Yadav, Niteesh
Frontend Weekly

Thinker || Writer || Avid Reader || Technical Enthusiast