React

React

React is a javascript library for building user iterfaces. React makes us to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make our code more predictable and easier to debug. It is Component based. React build components that manage their own state then compose them to make complex UIs. React can be used as a base in the development of single-page or mobile applications. However React is only concerned with rendering data to the DOM

Components

React code is made of entities called components. Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as “props”. Components are the building blocks of any React app. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI should appear. components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

A different way to write components

The two primary ways of declaring components in React is via functional components and class-based components.

1. Functionl components

2. Class-based components

Functional components

Functional components are purely and are simply represented by a function that optionally takes props and returns a React element to be rendered to the page. Generally, it is preferred to use functional components whenever possible because of their predictability and conciseness. Their output is always the same given the same props. Functional components are declared with a function that then returns some JSX. for example:

Copy 
1const FuntionalComponent = (props) => <div>Hello, {props.name}!</div>;

Class Components

These components are created using ES6’s class syntax. They have some additional features such as the ability to contain logic (for example methods that handle onClick events), local state (more) and other capabilities to be explored in later sections of the book. As you explore other resources, you might find class components referred to as smart, container or stateful components. They are also known as “stateful” components, because their state can hold values throughout the component and can be passed to child components through props:

A class component in its simplest form:

Copy 
1class ClassComponent extends React.Component {
2  render(){
3    return <h1>Hi, I’m a smart component!</h1>;
4  }
5}

How do I choose which component type to use?

Use a class component if you:

1. need to manage local state

2. need to add lifecycle methods to your component

3. need to add logic for event handlers

Otherwise, always use a functional component.

props

Props are React’s way of making components easily and dynamically customisable. They provide a way of passing properties/data down from one component to another, typically from a parent to a child component (unidirectional dataflow). It’s important to note that props are read-only and that a component must never modify the props passed to it. As such, when a component is passed props as input, it should always return the same result for the same input.

All React components should act as pure functions with respect to their props.

Copy 
1const FunctionalComponent = props => <h1>Hello {props.name}</h1>;
2   ReactDOM.render(
3     <ClassComponent name={‘John’}/>,
4     document.getElementById('root')
5   );

This renders the text “Hello Edmond” to the screen.

Using Props with Class Components

Adding props to class components is a very similar process to the one used in the functional component above. There are two notable changes:

1. Props is not passed as an argument to the class

2. The name attribute is accessed using this.props.name instead of props.name

Copy 
1class ClassComponent extends React.Component {
2     render(){
3     return <h1>Hello {this.props.name}</h1>;
4     }
5   }
6ReactDOM.render(
7     <ClassComponent name={‘John’}/>,
8     document.getElementById('root')
9   );

Conditional statements

If else statements cannot be used inside JSX but conditional expressions can be used instead. The example below will render { i === 1 ? ‘true’ : ‘false’ } as the string ‘true’ because i is equal to 1.

Functions and JSX can be used in conditionals:

Copy 
1class App extends React.Component {
2  render() {
3    const sections = [1, 2, 3];
4    return (
5      <div>
6        {sections.length > 0 && sections.map(n => (
7            /* 'key' is used by react to keep track of list items and their changes */
8            /* Each 'key' must be unique */
9            <div key={"section-" + n}>Section {n}</div>
10        ))}
11      </div>
12    );
13  }
14}

The above will render:

Copy 
1<div>
2  <div>Section 1</div>
3  <div>Section 2</div>
4  <div>Section 3</div>
5</div>