My First React App: A Beginner’s guide to getting started with React

cc: codeburst.io

This is a brief introduction to the React library written by a beginner React developer for other beginners that want to make use of React.

This is an article written from my first experience with React, it starts with the boring stuff which includes a brief intro to the react library, why you should learn React (for those not convinced about making use of the React library yet), some tools you need and setting up React on your computer making use of CRA(Create-React-App). Then we dive into our first few lines of code in React.
Let's get started.

A Brief Intro to react

React generally known as ReactJS, React.js, or just React is an awesome javascript library used to build User Interface seamlessly by turning every feature of a webpage to reusable components.
React was built by the facebook team and released to the world in 2013.

Why Should I use React?

There are numerous reasons why you should consider using React I will try to mention a few I think are quite Important;

1. The large community supporting React which makes it easy to easily ask anything.

2. Its open-sourced, hence many new features can be used on it

3. Its easier to learn than other present alternatives.

If you think you are convinced on why you should make use React lets now move over to setting up React on your local computer.

Setting-Up React

In this article, I will be talking about installation based on the Linux OS which is what I make use of.

For Mac users, you can check this here while windows users can check here.

React can be set up in various ways one involves loading it directly in the webpage in which you add a few scripts to the end of the body tag which includes a link to the React CDN­

The second involves the use of create-react-app, create-react-app helps get you to speed with React quickly by getting you a boilerplate template to work with without bothering about adding any external links cause create-react-app has settled it already. We will be making use of the create-react-app method as it’s more efficient

Before you can install React, you need to have npm and node installed.

Note: you can make use of yarn instead of npm

For starters, you need to open your Terminal and run the following commands

Use the following commands to check if node and npm is present

node -v
npm -v
yarn -v

Output:

This also shows you the version of node, yarn or npm you have installed.

If you don't have node installed already you can install it using node version manager(nvm), npm is installed with node.

nvm can also be used to update your node if it is of a lower version. Check out the process at nodesource.com

After successful installation of the above dependencies lets dive into installing React

Using create-react-app to install React

Still on your terminal run:

npm install -g create-react-app

This installs the create-react-app using npm as global.

Then use npx to create your project folder

npx create-react-app name-of-app

When it is finished, to start up immediately run

npm start

Before starting you must switch into the apps folder with

cd todolist

This starts the react app on your web browser

Getting Familiar With The React Environment

Let's dive into the basics of using React.

Open up the my-app folder in your code editor.

You should have something like this.

node_modules

This contains third party codes or dependencies that we use in our work.

public

This holds all static assets and the only HTML file for our work.

src

This where our app lives.

The current app running on your browser is the one from the app.js file.

The package.json file includes a central manifest for your project installations.
The read.md contains a list of commands to run with the app on the terminal which includes npm start to start up your app, npm eject, etc.

My First React Component

React is a component-based library that is every piece of interface created can be reused. This is one of the major strengths of React.

We will be creating our first component in eight simple steps.

First: Create a new javascript file in the src folder e.g Todo.js

Second: import the react library into your work.

import React, {Component} from 'react'

Third: create a new class using the properties of the React module. You must create every component with the capital letter as in Todo below

class Todo extends Components{
}

Fourth: render a component to the screen this is done inside your class block.

render (){
          return(
               <h1>My Todo App</h1>
             )
}

Fifth: export your new component for later use.

export default Todo;

Sixth: on your code editor open the index.js file present in the src folder.

Seventh: import your new components into index.js

import Todo from ‘./Todo’

Eight: render your app to the screen by editing the ReactDOM line which serves as to render the new component to the screen.

change the App in the bracket to Todo

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

Now go to your browser and see your first react creation.

Voila!!! You have just created your first react component.

Photo by Erwan Hesry on Unsplash

Check back for a continuation of this series.