React.js intro

Wednesday, 19th June 2019 at Learn Factory and software development gets even smarter with REACTJS .

React is a JavaScript library for building user interfaces , a language developed by faceBook and introduced to the public in 2013 to make User Interfaces better and easier to build. worthy of note is React script allows us to write React components while ReactDOM script allows us to place our components and work with them in the context of the DOM.

The Babel script allows us to transpile ES6 to ES5. Some browsers have limited support for ES6 features; transpiling our ES6 to ES5 allows us to use the modern features of ES6 in our design without having to worry about compatibility. Notice that the React code is wrapped in a script tag with a type of text/babel.

ReactDOM.render(<Todo/>, document.getElementById(‘root’));

As expected , some installations has to be made at the terminal.

Js tool chain typically consist of package manager such as yarn and npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.

A bundler such as webpack or parcel-It lets you write modular code and bundle it together into small packages to optimize load time.

for installation, without opening any vs source code, you start by initializing into the environment you want your folder on, you input

 cd Desktop/

(for desktop) followed by

npm install -g create-react-app 

then

 npm init react-app my-todo-app

(my-todo-app) will be the name of the folder. The command snippets are shown below

Once done, on the same terminal, you

 cd my todo app 

then open the vs-code by inputting command

code .

Then you are in.

In the vs code, you would have a couple of folders and files like node_module,public,src,package-lock.json,package.json, README.md.

on ‘src’ folder, you can now create as many js files as possible but you must have only one index.js as shown in snippet below.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import Todo from ‘./Todo’;
import TodoItems from ‘./TodoItems’;
import * as serviceWorker from ‘./serviceWorker’;
ReactDOM.render(<Todo/>, document.getElementById(‘root’));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Each time you create another js file, you must ‘import with syntax ‘import Todo from “’./Todo’” (line 4) and render it in line 8 with syntax “ReactDom.render(<Todo/>, document.getElementById(‘root’));

the algorithm used in new js file is

import React, {Component} from ‘react’
const TodoItems = () => {
return (
<h2> I render individual todo Items</h2>
)
}
export default TodoItems;

you can also have a file in a file(that is a nested file) with algorithm below

import React, {Component} from ‘react’;
import Header from ‘./Header’;
class Todo extends Component {
render (){
return (
<div>
<Header/>
<h1> Welcome to my todo App</h1>
</div>
)
}
}
export default Todo;

It only gets better.