reactjs tutorial for beginners

A React.js tutorial for beginners

Hello friends, in this article, we will learn about the basic concept of the Reactjs. We will start with the fundamental idea in this tutorial. Further, as we progress, I will add some more interactive tutorials with practicals and advanced concepts.

Introduction to Reactjs

ReactJS is a javascript library created and maintained by Facebook. ReactJS is an open-source and component-based front end library responsible for the view player of the application. Its declarative, efficient, and flexible Javascript library for building user interfaces. A react application is consists of multiple components. Each component was responsible for rendering a small piece of HTML. Components can be nested with other parts to allow the complex application to be built from simple blocks of the component.

If we see a modern web application, there are many famous web applications based on reactJs. Some of the renowned web applications are as given below

  1. Facebook
  2. Instagram
  3. Netflix
  4. New York Times
  5. WhatsApp
  6. Khan Academy

In this article, we are going to cover the below concept

  1. create react app
  2. The folder structure of the reactjs application
  3. Components in the ReactJS and Props
  4. React JSX

Step 1 : Create ReactJS APP

First, we need to install the create-react-app by running this command in our terminal:

C:\Users/admin>npm install -g create-react-app

After installing this create-react-app we can create our basic react application. In your terminal, run this command

C:\Users\admin>npx create-react-app firstReactApp

The create-react-app will set up everything we need to run a RactJS application. After that just move to our created application

C:\Users\admin>cd firstReactApp

After this, we need to run the application by executing the given command in the terminal.

C:\Users\admin\firstReactApp>npm start

The application will run on the http://localhost:3000

Step 2: The folder structure of the ReactJS application

Officially React doesn’t have any predefined structure. But there are few common approaches that developers adopt.

  1. Grouping by ( features or routes )

In this file is arranged as grouped by feature or route.

common/
  userProfile.js
  userProfile.css
  util.js
  util.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

2. Group By File Type

Another popular way to structure the projects into group similar files together

API
  api.js
  util.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css  

For more information visit this URL.

Step 3: Components in the ReactJS and Props

Components split our UI into many small independent, reusable pieces. We can take this example; we have a web application to divide it in a broader way like that header, side panel, content, and footer. These all are components of that web APP but in a significantly broader way.
We can divide each UI into a tiny independent component.

For example, we can create a component in which we are just showing a success message. That component we can use in all of the Project we just need to import that component. In Reactjs, components are conceptually are like Javascript functions. They accept the parameter (called “props”) and return React elements. These elements will describe what will appear on the screen.

There are two types of components in the ReactJs

  1. Functional Components
  2. Class componens

A. Functional Components

Functional components are simple Javascript function which accepts the parameter and returns the result. This function is a valid React functional component because it accepts a single parameter, i.e., “props” it contains the object argument which contains the provided data. After processing the data, it returns a React element. Such components we called it Functional components.

function AddUser(props) {
  return <h1>Hello, new user {props.name}</h1>;
}

B. Class Components

When we use the ES6 class to define the component, then it is called a class component

class AddUser extends React.Component {
  render() {
    return <h1>Hello, new user, {this.props.name}</h1>;
  }
}

Example of Class component

class UserInfo extends React.Component {
  render() {
    return <h2>My Email id is{this.props.user.email}!</h2>;
  }
}

class User extends React.Component {
  render() {
    const userInfo = {name: "Neil", email: "neil@spycoding.com"};
    return (
      <div>
      <h1>Email id of login user?</h1>
      <Car UserInfo={userInfo} />
      </div>
    );
  }
}

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

C. props

Mostly, props are passed to components by using HTML attributes. React props are like arguments in the Javascript functions and attributes in the HTML. Take an example; we are passing name like Albert Einstein in the component as follow:-

const scientist = <ScientistName name="Albert Einstein" />;

The functional and class components receive the argument as a props object:

Example

Use the scientist attribute in the component:

class ScientistName extends React.Component {
  render() {
    return <h2>I am a {this.props.name}!</h2>;
  }

We have created one component in which we just need to pass the scientist’s name. It will work for any number of the scientist name. We can create as many small components, and we need to import and use that component. Take another example we have created a component “Button” in which we can pass color, class name, etc. as props. Wherever we need Button, we just need to import it and pass the attribute.

Differences between functional and class-Components

Functional ComponentsClass Components
Functional components are plain JavaScript function which accepts parameter(props) as an argument and return(React Element).A class component is an ES6 based class in this; you need to extend from the React. It requires more code, but it also gives you more benefits.
Functional components are referred to as “dumb” or stateless because they accept data and display them is some form. Mainly they are responsible for rendering the UI.Class components called “smart” or “stateful” components as they tend to implement logic.
No lifecycle methods such as componentDidMount cannot be used in the functional components.In the Class component, we can use React lifecycle methods.
In functional components, props can be used directly as {props.name}.In class components. props can be used as {this.props.name}

Step 4: React JSX

JSX abbreviate for JavaScript XML. Like in the XML, we can create our tags similarly. Due to JSX, it allows us to write HTML in react. Due to this, it became easier to write and add HTML to React. JSX allow us to write HTML elements in javascript and easily place them in the DOM without any createElement() / appendChild() functions. JSX will throw an error if the HTML is not proper. It also throws an error if the Parent element is missed.

Let’s take an example first with JSX and second without the JSX.

Example 1 (with JSX)

const element = <h1>Hope for Best!</h1>;

ReactDOM.render(element, document.getElementById('root'));

Example 2 (without JSX)

const element = React.createElement('h1', {}, 'Hope for Best!!');

ReactDOM.render(element, document.getElementById('root'));

In JSX, we can use expression also. JavaScript function calls and evaluates to JavaScript objects.

function getUserInfo(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;}
}

When we are embedding a JavaScript expression in an attribute, we should use quotes for string values or curly braces for the expressions. We shouldn’t use both in the same attribute.

Conclusion

I hope you all like this basic subjective tutorial. I have tried to explain the basic ReactJs concepts. From the next tutorial, we will like to implement some basic react tutorial. In the tutorial, there is more chance to clear our doubts.