Getting started with React

getting started with React

Hello, welcome to my very first blog post on React. In this blog post am going to walk you through how to set up a React project.

But before we dive right into the setup, what is React?

React is a Javascript library that was developed by Facebook for building user interfaces.

React provides a perfect way to pull the View out of MVC (Model View Controller), and have the Models and Controllers in the backend of your application.

React popularity

React is a very popular javascript library and many websites in the world today use it for their front end. Some of the popular websites using React include;

• Facebook
• Instagram
• Airbnb
• Udemy
• Reddit
• Pinterest

Some alternatives to React

Some of the alternatives you can use for the front-end are Backbone.js, Ember.js, Angular.js, just to mention but a few.

Why would you choose React

• React is a very lightweight library that only deals with the view layer. This also makes it easy to learn and understand React quickly.
• React also provides a component-based structure and as such one can construct a component and reuse it throughout the web application.
• React has a rich developer community around the world and as such one can easily find help online.
• React uses the Node.js environment and since Node comes with its package manager, React developers can pull in other node packages and use them in their application without re-inventing the wheel
• React is compatible with Redux, a very powerful flux architecture for managing state.
• React also has great developer tools. The React Developer tools that can be installed as a Chrome extension are very great for inspecting React components and debugging. If one is using Redux, they can also install the Redux Developer tools.
• React has a high performance compared to other frontend Javascript libraries. This is attributed to React’s virtual DOM. Any view changes are first reflected into virtual DOM, then an efficient diff algorithm compares the previous and current states of the virtual DOM and calculates the best way (minimum amount of updates needed) to apply these changes.

Prerequisites for React

To start digging into React you need to be familiar with HTML and CSS. You also need to have some basic knowledge of Javascript.

Alright now that we are somewhat acquainted with what React is let us get started.

Installing Node

React runs on Node.js so we need to have node installed on our computers. You can simply do this by visiting the Node.js site, then you chose the right download for your Operating system.

Installing create-react-app

Node.js comes with the node package manager (npm ). And since we just installed node, we have npm installed as well.

Using npm we can now install create-react-app

Open your terminal or command prompt then run this command

npm install create-react-app

Creating our first React project

With create-react-app installed, we can now create our first react project. I shall call my project rollex-connect. Navigate to where you want to create your react project, then run the following command

create-react-app rollex-connect

Now move into the project folder, for my case its rollex-connect so, I would just runcd rollex-connect.

Now start your react app by running:

npm start

The project will automatically start up on your localhost server on port 3000 and will automatically fire up your default browser with a webpage that looks like this.

Let us at least edit something in our newly created project. Open up your project in an editor of your choice. (I use VSCode). Navigate to the App.js file in the src folder.

Replace the code in the <header className=”App-header”> with this

<p>
 Welcome to Rollex Connect
</p>

Your page should automatically refresh and you should have something like this

Voilà there you have it, your very first react app. Easy peasy lemon squeezy, right 😃 😅

Alright, thank you so much for reading, click on those clap hands if you found this helpful or leave a comment if you have any feedback for me thank you.