React JS Learning Notes

What is React?

React JS is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

Latest Version: v16.8.6 (Checked 03/April/2019)

• Docs: https://reactjs.org/docs/getting-started.html

• Tutorial: https://reactjs.org/tutorial/tutorial.html

• React on Github: https://github.com/facebook/react

• React in Chinese (简体中文): https://zh-hans.reactjs.org/

React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API.

Learning Roadmap

Source: https://github.com/adam-golab/react-developer-roadmap

Reasons why we use React

• React is fast. Apps made in React can handle complex updates and still feel quick and responsive.

• React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.

• React is scalable. Large programs that display a lot of changing data are where React performs best.

• React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React’s potential.

• React is popular. While this reason has admittedly little to do with React’s quality, the truth is that understanding React will make you more employable.

Basic usage

The following is a rudimentary example of React usage in HTML with JSX and JavaScript.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>
``` 

The Greeter class is a React component that accepts a property greeting. The ReactDOM.render method creates an instance of the Greeter component, sets the greeting property to 'Hello World' and inserts the rendered component as a child element to the DOM element with id myReactApp.

When displayed in a web browser the result will be

Hello World!

`