4.0 About React - GiovanniKaaijk/frontend-applications GitHub Wiki

What are the benefits of React and why should you use this?

History of React

React was created in 2011 by a software engineer named Jordan Walke, who worked at Facebook. Jordan has made an early prototype with the name FaxJS. React was first used to created Facebook's newsfeed, later on in was implemented in Instagram's system. In 2013 React became open source, the popularity of React grew really fast, this made the community asking for a mobile version to create apps. In 2015 React native was introduced, React native made it possible to create apps for IOS and Android. In a research of Jetbrains (2018), it turned out React was the most used Javascript framework. Jetbrains source

About React

React is an open-source JavaScript library for creating web applications. React is based on components, a component is a module that renders output. You can also use components within other components to create a modular application.

React does not respond on the web browser's DOM, it has his own virtual DOM. When the virtual DOM has been updated, React determines what elements in the browser's DOM need to be changed. This makes React a really fast, dynamic framework.

React is build to be fast in rendering dynamic webpages.

Usage

As mentioned above, React is component based. React can use these components to render components within and to create data flows. The subcomponents can't affect the components above them, this is useful because codes within components can't accidentally break other components, only parent components can affect subcomponents.

When using react, you usually create an HTML file with only a div in the body with the id root. To render HTML to this root, React uses JSX.

Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript. source

A user can write the following in JS:

render (
    <h1>Hello world</h1>
);

Then Babel will transform this into:

React.createElement(
   "h1", "Hello world"
)

You can also use Javascript expressions to render dynamic data into JSX, for example:

const name = "John Doe"
render (
    <h1>Welcome {name}</h1>
);

You can also use JSX to render multiple React components, this makes rendering dynamic content more easily. You can send data to the subcomponent by passing a prop. When you are creating multiple of the same components, every component should have his own key.

<div className="render-components">
   {Array.map(object => (
      <object
        key={uniqueKey}
        data={someData}
      />
   ))}
</div>

The benefits of React

  • Easy learning curve for the basics of React (when the user has some Javascript experience)
  • Enhanced performance
  • Easy to create dynamic applications (The virtual DOM of React automatically updates the HTML elements that contain new data, then it checks which elements have been updated and then updates the actual web browser's DOM elements)
  • Big community
  • There is a lot of documentation available
  • Known to be SEO friendly
  • Shows errors together with the reasons for these errors, making them easy to fix
  • Reusable components

The cons of React

  • High pace of development (this is also a benefit, but a lot of developers find it hard to keep up to date with the new releases)
  • Only client side rendering (when no html files have been sent to the server)
  • JSX can be hard for new developers

My experience

My experience with React started badly, I found it difficult to understand even after following a tutorial. But when I had followed a crash course I understood better. I started making my own React app and I really enjoyed doing this. I had trouble understanding the states and props, especially how I could adjust them from a child component. I found using components within JSX very useful, this way you could easily create dynamic content. What I also really liked about React is that the elements automatically update when a change takes place, I could not have done this before. I was always impressed by sites that changed pages while not referencing the entire page, when I found out that this also happened via React I found this very cool. I think there are only two negatives to React. Changing the state from a child component is difficult, you have to include a function with the component and then use this function in the component together with parameters to change the state in the parent component. The second downside is the learning curve, it took me two full days to understand React, even though I had reasonable JavaScript knowledge.

When I was done with my app, I tried to deploy it. Unfortunately I got a white page, the javascript did not load, I do not know if this error is with me or with React. That is why I do not include this in the feedback about React.

Conclusion

I think React is a great framework to use. When you are through the learning curve, React is a good app to build an application. The use of components makes writing the code very clear. There is also a lot of documentation available when you encounter a problem. Personally, I find React's virtual dom very cool, because the page is not refreshed every time, you get the idea of an app much more. I myself had a lot of fun creating my web app.

⚠️ **GitHub.com Fallback** ⚠️