Ankur Singh

Frontend Developer Software Developer || Fascinated by tech trends || Building usable systems that work on web and mobile.

Start with React JS

October 25, 2021

What is React?

  • React is a JavaScript library — one of the most popular.
  • React is an open-source project created by Facebook.
  • React is not a framework (unlike Angular).
  • React is used to build user interfaces (UI) on the front end.
  • React is used to build single-page applications(SPAs).
  • React is the view layer of an MVC application (Model View Controller)

ReactJS is a JavaScript library used for building reusable UI components. This means it is a view library that uses components to change content on the page without refreshing, which is the core principle behind single-page applications.

React Features

  • JSX ? JSX stands for JavaScript XML. JSX is a JavaScript syntax extension. JSX allows us to write HTML in React. It isn’t necessary to use JSX in React development, but it is recommended. With JSX you can write expressions inside curly braces { } including variables, functions, and properties.
  • Unidirectional data flow ? React implements a one-way data flow. In React, data values are passed to each component as properties in its HTML tags. The component cannot directly modify any properties but can pass a callback function and with the help of this, it can modify the data.

Setup and Installation

1) Install Node.js and npm globally on your machine. (we are using node.js version 12.16 currently, you can have any version >10.x and for npm, it should be > 5.2)

2) Facebook has created Create React App environment that will create a live development server and automatically compile React and all other things. To create any React application, run the following code in your terminal:

(Note: If you’ve previously installed create-react-app globally via npm install -g create-react-app, we recommend you to uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version)

The create-react-app will set up everything you need to run a React application. And make sure you should not use uppercase letters for your application name.So let’s check out our browser and we can see our application is up and running on http://localhost:3000 locally.

3) Visual Studio Code — as an IDE (you can use any).

Introduction to the directory structure

Let’s walk through the directory structure that React CLI created for us.

Open this newly created application in VS Code.

  • As you can see the very first directory is node_modules and this is having all the library dependency of package.json.
  • Now check this public directory.

In this directory our important file is index.html. As you know React is a single page application so it is the only one Html or you can say a single file that gets rendered when we run the application. Also, focus on the line no. 31, where this is the <div> with id=”root”.

This <div> will be replaced with the root component.

Inside this directory, you will also find manifest.json. This file is for PWAs — Progressive Web Apps.

  • The next one is the src directory. This will contain all our React code. This is having App.js, which is the first component, which will get rendered when we run our application. But who is rendering this app component? The answer is index.js. You can see this index.js is having ReactDOM.render() method.

This render method will actually render the index.html’s root div.

It will replace this root div with the app component. This is how your first component will work.

  • In this src directory, we will also have index.css and serviceWorker.js. And this service worker is for PWAs — Progressive Web Apps.
  • Moving ahead, we are having package.json. It contains all the dependencies of our React application.

So, this was all about the structure of the React application.

folder structuresAs you can see the very first directory is node_modules and this is having all the library dependency of package.json.

  • public/index.html: When the application starts this is the first page that is loaded. This will be the only html file in the entire application since React is generally Written using JSX which I will cover later. Also, this file has a line of code <div id=”root”></div>. This line is very significant since all the application components are loaded into this div.
  • src/index.js: This is the javascript file corresponding to index.html. This file has the following line of code which is very significant. ReactDOM.render(<App />, document.getElementById(‘root’));

Index.js file

  • You can see this index.js is having ReactDOM.render() method.

App.js file

  • This is the file for App Component. App Component is the main component in React which acts as a container for all other components.
  • Here className is used to point to a CSS class

render(): The return value of this function is rendered ( displayed ) on the screen. Whenever the render() function is called the Screen is rerendered.

App.cssThis is the CSS file corresponding to App Component

package. Jsonpackage.json: This File has the list of node dependencies which are needed.

Tags:

Share

You may also like...