LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



	ReactJS Research Project
	


	

Purpose


Describe the purpose of this JS library/framework. Why was it created? What are the selling points for using this JS library/framework over another? Include the logo for the JS library/framework (if there is one) and summarize this information in a minimum of 2-3 paragraphs. Include links to the websites listed above and at least ONE other website that you have used for your research.

React.js is a JavaScript library developed by Facebook & Instagram for building User Interfaces for complicated single page web applications. It breaks the UI down into resusable components that each present data that changes over time.

It is efficient and fast, computing the minimal changes necessary to keep the Document Object Model updated. It does this by storing a representation of the DOM (called the virtual DOM) by its render method, which describes the DOM using JSX (JavaScript XML). JSX Is a(n optional) shortcut for rendering code that's syntax looks like HTML, but behind the scenes it is automatically compiled into JavaScript code that the browser understands as instructions to manipulate the DOM. It is beneficial for teams of developers working on complex websites because the developers do not need to know the ins and outs of the website, they can focus on their assigned component without worrying about breaking the DOM flow.
See: code.facebook.com/projects/176988925806765/react/

As far as I understand, React seems to have a similar concept to AJAX in that only a part of the page (component) updates as opposed to the whole page refreshing to reflect changes, except rather than simply working with JSON data, each component is an application in itself.

React.js utilizes a declarative programming style, which means that you only need to tell it what it should do, and it will compute how to do it. This is in contrast to imperative programming, where you must describe each step of how something will be done. Declarative programming reduces the number of errors that can happen because, in this case, React.js is being delegated to handle the “how”, and so a program written with this library will be easier to debug.
See: stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js

Learn


Locate any free and recent free tutorials on how to use your selected JS library/framework. Visit the tutorials and summarize what you will learn from them in your own words in at least two paragraphs. Include at least 2 website links to tutorial or educational resources for learning how to implement your JS library/framework.

Set up React.js project with webpack:

This tutorial goes over the initial set up of a React project. It explains that you will need to install Webpack, which is a module bundling tool that bundles all of your different assets, i.e. your HTML, CSS, JavaScript code, and any plug ins. React applications are written in modular code where all the code is not together, so Webpack bundles them for you and communicates all of your assets to the browser so it can render your projects.

In the video the author also installs Babel, a Webpack plugin, which transforms ES6 code (of which not all browsers are currently compatible with) into ES6. He uses Node.js, which is used for the development server to host all the files, and npm (Nodes Package Manager) to manage the dependencies, which are encapsulated by npm and made easy to inject into components. React and React-DOM, webpack-dev-server, babel-loader are dependencies.


Writing your first component:

To create a component in React, you first define a component class name, and then you must extend the base component in the React package.

              
  class App extends React.Component {
  }

The base component in React contains many methods, one which is essential is the render method which renders to the page what you want to show.
          

  render() {
	return(
	<di>Hello</div>
	);
  }
  
  

To call the render method, you must pass two arguments into its parameters. First, pass in the component class name inside of which the render code lives, and the class name must be written like an XML tag < />.
Second, pass in the the part of the html you want to inject it into. i.e. you have an empty div tag with id of app in the html file where you want your React component to display.

  
  render(<App/>, document.getElementById(“app”));
  
  import React from “react”;
  import { render } from “react-dom”;     
  //render is a method of React-DOM that writes to the DOM

  class App extends React.Component {
  render() {
	return (
	<div>
		<h1>Hello</h1>
	</div>
	);
	}
  }
  render(<App/>, document.getElementById(“app”));
  
  

you will not be able to make two separate, unnested HTML sections within the JSX, only one root element is allowed. For example, you cannot have:

          
<main>
<h1>Hello</h1>
</main>
<div>
<h1>World</h1>
</div>

//It must be nested to do this:
<main>
<h1>Hello</h1>
<div>
<h1>World</h1>
</div>
</main>

A few of the differences between JSX and HTML are explained. In HTML you can use class=””, but in JSX it must be className=””. Inside the JSX code you can add any valid Javascript code (variables, strings, numbers, etc.) inside an HTML tag as long as the JS is within curly braces and on a single line. If it is within curly braces and on multiple lines it will not work. If you have more complex JavaScript code, an if/else statement for example, you can write it within the render method at the top before the return statement where the JSX code begins.

