react-notes.md

React notes

Understanding the live tracking app by Hasura

• Code at CodeSandbox

• Code

• If you are new to Javascript, this guide covers all the necessary fundamentals.

• Getting started guide for ReactJS. This is the official docs. In my opinion, the best resource to learn React.

• Video tutorials to learn ReactJS

Materials for React and GraphQL introduction

• https://developer.okta.com/blog/2018/10/11/build-simple-web-app-with-express-react-graphql
• https://medium.com/codingthesmartway-com-blog/getting-started-with-react-and-graphql-395311c1e8da
• https://www.howtographql.com/react-apollo/0-introduction/
• https://www.robinwieruch.de/react-with-graphql-tutorial/
• https://codeburst.io/graphql-in-react-for-noobs-12ae866bec95
• https://blog.apollographql.com/full-stack-react-graphql-tutorial-582ac8d24e3b

JSX

Generally, Markup for UI is embedded in HTML, logic in JS.

JSX combines both markup and logic. Here is the hello world of JSX.

const element = <h1>Hello, world!</h1>;

This syntax is neither a JS string nor HTML. It's JSX!

React uses JSX to create components. Components are the building blocks of any React app and a typical React app will have many of these. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements in JSX describing what should appear on the screen.

Reference to know more about docs.

---

At the heart of writing react application is a React component. A react component contains both logic and markup.

const element =

;

• div is a DOM tag.
• tabIndex is its attribute.
• element is a React element.

An attribute of a DOM element could be an Javascript expression const element = ;

Components are user defined. And they return a react element.

---

How does a user define a component?

• The simplest way to define a component is to write a JavaScript function:

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

We will learn about props a bit later.

You can also use an ES6 class to define a component:

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

The above two components are equivalent from React’s point of view.
You could see that both the components return a react element. 


Here, the name of the component is `Welcome`. 

A React component can be used inside a react element like this,

const element = <Welcome name="Sara" />;

This is used similar to how we used react elements with DOM tags.

const element = <div />;

And, a component can be rendered on web page using the ReactDOM.render() function.

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. We call ReactDOM.render() with the <Welcome name="Sara" /> element.
2. React calls the Welcome component with {name: 'Sara'} as the props.
3. Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
4. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

props is optional to JSX component function. The following is a valid JSX function too.

function Welcome() {
  return <h1>Hello </h1>;
}

---

Components can refer to other components in their output

For example, we can create an App component that renders Welcome many times:

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

---

Again, React components can just be Javascript functions which could return JSX.

---