Comment bien débuter en ReactJS
On vous a parlé de cette technologie et vous voulez vous y frotter ? Vous ne savez pas comment commencer avec toutes les technologies qui gravitent autour : React, Flux, Redux, Webpack, JSX, Babel, etc. ? Bref, vous êtes perdus. ReactJs ReactJS est une librairie JavaScript, créée par Facebook, utilisée uniquement pour le côté “vue” dans le paradigme MVC. Intérêt de React face aux autres frameworks La compétition est rude dans les frameworks JavaScript, notamment entre Angular (1 et 2), Ember et ReactJS. L’intérêt de React réside tout d’abord dans son approche composant, complètement différente des autres, et qui, au lieu de laisser notre JavaScript modifier le DOM, écrit du HTML dans ses composants JavaScript en interne. Un autre point positif est l’existence de React Native, permettant de créer des applications mobiles à la manière de Cordova/Ionic pour Angular. Concernant les webcomponents (avec le framework Polymer par exemple), ceux-ci ont un but différent de React. Exemple sans JSX
ReactJS For Stupid People
TL;DR I struggled for a long time trying to understand what React is and how it fits in the application architecture. This post is what I wish someone had told me. What is React? How does React compare to Angular, Ember, Backbone, et al? Stop. Stop it right now. React is ONLY THE VIEW LAYER. React is often mentioned in the same breath as other Javascript frameworks, but "React vs Angular" doesn't make sense because they aren't directly comparable things. React gives you a template language and some function hooks to essentially render HTML. You absolutely cannot build a fully functional dynamic application with React alone. The Good After working with React for a while, I've seen three very important benefits surface. 1. This may be the most important benefit, even though it is not different from Angular templates. Say you have to update your site's header with the user's name upon log in. <header><div class="name"> Not Logged In </div></header> Here's how you might do it in React: 2. 3. 1. 2.
Introduction à ReactJS
Cela fait maintenant un an que React est open-sourced. C'est l'occasion de présenter le petit dernier de la vague MV*. #Les différentes approches d'UI #Backbone Backbone apporte une simplification dans la déclaration d'évenements, il reste cependant très peu impliqué dans le rendering. Pour faire du data-binding, Backbone ne propose naturellement rien, et l'on doit faire appel à des mixins supplémentaires pour le mettre en place sans s'arracher les cheveux. De plus, c'est souvent un moteur de templating comme Handlebars ou Jade qui génére la vue originale. En somme, Backbone est très sympathique pour structurer son code proprement, mais concernant l'UI, n'aide absolument pas à réduire la compléxité liée aux états du DOM. #Angular Angular propose une approche beaucoup plus travaillée, en imposant un moteur de templating HTML (on peut utiliser du preprocessing) et on déclare ses bindings très simplement avec une syntaxe {{mustache}}. #Ember #React React change complètement d'approche.
SurviveJS
Home - React Kung Fu
Learn Redux — 20 video tutorials to help you learn how to build JavaScript apps with React.js and Redux.
A React TODOs example, explained – Hacker Noon
I was asked to answer a Quora question about a simple TODOs example, and I thought a detailed explanation for it would be helpful to any one starting to learn React. You can see the code in action here (Make sure you execute it with ES6/Babel selected in the middle). I did not write that code, I am just going to explain it inline after each important concept. The example is a simple TODOs app with 3 components: TodoList (the container and state manager)TodoItems (presentational for the list of todos)TodoInput (controlled component to read a new todo) The first rendered interface looks like: The initial list renders with test items “red” and “blue”, then you can use the “Add” button to add more items to the list.
React Armory
Leveling Up With React: React Router
By Brad Westfall On react, routing This tutorial is the first of a three-part series on React by Brad Westfall. When Brad pitched me this, he pointed out there are a good amount of tutorials on getting started in React, but not as much about where to go from there. If you're brand new to React, I recommend watching this intro video. #Article Series: Warning! When I was first learning, I found lots of beginner guides (i.e. 1, 2, 3, 4) that showed how to make single components and render them to the DOM. For what it's worth, here are some other great guides that aim at beginners: #Series Code This series also comes with some code to play with at GitHub. To keep things simple and brief, the examples in this series will start by assuming that React and React Router are retrieved from a CDN. #React-Router React isn't a framework, it's a library. If you've used any front-end router before, many of these concepts will be familiar. As a primer, this is what it's like to render a single component:
