What’s the buzz about React?
Let’s learn the basics
React is a JavaScript library for building UI components or an entire single page or multi page Applications. By library I mean, React can just be imported in to any HTML file for specific functions or UI features or you can build just by using React alone.
What makes React so popular?
Let’s take a look at the stats of monthly NPM downloads for React, Vue and Angular since 2017 till September 2019
From the estimate we can see that React leads the pack with 23.7 million downloads. The main reason React stands out is the use of JSX
JSX
Instead of separating the markup and logic in different files (Like in Angular), React components contain both. This is what makes React stand out of the competition. You can seamlessly render the logic and HTML elements within a single Component file which saves you a lot of confusion and managing different files. So coming back to JSX, JSX is like a XML like syntax extension to ECMA script. To put it precise it is like an extension of JavaScript. Consider the below code
const element = <h1> Hello World! </h1>;
The above declaration is a typical JSX element which can then be rendered to the React DOM. Though it is not mandatory to use JSX in React but it is recommended to do so to get most out of React.
Lets create a new React project and learn the main concepts from there.
Dependencies
We will be learning how to build a full React application rather than importing React to HTML. To do that you need to have the following dependencies installed
- Node.js
2. NPM
3. Any IDE of your choice ( Preferably VS code)
Creating your first React application
Once you have all the dependencies installed lets build your first React application
It is as simple as running the below command
npx create-react-app my-first-react-app
Or if you want to do it via npm you can install a npm library and then use that to create the application
npm install create-react-app
And then run
create-react-app my-first-react-app
You can give any desired name instead of “my-first-react-app”. Once you run the command npm will install all the dependency packages required to run react and it will create a project folder in your current working directory. You can copy the created folder path and open it in Visual Studio Code ( Or your desired IDE) to get the following folder structure
Lets look in to the basic attributes
Components
Components are the individual JavaScript files that return JSX to display on the screen. You can simply create a new JavaScript file and can code the component in one of the two ways.
- Functional Components
- Class Components
Functional Components
Functional components are simple ES6 functions which accept props as an argument and return a JSX to render on the screen.
function firstComponent(props){
return <div> Hello world! </div>
}
export default firstComponent;
Or if you want to use the ES6 arrow function
const Hello = props => (<div> Hello World! </div>);
The difference from the class component is that class components allow for state and life-cycle methods. However, after React 16.8 update functional components can use hooks to make use of the state as well.
Class components
Class components in React are classes which extend the “Component” class from React library. They should have a render function which return the sufficient JSX code to render in the screen.
The below is a simple class component in React
import React, { Component } from 'react';
class MyFirstComponent extends Component {
render() {
return (<div>This is my component.</div>);
}
}
export default MyFirstComponent;
Once the component name is exported we can use that name as a simple HTML tag which will render whatever the component returns to the screen
Class components lets us to use the local state, which we can see in the next section
Local state in Class component
Why local state? Is there a Global state? Yes! We can look into that in the Redux section. Lets focus on the local state here. Class components lets us use a state that is specific and has scope only within that class. We can define a state as simple as the below snippet
state = {
name: "Hello world!"
}
It is important to use the name “state” as it is a special keyword which acts as a local store to the component.
This state can be accessed by using ‘this.state’ and the state attribute name you want to access.
import React, { Component } from 'react';
class MyFirstComponent extends Component {
state = {
name: "Hello world!"
}
render() {
return (<div>{this.state.name}</div>);
}
}
export default MyFirstComponent;
After the state is initialized it can be updated using a special function ‘setState()’. This function tells React that this component and its children need to be re-rendered with the updated state. Example of setState can be seen in the below code
this.setState( { name: "Updated state"} );
Props
So what is this props thingy that I saw in the functional component? Glad you asked that! Props are nothing but the attributes you pass to a component. You can use the component irrespective of their type by referring them as a simple HTML tag and the attributes that you pass to this tag are sent as props to the Components
<MyFirstComponent name="HelloWorld!"/>
In a functional component we can use the props like this:
function myFirstComponent(props){
return <div> {props.name} </div>
}
export default myFirstComponent;
In a class based component we can access the props as in below code
import React, { Component } from 'react';
class MyFirstComponent extends Component {
const attributes = this.props;
render() {
return (<div>{attributes.name}</div>);
}
}
export default MyFirstComponent;
Lets get a glimpse of Redux and global state management
Redux and Global state management
State management is crucial as your application grow. Redux is a standalone library that is often used by React but not a part of React. However Redux by itself is a vast topic and is beyond the scope of this article. I’ll just give an overview of it.
From the above architecture, we can see that the components react with the global state by dispatching Actions and pass it to the reducer to replace the old state with the new one (I assume you all know the state is immutable). The Store then triggers an automatic subscription which will then be passed to the Components as props.
In depth React with Redux will be discussed in further articles
Starting your React application
You have learnt a lot of basics about React in the above sections. Lets go ahead and run our application. Open your npm console (or from your VS code terminal or any other IDE) and run the following command
npm start
This is compile and start the development server in http://localhost:3000 and opens your default browser to display the landing page as shown in the below image
Voila! You have just created your first React application. As the message says you can go ahead and edit the App.js or create your own component by any of the methods discussed above and render them on the screen.
This is an introductory module to give you a glimpse of some basic functionalities. React team has a well defined documentation where they will guide you to create a simple game with React. You can access that from the below link
Hope you are excited about React and continue your learning.
Thank you and Happy learning!