A simple introduction to ReactJS.

ReactJS is one of the top javascript frameworks used for building web applications. In this article, we will be learning the basics introduction to ReactJS concepts by building a small application.

Most developers choose React because it is easy to learn and suits almost all scales of applications. Many frameworks were built to accompany React for various use cases. For example.

GatsbyJS – for building static web pages (Check out my article here).

NextJS – for building large-scale applications with additional features like SSR.

React Native – a framework for building mobile hybrid applications ( Android and IOS ).

Pre request:

For developing react applications, first, we need to have NodeJS and NPM installed locally. Refer to this link to set up both.

Project initialisation:

First, we initialize the project folder. Enter the below command in your terminal

npx create-react-app <application name>

The above command will initialize a folder with the given name, and with all the required npm libraries.

Note: create-react-app is a tool that initializes a react application. We can use this tool using npx without installing it locally.

to put it simply, npx is a tool that allows us to use some npm libraries without installing them locally.

Folder structure:

• After the create-react-app command is finished, our folder structure will look like this.
• Now, we can run the application and test if everything has been installed correctly.

Execute the following command in the terminal.

npm start

This will start your server on port 3000 by default ( The port can be changed ). We can see the result on http://localhost:3000.

Core concepts:

We will learn the core concepts by creating a simple to-do application.

Our folder structure:

• On our folder structure, we have App.js the entry file and index.js for rendering our whole application.
• components folder will contain all the individual sub-components in our application. In this way, it will be reusable though-out the application.
• the public folder contains icons and fonts that we want to use in our application.
• you can find an index.html inside the public folder, this is the only HTML file in a react application. All the components will be rendered inside this page. ( refer to SPA for more details ).

Components:

A component is a simple javascript function that returns JSX code.

JSX is a syntax used by ReactJS for rendering elements. Compared to traditional HTML, it is very efficient to interact with the UI components.

Index.js:

• In the above screenshot, we have the index.js file. This is the entry point for a react application.
• <React.StrictMode> is used for detecting unsafe codes. Refer to this link for a detailed description.
• <App /> is another component, we have imported and used in this file.
• ReactDOM.render method will render the provided JSX code in the specified element. In this case an element with id ‘root’.

App.js:

• App.js is the root component, this is where all other components are included (directly or through routing).
• useState function lets you declare component-specific variables.
• There will be two objects returned from useState, the first one(listItems) stores the value, and the second(setListItems) is a function used to set the value of that variable.

Note: In the ReactJS framework, every variable update will cause the view to re-render. But the re-rendering will be done in an efficient way. To put it simply, React only updates the part of the component where it is needed.

Example: On App.js, whenever listItems states updates, the ul element alone will get updated.

ReactJS does this by storing the whole DOM in its memory called virtual DOM and will check for changes each and every time when the state updates. This is why React is one of the fastest frameworks.

• AddListItem and ListItem are components for adding a new item to the to-do list and displaying the list respectively.
• On AddListItem, we have the addList attribute, this is called a prop.

Note: Props is the way to pass variables from one component to another.

Example: In App.js, We pass the addList function to AddListItem component, this function will be called in that component ( More on this later ).

• We map through listItems to display the to-do list.
• In ListItem component, we pass two props itemName and index.

AddListItem.component.js:

• In this component we have useRef, this is used to refer to a UI element in a component. This is done by passing the object returned useRef to the attribute ref of an element.
• There is a lot we can do with a ref, here we use it to clear the input element.
• We can also notice that addList function that we passed as a prop is obtained by destructuring the parameter to this component.

Note: In ReactJS, we can get the value of an input element using the event object. Here we store the input value in text state variable.

listItem.component.js:

• Here we have a simple component, that displays the name of the to-do list item.
• The li element has a key attribute, this is used by the framework to identify which element in an array needs to be updated.

Note: Any element inside a loop ( map function ) in ReactJS should have a key prop.

• There are no states here, so the re-rendering will only happen when the itemName or index prop changes. Such components that don’t have a state are called Pure components.

That’s it for the basics. Run the application with the following command.

npm start

This will open our application in the default browser on port 3000 ( if not navigate to http://localhost:3000 ).

Output:

Now enter a new text and click add, we can see that the new items are being added and listed.

Conclusion:

This article introduces ReactJS to new developers. We have covered basic concepts including Components, states, and props. React also has some cool out-of-the-box features like memoization and managing components’ lifecycle using useEffect.

From here you can learn routing, state management, and API calls.

Happy coding !!!

For a detailed explanation of React JS, do check this article on The Best Guide to Know What Is React.

Github Repo: https://github.com/kishork2120/react-tutorial