ReactJS Part 1

It’s tailor-made for creating both native mobile applications and web applications. I’ve been wanting to delve into ReactJS for a while but haven’t had the chance. Over the past month, I’ve spent a considerable amount of time with ReactJS, and I wanted to share something for those who, like me, were hesitant to start or lacked insight into the subject.

What is ReactJS Used For? It allows you to easily develop user interfaces. It is useful for designing screens for every possible scenario. The interface updates based on the changing state as data evolves.

It is component-based, and these components rearrange their interfaces according to the rules you specify for their own states. You use JSX in component files (writing HTML tags within JavaScript), making it easier to change HTML based on the state.

If the element has an “ID”, you will be saved from troubles such as finding it from the “ID” and changing its text, getting the value of the <input/> element.

You can also convert the web application you created with ReactJS into a mobile application with React Native. We can say it is like Cordova…

In general, I liked ReactJS very much, but in my opinion, when developing applications; Especially for large-scale applications, it is necessary to construct the state structure of ReactJS very well. There are several methods for this, I will briefly talk about them at the end of the article series.

ReactJS Installation
Do you need NodeJS? Yes, I assume NodeJS is installed on your computer.

We install npm for ReactJS and start working.

npx install –g create-react-app

Now let’s create our project. We create our working folder and go into the folder from the console.

I created a folder named “ReactPlayground” on the “D:” drive. I went to this folder from the Console and defined my ReactJS project.

npx create-react-app firstApp

While the project is being created, ReactJS creates a project folder named “firstApp” in the “ReactPlayground” folder and uploads the necessary files into it. After the installation process is completed, we go to the folder named “firstApp” from the console and start our project.

npm start

There are two folders in the project that concern us the most, “public” and “src”, there is no need to touch the “public” folder. By collaborating with Webpack and Babel, they make the codes we write in the “src” folder visible in the “index.html” file in the “public” folder.

There are a few files to start with in the “src” folder, let’s delete all of them and create two files of our own “index.js” and “index.css”.

I think there is no need to explain the “index.css” file. “index.js” is the starting file of our project.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

Above, we defined the React object and the ReactDOM object in “index.js”. We also referenced our css file. Our main folder is now “src”. When importing from other files, we need to consider file search path definitions accordingly.

First Component

class MyFirstComponent extends React.Component{
 
}

We have defined the component (like ES6 class definition) but it is empty inside, let’s make it “render” something.

class MyFirstComponent extends React.Component{
 render(){
  return(
   <div>Merhaba Dünya</div>
      );
   } 
}

I returned a <div> element with the render method. The HTML codes we write in Return are called JSX. Every component must have a “render” section! All objects in the return must be in a “fragment/wrapper”.

For example, a “return” like the one below causes ReactJS to throw an error.

render(){
 return(){
  <div></div>
  <div></div>
 }
}

These divs must be in a “fragment/wrapper”. As follows:

render(){
 return(){
  <div>
   <div></div>
   <div></div>
  </div>
 }
}

Now let’s send our component into index.html.

ReactDOM.render(<MyFirstComponent />, document.getElementById("root"));

“MyFirstComponent” is the name of our component and is used like an html tag. The most important part here is; Component names must not be lowercase! We will use the components in JSX and write the html tags in lowercase in JSX. In order for ReactJS to distinguish between components and HTML tags, our components must be uppercase.

We sent our component to the “root” ID. There is a <div> with root “ID” in the “index.html” file located in the “public” folder. Our component will be “rendered” into this div. You can change that html content if you wish. I’ve never needed it.

After seeing the “Hello World” text, let’s add some dynamic content.

class MyFirstComponent extends React.Component{
 render(){
  const message = "ReactJS ile";
  return(
   <div>{message} Merhaba Dünya</div>
  );
 } 
}
ReactDOM.render(<MyFirstComponent />, document.getElementById("root"));

I defined an object named “message” and added this object to the beginning of our text with curly brackets.

We can add various properties to components and use them within the component.

class MyFirstComponent extends React.Component{
 render(){
  return(
   <div>{this.props.message} Merhaba Dünya</div>
  );
 } 
}
ReactDOM.render(<MyFirstComponent message="React ile" />, document.getElementById("root"));

Instead of creating a “message” object within the component’s render method. While rendering in ReactDOM, I added a property to the component and accessed this property within the component with “this.props.message”. You can add as many properties as you want and access them as “this.props.propertyName”. However, never forget that these properties are read-only.

In fact, there is no need to define a class for a component that will only render. Alternative method:

function MyFirstComponent(props){
 return(
  <div>{props.message} Merhaba Dünya</div>
 );
}
ReactDOM.render(<MyFirstComponent message="React ile" />, document.getElementById("root"));

