What I learnt about React

React is a declarative, component based Javascript library for building user interfaces. By been declarative, you declare your UI and react takes care of rendering and updating them when there are changes. Then by been component based, with react you define UI in terms of components where each component can be reused across tour application.

Getting started with React

Creating your first react app

For you to use react, you must have node installed on your pc. Then using your visual code or any code editor of your choice, go to terminal and run the following:

$npx create-react-app my-app

Where “my-app” is the name of the folder of the app you wish to create. So you can name it anything you wish.

$cd my-app

This will take you into the folder you created above

If react was successful installed you will see the following folders inside your “my-app” folder:

1. public
2. src

src folder contains the files you will mostly be making use of in creating your react app. It contains the “App.css” file which you will use in styling your app, “App.js” file which is responsible for rendering your react app that contains various components(For the todo list app I created I made use of this file only to display and render my app).

After creating your react app to run and view it on the browser, run the following command:

$ npm start

This will start your react app and display it on the browser on local host 3000.

React Components

There are two types of components in react:

1. Functional component
2. Class component

Functional Components are Javascript functions which returns an html(called Jsx)that describes the user interface. They can receive an object of properties Example:

function welcome(props){
return <h1>Hello, {prop.name}</h1>
}
// where props is a javascript object passed as parameter to the function

Class Components are regular es6 classes that extends the component class from the react library. They contain render method which returns html. Example:

Class Welcome extends React.Component{
render(){
return <h1>Hello, {this.prop.name}</h1>
}

Named Vs Default export

In react after creating your component either using functional or class component, you must export it so that you can import and make use of it in your app.js file in other to display it. There are two ways you can export components, by using named or default export.

Named export is appending the keyword “export” to the component whereas default export is appending “default” keyword to the component declaration. In the former you must import it with the exact component function or class name but in the latter you can import it using any name of your choice.

Github Link to my todoList app: https://github.com/NEBOLISA/react-todolist

Link to the hosted version: https://nebolisa.github.io/react-todolist/