3.B. ReactJS - alexattia/myWiki GitHub Wiki
Table of Contents
Tuto : https://thinkster.io/getting-started-with-react
###What's React ?
Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page (ou portion) HTML à chaque changement d'état.
The big idea behind React is this: what if you could create your own HTML element that has customized functionality? For example, one could make a element that would display a textarea, run validations on the text typed into the textarea, submits the form when the enter key is pressed, etc — all just by including one line of code: . (From the Angular world,React Components are a close analogy to Directives). React is capable of becoming an entire replacement for your views because you can nest components.
<HomePage>
<Header tab-selected=“home” />
<ScrollingBanner>Welcome to my webpage!</ScrollingBanner>
<p>Enter your info below if you want to get in touch!</p>
<ContactForm />
<Footer />
</HomePage>
Each of those custom HTML tags would have their own functionality that displays relevant DOM elements (a form for , a sticky div at the top of the page for
, etc) as well as manipulate their respective DOM nodes (gather the values of the inputs in , add a CSS class for the home link in , etc). Because reusing components is a key idea behind React, it’s worth mentioning that each instantiated component receives it’s own scope.###React Components
Basics
React's render method outputs HTML elements. So a custom React component can be transformed into a real HTML element like a div or other.
React has a method called createElement that is used to define the DOM nodes you want to output. JSX allows you to write regular old HTML that then gets processed down into createElement’s. This is what our code looks like when we use JSX:
var Hello = React.createClass({
render: function() {
var targetOfGreeting = "world"
return <div classNAme="exempleCss"> Hello, { targetOfGreeting }!</div>;
}
});
ReactDOM.render(<Hello />, document.getElementById('container'));
In the HTML part :
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
We don't attach any React components to the <body> element , so we create a div and then retrieve it with document.getElementbyId. Then we use React's Dom libreary to render our component to our desired DOM node.
However, by abstracting our DIV into the component, we can reuse it over and over in our application. We use the attribute classNameinstead of class for using into the CSS file.
Iterating with Loops
How could we iterate over an array and create <li>for each of array items ?
React doesn’t require to learn a myriad of new methods to manipulate & render data. Instead, it relies heavily on the Javascript language itself for these common tasks. So we can use Javascrip's map method to quickly iterate over our array.
map method : The map() method creates a new array with the results of calling a provided function on every element in this array. Synthax arr.map(callback[, thisArg]) . Where callbackis the function that produces an element of the new Array with three arguments : currentValue, index, array.
Thanks to JSX it's easy to convert.
var Hello = React.createClass({
render: function() {
var names = ['Jake', 'Jon', 'Thruster'];
var namesList = names.map(function(name){
return <li>{name}</li>;
})
return <ul>{ namesList }</ul>
}
});