As above, we can create a traditional function and it takes the “props” parameter into it. We can return JSX without using render within the function. We can also write our message as “props.message”. This is called Functional Component.

If you ask why we use classes, class is needed especially to control the states of the components.

From the beginning, I have been constantly writing state in parentheses; You will see later what a terrible thing it is. I repeat it whenever necessary so that you don’t forget.

Let’s create a simple user profile section. We work in “Index.js”.

Sample data:

var user = {
  id: "369789Xcv5854",
  userName: "John Doe",
  friends: [
    {
      userName: "Sed Ultrices Tellus",
      userURL: "#1"
    },{
      userName: "Eget Dapibus",
      userURL: "#2"
    },{
      userName: "Morbi Consequa",
      userURL: "#3"
    },{
      userName: "Ante Pulvinar Rhoncus",
      userURL: "#4"
    },{
      userName: "Cras Gravida",
      userURL: "#5"
    }
  ],
  onlineStatus: true
};

Let’s create our component named “UserProfile”.

class UserProfile extends React.Component{
    render(){
        return(
            <div className="user_profile">
                <span className="user_name"></span>
                <span className="online_status"></span>
                <ul className="user_friends"></ul>
            </div>
        ); 
    }
}
ReactDOM.render(<UserProfile userData={user}/>, document.getElementById("root"));

In the Render section, I wrote the HTML I wanted to be created, then added the user’s data to the “userData” property of my component and sent it to the “root” element. If you write “console.log(this.props)” at the top of the render method, before the return section, you can see the property you sent.

Typing the username is easy, we just did it. Now let’s write conditional JSX according to the “onlineStatus” status.

class UserProfile extends React.Component{
    render(){
        return(
            <div className="user_profile">
                <span className="user_name">{this.props.userData.userName}</span>
                {this.props. userData.onlineStatus && <span className="online_status">Online</span>}
                <ul className="user_friends"></ul>
            </div>
        ); 
    }
}

We use curly brackets when we need to write code in JSX. We also need to write code for Conditional JSX.

{this.props.userData.onlineStatus && <span className=”online_status”>Online</span>}

With the above line, it is rendered if the onlineStatus value in the user data is true. You can find more detailed information about JSX in the JSX in Depth article.

Let’s make another example for Conditional JSX.

class UserProfile extends React.Component{
    render(){
     let userOnlineStatusCssClassName = "online_status";
     if (this.props.userData.onlineStatus){
      userOnlineStatusCssClassName += " show"
     }
     return(
      <div className="user_profile">
       <span className="user_name">{this.props.userData.userName}</span>
       <span className={userOnlineStatusCssClassName}>Online</span>
       <ul className="user_friends"></ul>
      </div>
        ); 
    }
}

We can add css class according to the user’s “onlineStatus” status. First of all, I defined a variable (userOnlineStatusCssClassName) and gave the default css class name of the span related to “onlineStatus” (online_status). Then, I added a new css class name (show) to this variable according to the “onlineStatus” status and gave our css class variable to span with curly brackets in JSX.

You can write the rules for the css class named “show” in the index.css file.

Now let’s add the user’s friends and finish. I’m making a tiny component that will create the <li>s we need for the friend list.

function FriendItem (props) {
 return(
  <li>
   <a href={props.friendProperty.userURL}>{props.friendProperty.userName}</a>
  </li>
 );
}

Now let’s navigate the user’s friend list with the “loop” and create our list.

class UserProfile extends React.Component{
 render(){
  let userOnlineStatusCssClassName = "online_status";
  if (this.props.userData.onlineStatus){
   userOnlineStatusCssClassName += " show";
  }
  const friendList = this.props.userData.friends.map(function(friend, index) {
   return < FriendItem friendProperty={friend} key={index}/>
  });
  return(
   <div className="user_profile">
    <span className="user_name">{this.props. userData.userName}</span>
    <span className={userOnlineStatusCssClassName}>Online</span>
    <ul className="user_friends">{friendList}</ul>
   </div>
        ); 
    }
}

I sent the “FriendItem” component to the “friendList” variable by navigating the user’s friend list with a map. I sent the “friend” parameter in the callback function in the map to “FriendItem” with the “friendProperty” property.

In “FriendItem”, I printed the incoming data as we did before.

Then, I added the “friendList” variable inside the <ul> with curly brackets.

Additionally, there is an index parameter in the callback function within the loop. ReactJS definitely requires a “key” for the elements we create with Loop. They say that they use it in the background and that this “key” is important. I haven’t researched what it does yet, but I will definitely share it when I get information.