Community


Explore resources for your JS library/framework and find active communities where you can discuss and receive help for implementation. Try to find some place specific for your community and not just like a single discussion forum for your library/framework. One of the selling points on choosing whether to use a JS library/framework is based on how active the community of users is. Link to the BEST community of users and summarize the community, what is available, etc. in at least one paragraph.
The best resource for community support for React.js appears to me to be https://www.reddit.com/r/reactjs/. There are lots of great posts for beginners and more seasoned programmers alike. For example there are questions posted like: What are the use cases for returning Arrays or Fragments from render method? As well as articles such as an article on how to use a “zero configuration web application bundler” to start creating an app in React without the lengthy process in the beginning to install webpack. It is also posted to pretty often as opposed to some other sites. The actual website for React.js lists community resources, but I did not find these very helpful. https://reactjs.org/community/support.html lists five forums including stack overflow, but they have either not been actively visited recently, are infrequently used, or have questions with no answers.

Examples


Find some examples (commonly called a showcase) of your chosen JS library/framework. Explore the showcase and discuss at least 2 of your favorite sites created with your JS library/framework. What components do you see that have been implemented on the websites? What do you like and dislike about the websites? Provide at least 1 paragraph on your overall impression on your chosen JS library/framework and whether you think would be beneficial for you to learn it. How would it make web development easier for you rather than just writing JavaScript on your own?
YouTube Instasearch App http://www.amanhimself.me/react-youtube-search/ This website is really cool. It is a YouTube search UI that quickly loads video of the content you searched for along with the side bar of related videos to choose from. It is very fast! I am on a clunky laptop with the cheapest internet speed offered and the results load instantly, far faster than YouTube itself. The other cool thing is that the page does not refresh. The url remains the same and the new videos are loaded seemlessly.. This application uses YouTube API, React, React timestamp, and Bulma CSS (open source CSS framework based on flexbox). It also uses a package from GitHub called the Create React App which is intended to help programmers who are new to React bypass the complicated installation and build configuration of webpack and babel (these are preconfigured and hidden in the app), enabling you to start coding using React as quickly as possible. I think the author did a fantastic job on the YouTube Instasearch App.
CSS
body {
  background-color: rgb(23,23,23);
	color: rgb(89,199,235);
	margin: 0;
  font-size: 20px;
}
header {
  width: 80%;
  min-width: 400px; 
  margin-left: auto;
  margin-right: auto;  
}
div.title {
	background-color: red;
	width: 100%;
	max-width: 550px;
	display: inline;
	clear:both;
 float: left; 
}
div {  
  margin: auto;
	clear: both;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  text-align: center;
  width: 550px;
  margin: 0;
	font-size: 5em;
  box-shadow:10px 10px 90px 35px black;
  border-radius: 10px;
}

summary {
	margin: 0;
	padding: 1%;
	border-radius: 25px;
	background-color: rgb(50,50,50);
  width: 40%;
	min-width: 400px;
	display: inline;
	//clear: both;
	float: right;
}

.firstVid {
  clear: both;
  float: left;
}
.secondVid {
  clear: both;
  float:right;
}

iframe {
 padding: 15px;
}

a {
  text-decoration: none;
  color: #FFF8DC;
}

pre {
  padding: 5px;
  color: white;
  background-color: grey;
    display: block;
    font-family: monospace;
    font-size: 15px;
    white-space: pre;
    margin: 1em 0;
  border-radius: 5px;
  border-color: red;
  border-style: solid;
    border-width: medium;
}
pre.first{
   width: 320px;
}
pre.second{
   width: 500px;
}
.textPlusEx1 {
  width: 800px;
}
.textPlusEx2 {
  float: right;
  width: 40%;
}
.floatLeft {
    display: block;
  float:left;
  width: 290px;
}
#floatCode{  
  display: block;
  width: 500px;
}
#resume {
  clear:both;
}
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv