React JS is today’s most popular JavaScript Library for building User Interfaces, which has created by Facebook. We can build modern, fast Single Page Applications or websites with React.
As a Frontend Developer, I know that React JS is very popular among companies in the Software Industry, but we can also see the increase of React JS popularity in the last 5 years, by Google Trends:
Since React is so popular in the market and beneficial to know for a Web/Frontend Developer, I decided to cover some features of React JS in my following articles, as 3 parts for now:
Important:_ Before learning React, you need to know _JavaScript (and ES6 Features)
This is one of the most unclear subjects of React. Let’s make this clear from the beginning. React is a Library, not a Framework.
A library in programming can be explained as a collection of codes. We use a library to write code in a much simpler way or to import a feature from it into our project. JQuery is a library for example.
We can write JavaScript much simpler by using JQuery, or we can import written JQuery features to our project. The project itself is not dependent on a library.
A Framework, on the other hand, is a complete package of code with its own functionalities & libraries. A Framework has its own rules, you don’t have much flexibility and the project is dependent on the Framework you use. Angular is an example of a framework.
So React is for building User Interfaces, and how you program the rest of the project is up to you. Like JQuery, you can include React in your project partially, or completely. So React JS a library.
Now let’s move on with how React actually works…
To understand the importance of React Virtual DOM, first, you need to know what **DOM (Document Object Model)**is.
DOM is basically the representation of the HTML code in a webpage. The document is the webpage itself, the objects are the HTML tags. And finally, the model of DOM is a tree structure:
You can read more about DOM here.
Each time you make a change in the code, DOM will be completely updated and rewritten. This is an expensive operation and consumes lots of time. In this point, React provides a solution: The Virtual DOM.
So when something changes:
This approach makes a webpage much faster than a standard webpage. That’s also one of the reasons why React is so popular.
In classic Frontend programming, we have separated HTML, CSS and JS file structures. React is a bit different. We don’t have separated HTML files in React.
In JSX syntax, we write HTML tags inside JavaScript.
Exactly :) In React, for example, a simple JavaScript variable can be like this:
const element = <h1>Hello!</h1>;
Normally, we can’t assign an HTML tag to a JavaScript variable. But with JSX, we can. The code above you see is neither HTML nor JavaScript. It’s an example of JSX.
JSX (JavaScript XML) is a syntax extension to JavaScript used by React. JSX is basically used to write HTML tags inside JavaScript. Later, the JSX code will be translated into normal JavaScript, by Babel.
In summary, React doesn’t have HTML files, HTML tags are rendered directly inside JavaScript. This approach makes React faster.
You don’t have to use JSX with React, but it is strongly recommended. JSX simplifies React and makes it easier to read. Let me give an example of React code with and without JSX.
React with JSX:
Let me shortly explain the code here. We have a React class named “Hello”. This is a default React class with its render function. The class returns an HTML div element so it can be rendered later as a component, anywhere in your project.
Below the class, there is a special React DOM Render function which is calling the Hello class, as a component **()**and specifies where (root) your React code will be printed.
React without JSX:
And here is the same React code as JavaScript but without JSX. Which one is easier for you?
Some important rules about JSX:
class Test extends React.Component {
render() {
return (
<div>
<p>Hello</p>
<p>World</p>
</div>
);
}
}
We can use JSX inside for loops, if-else cases:
render() {
if(condition==true) {
return <p>This text</p>;
} else {
return <p>Another text</p>;
}
}
HTML attribute names like “class” becomes “className”, “tabindex” becomes “tabIndex” as camelCase.
<div className="myClass"></div>
HTML tags must always be closed
Finally, we follow the instructions below to install React:
npx create-react-app my-app
cd my-app
Finally, type npm start and the application should start on your localhost.
You can see here for installation details.
I hope that my article helps you to get the first understanding of React. React may seem complicated at the beginning but that’s OK. Keep reading and feel free to ask your questions in the comment sections. In the second part, I will explain sharing data between React components with props and state.
Thanks for your support & see you guys soon!
Originally published by Cem Eygi at https://codeburst.io
#reactjs #javascript